私人公開筆記本: 9月 2013

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 ' 空白符號
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>

2013年9月24日 星期二

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

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

2013年9月24日星期二