2013年9月24日 星期二

JavaScript replace 字數計算,取代空白、換行

前置作業:
請自行下載JQuery檔案以及建置好開發ASP的環境。
重點在於如何使用JavaScript來計算使用者在輸入文字時,如何計算字數。

紅色字為重點

<%@CODEPAGE="65001"%>
<%
'輸出設定成UTF-8'
Response.CodePage = 65001  
Response.CharSet = "utf-8"

'在使用傳統ASP時,為了避免使用者按"上一頁"看到Client的暫存網頁,通常會加上下列這三行'
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "no-cache"
Response.Expires = -1

%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
var str_factor=/(\s)|(\n)/g;
$(document).ready(function(){
       //運用JQuery為input id=TB1加入keyup事件
$('#TB1').keyup(function(){
var Word_Number;
var str_temp2 = $('#TB1').val(); //取得input id=TB1的值
if (str_temp2.replace(str_factor, "").length==0) {
$("#SSWl").html(''); //將 div id=SSWl 文字清空
}else{
Word_Number=(str_temp2.replace(str_factor, "")).length;
$("#SSWl").html('目前字數:'+Word_Number);
$('#showmsg').html($('#TB1').val());
}
});
});

function checkform(){
var str_temp = "";
if ($('#TB1').val() == '' || $.trim($('#TB1').val()).length - 1 == -1) {
alert('未填寫');
return false;
} else {
str_temp = $('#TB1').val();
if ((str_temp.replace(str_factor, "")).length < 10) {
alert('字數小於10個字,\n必須至少10個字');
return false;
}else if ((str_temp.replace(str_factor, "")).length > 10){
if ((str_temp.replace(str_factor, "")).length > 50){
 alert('字數最多不能大於50個字');
 return false;
}
}
}
window.document.f1.submit();
}
</script>
</head>
<body>
<%
TB1=Request.Form("TB1")
if NOT ISEmpty(TB1) then
   Response.write "NOT Empty<br />"
   str_temp=replace(TB1,vbcrlf,"" )
   str_temp=replace(str_temp," ","" )
   Response.write "長度="& len(str_temp) & ";" & str_temp '&nbsp;空白符號
else
   Response.write "Empty"
end  if
%>
<div id="SSWl"></div>
<form method="post" name="f1" id="f1" action="test_TextBox.asp" enctype="application/x-www-form-urlencoded">
  <textarea name="TB1" id="TB1" style="width: 450px; height: 180px"></textarea>
  <input type="submit" value="送出" onclick="javascript:checkform();"/>
</form>
<br />
<span id="showmsg">?</span>
</body>
</html>

JavaScript 顏色16進位轉RGB 或 RGB轉16進位

最近剛好碰到Html5的<input type="color"/>
當我選擇好顏色的時候,取到的值會是#ff0000,但有時開發人員會想取得RGB的值也就是RGB(255,255,255),您可以參考這篇資料 Convert rgb color to hex color


程式碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="No-cache" />
<title>顏色16進位轉RGB 或 RGB轉16進位</title>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
//RGB轉16進位
function rgb2hex(rgb){
   var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
   var hex = function(x){
       return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
   };
   var tmp = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   var color = hex(tmp[1]) + hex(tmp[2]) + hex(tmp[3]);
   return color;
}
//16進位轉RGB
function hex2rgb(v){
   if (/^[0-9A-F]{3}$|^[0-9A-F]{6}$/.test(v.toUpperCase())) {
       if (v.length == 3) {
           v = v.match(/[0-9A-F]/g);
           v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2];
           this.value = v;
       }
   
       var r = parseInt(v.substr(0, 2), 16);
       var g = parseInt(v.substr(2, 2), 16);
       var b = parseInt(v.substr(4, 2), 16);
       return [r, g, b].join(',');
   }
   return v;
}
var hex,rgb;
//背景色
$('#BColor').change(function(){
  hex=$('#BColor').val().replace('#', ''); //將#字號取代掉
  rgb ='rgb('+hex2rgb(hex)+')';
  alert(rgb);
});
</script>
</head>
<body>
Bg:<input type="color" id="BColor"/>
</body>
</html>