200多个js技巧代码(五)
生活随笔
收集整理的這篇文章主要介紹了
200多个js技巧代码(五)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
161.標題欄
document.title//162.背景圖片
<body style="BACKGROUND-ATTACHMENT: fixed" background="img/bgfix.gif"></body>//背景圖片不動<STYLE TYPE="text/css">
<!--
BODY {background-image:img/bgchild.jpg;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;}
-->
</STYLE>//背景圖片居中163.設置透明效果
document.form.xxx.filters.alpha.opacity=0～100//164.定義方法
var dragapproved=false;
document.οnmοuseup=new Function("dragapproved = false");//165.將數字轉化為人民幣大寫形式
function convertCurrency(currencyDigits) {
// Constants:var MAXIMUM_NUMBER = 99999999999.99;// Predefine the radix characters and currency symbols for output:var CN_ZERO = "零";var CN_ONE = "壹";var CN_TWO = "貳";var CN_THREE = "叁";var CN_FOUR = "肆";var CN_FIVE = "伍";var CN_SIX = "陸";var CN_SEVEN = "柒";var CN_EIGHT = "捌";var CN_NINE = "玖";var CN_TEN = "拾";var CN_HUNDRED = "佰";var CN_THOUSAND = "仟";var CN_TEN_THOUSAND = "萬";var CN_HUNDRED_MILLION = "億";var CN_SYMBOL = "人民幣";var CN_DOLLAR = "元";var CN_TEN_CENT = "角";var CN_CENT = "分";var CN_INTEGER = "整";// Variables:var integral; // Represent integral part of digit number.var decimal; // Represent decimal part of digit number.var outputCharacters; // The output result.var parts;var digits, radices, bigRadices, decimals;var zeroCount;var i, p, d;var quotient, modulus;// Validate input string:currencyDigits = currencyDigits.toString();if (currencyDigits == "") {alert("Empty input!");return "";}if (currencyDigits.match(/[^,.\d]/) != null) {alert("Invalid characters in the input string!");return "";}if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {alert("Illegal format of digit number!");return "";}// Normalize the format of input digits:currencyDigits = currencyDigits.replace(/,/g, ""); // Remove comma delimiters.currencyDigits = currencyDigits.replace(/^0+/, ""); // Trim zeros at the beginning.// Assert the number is not greater than the maximum number.if (Number(currencyDigits) > MAXIMUM_NUMBER) {alert("Too large a number to convert!");return "";}// Process the coversion from currency digits to characters:// Separate integral and decimal parts before processing coversion:parts = currencyDigits.split(".");if (parts.length > 1) {integral = parts[0];decimal = parts[1];// Cut down redundant decimal digits that are after the second.decimal = decimal.substr(0, 2);}else {integral = parts[0];decimal = "";}// Prepare the characters corresponding to the digits:digits = new Array(CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT,CN_NINE);radices = new Array("", CN_TEN, CN_HUNDRED, CN_THOUSAND);bigRadices = new Array("", CN_TEN_THOUSAND, CN_HUNDRED_MILLION);decimals = new Array(CN_TEN_CENT, CN_CENT);// Start processing:outputCharacters = "";// Process integral part if it is larger than 0:if (Number(integral) > 0) {zeroCount = 0;for (i = 0; i < integral.length; i++) {p = integral.length - i - 1;d = integral.substr(i, 1);quotient = p / 4;modulus = p % 4;if (d == "0") {zeroCount++;}else {if (zeroCount > 0){outputCharacters += digits[0];}zeroCount = 0;outputCharacters += digits[Number(d)] + radices[modulus];}if (modulus == 0 && zeroCount < 4) {outputCharacters += bigRadices[quotient];}}outputCharacters += CN_DOLLAR;}// Process decimal part if there is:if (decimal != "") {for (i = 0; i < decimal.length; i++) {d = decimal.substr(i, 1);if (d != "0") {outputCharacters += digits[Number(d)] + decimals[i];}}}// Confirm and return the final output string:if (outputCharacters == "") {outputCharacters = CN_ZERO + CN_DOLLAR;}if (decimal == "") {outputCharacters += CN_INTEGER;}outputCharacters = CN_SYMBOL + outputCharacters;return outputCharacters;
}//166.xml數據島綁定表格
<html><body><xml id="abc" src="test.xml"></xml><table border='1' datasrc='#abc'><thead><td>接收人</td><td>發送人</td><td>主題</td><td>內容</td></thead><tfoot><tr><th>表格的結束</th></tr></tfoot><tr><td><div datafld="to"></div></td><td><div datafld="from"></div></td><td><div datafld="subject"></div></td><td><div datafld="content"></div></td></tr></table></body></html>//cd_catalog.xml
<?xml version="1.0" encoding="ISO-8859-1" ?><!-- Edited with XML Spy v4.2--><CATALOG><CD><TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.90</PRICE><YEAR>1985</YEAR></CD><CD><TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.90</PRICE><YEAR>1988</YEAR></CD><CD><TITLE>Greatest Hits</TITLE><ARTIST>Dolly Parton</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>RCA</COMPANY><PRICE>9.90</PRICE><YEAR>1982</YEAR></CD><CD><TITLE>Still got the blues</TITLE><ARTIST>Gary Moore</ARTIST><COUNTRY>UK</COUNTRY><COMPANY>Virgin records</COMPANY><PRICE>10.20</PRICE><YEAR>1990</YEAR></CD></CATALOG>
//167.以下組合可以正確顯示漢字
================================
xml保存編碼 xml頁面指定編碼
ANSI gbk/GBK、gb2312
Unicode unicode/Unicode
UTF-8 UTF-8
================================168.XML操作
<xml id="xmldata" src="/data/books.xml"><div id="guoguo"></div><script>var x=xmldata.recordset //取得數據島中的記錄集if(x.absoluteposition < x.recordcount) //如果當前的絕對位置在最后一條記錄之前{x.movenext(); //向后移動 x.moveprevious(); //向前移動 x.absoluteposition=1; //移動到第一條記錄 x.absoluteposition=x.recordcount;//移動到最后一條記錄，注意記錄集x.absoluteposition是從1到記錄集記錄的個
數的guoguo.innerText=xmldso.recordset("field_name"); //從中取出某條記錄}
</script>
169.動態修改CSS的另一種方式 this.runtimeStyle.cssText = "color:#990000;border:1px solid #cccccc";//170.正則表達式 匹配中文字符的正則表達式： [\u4e00-\u9fa5]匹配雙字節字符(包括漢字在內)：[^\x00-\xff]應用：計算字符串的長度（一個雙字節字符長度計2，ASCII字符計1）String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}匹配空行的正則表達式：\n[\s| ]*\r匹配HTML標記的正則表達式：/<(.*)>.*<\/\1>|<(.*) \/>/匹配首尾空格的正則表達式：(^\s*)|(\s*$)應用：javascript中沒有像vbscript那樣的trim函數，我們就可以利用這個表達式來實現，如下：String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g, ""); }利用正則表達式分解和轉換IP地址：下面是利用正則表達式匹配IP地址，并將IP地址轉換成對應數值的Javascript程序：function IP2V(ip) {re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正則表達式 if(re.test(ip)) { return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 } else {throw new Error("Not a valid IP address!") } }不過上面的程序如果不用正則表達式，而直接用split函數來分解可能更簡單，程序如下：var ip="10.100.20.168" ip=ip.split(".") alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))匹配Email地址的正則表達式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*匹配網址URL的正則表達式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?//利用正則表達式去除字串中重復的字符的算法程序：var s="abacabefgeeii" var s1=s.replace(/(.).*\1/g,"$1") var re=new RegExp("["+s1+"]","g") var s2=s.replace(re,"") alert(s1+s2) //結果為：abcefgi思路是使用后向引用取出包括重復的字符，再以重復的字符建立第二個表達式，取到不重復的字符，兩者串連。這個方法對于字符順序有要求的字符串可能不適用。//得用正則表達式從URL地址中提取文件名的javascript程序，如下結果為page1s="http://www.9499.net/page1.htm" s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") alert(s)/利用正則表達式限制網頁表單里的文本框輸入內容：用正則表達式限制只能輸入中文：οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"用正則表達式限制只能輸入全角字符： οnkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"用正則表達式限制只能輸入數字：οnkeyup="value=value.replace(/[^\d]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"用正則表達式限制只能輸入數字和英文：οnkeyup="value=value.replace(/[\W]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"171.設置和使用cookie <HTML><BODY> 設置與讀取 cookies...<BR> 寫入cookie的值<input type=text name=gg><INPUT TYPE = BUTTON Value = "設置cookie" onClick = "Set()"><INPUT TYPE = BUTTON Value = "讀取cookie" onClick = "Get()"><BR><INPUT TYPE = TEXT NAME = Textbox></BODY><SCRIPT LANGUAGE="JavaScript">function Set() { var Then =new Date() Then.setTime(Then.getTime() +60*1000 ) //60秒document.cookie ="Cookie1="+gg.value+";expires="+ Then.toGMTString() }function Get() {var cookieString =new String(document.cookie)var cookieHeader ="Cookie1="var beginPosition = cookieString.indexOf(cookieHeader)if (beginPosition !=-1){document.all.Textbox.value = cookieString.substring(beginPosition + cookieHeader.length)}elsedocument.all.Textbox.value ="Cookie 未找到!" } </SCRIPT></HTML>//172.取月的最后一天 function getLastDay(year,month) {//取年var new_year = year;//取到下一個月的第一天,注意這里傳入的month是從1～12var new_month = month++;//如果當前是12月，則轉至下一年if(month>12){new_month -=12;new_year++;}var new_date = new Date(new_year,new_month,1);return (new Date(new_date.getTime()-1000*60*60*24)).getDate(); }//173.判斷當前的焦點是組中的哪一個 for(var i=0;i<3;i++)if(event.srcElement==bb[i])break;//174.實現類 package com.baosight.view.utils; import javax.servlet.jsp.tagext.TagSupport; import javax.servlet.http.HttpSession; public class Mytag extends TagSupport {public int doStartTag() throws javax.servlet.jsp.JspException{boolean canAccess = false;HttpSession session= pageContext.getSession();if (canAccess){return EVAL_BODY_INCLUDE;}else{return this.SKIP_BODY;}} }175.在web.xml中添加定義<taglib><taglib-uri>guoguo</taglib-uri><taglib-location>/WEB-INF/abc.tld</taglib-location></taglib>176.標簽庫中定義abc.tld <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd"><taglib><tlibversion>1.0</tlibversion><jspversion>1.1</jspversion><shortname>hr</shortname><uri>guoguo</uri><info>Extra 3 Tag Library</info><tag><name>mytag</name><tagclass>com.baosight.view.utils.Mytag</tagclass><attribute><name>id2</name><required>true</required><rtexprvalue>true</rtexprvalue></attribute></tag></taglib>177.在使用自定義標簽的頁面中加入自己定義的標簽， <%@ taglib uri="guoguo" prefix="guoguo"%> //自己定義標簽178.顯示帶邊框的集 <fieldset style="border:1px gray solid;width:100px"><legend>查詢條件</legend> dfdfdf </fieldset>//179.【文件(F)】菜單中的命令的實現
169.動態修改CSS的另一種方式 this.runtimeStyle.cssText = "color:#990000;border:1px solid #cccccc";//170.正則表達式 匹配中文字符的正則表達式： [\u4e00-\u9fa5]匹配雙字節字符(包括漢字在內)：[^\x00-\xff]應用：計算字符串的長度（一個雙字節字符長度計2，ASCII字符計1）String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}匹配空行的正則表達式：\n[\s| ]*\r匹配HTML標記的正則表達式：/<(.*)>.*<\/\1>|<(.*) \/>/匹配首尾空格的正則表達式：(^\s*)|(\s*$)應用：javascript中沒有像vbscript那樣的trim函數，我們就可以利用這個表達式來實現，如下：String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g, ""); }利用正則表達式分解和轉換IP地址：下面是利用正則表達式匹配IP地址，并將IP地址轉換成對應數值的Javascript程序：function IP2V(ip) {re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正則表達式 if(re.test(ip)) { return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1 } else {throw new Error("Not a valid IP address!") } }不過上面的程序如果不用正則表達式，而直接用split函數來分解可能更簡單，程序如下：var ip="10.100.20.168" ip=ip.split(".") alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))匹配Email地址的正則表達式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*匹配網址URL的正則表達式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?//利用正則表達式去除字串中重復的字符的算法程序：var s="abacabefgeeii" var s1=s.replace(/(.).*\1/g,"$1") var re=new RegExp("["+s1+"]","g") var s2=s.replace(re,"") alert(s1+s2) //結果為：abcefgi思路是使用后向引用取出包括重復的字符，再以重復的字符建立第二個表達式，取到不重復的字符，兩者串連。這個方法對于字符順序有要求的字符串可能不適用。//得用正則表達式從URL地址中提取文件名的javascript程序，如下結果為page1s="http://www.9499.net/page1.htm" s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2") alert(s)/利用正則表達式限制網頁表單里的文本框輸入內容：用正則表達式限制只能輸入中文：οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"用正則表達式限制只能輸入全角字符： οnkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"用正則表達式限制只能輸入數字：οnkeyup="value=value.replace(/[^\d]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"用正則表達式限制只能輸入數字和英文：οnkeyup="value=value.replace(/[\W]/g,'')"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"171.設置和使用cookie <HTML><BODY> 設置與讀取 cookies...<BR> 寫入cookie的值<input type=text name=gg><INPUT TYPE = BUTTON Value = "設置cookie" onClick = "Set()"><INPUT TYPE = BUTTON Value = "讀取cookie" onClick = "Get()"><BR><INPUT TYPE = TEXT NAME = Textbox></BODY><SCRIPT LANGUAGE="JavaScript">function Set() { var Then =new Date() Then.setTime(Then.getTime() +60*1000 ) //60秒document.cookie ="Cookie1="+gg.value+";expires="+ Then.toGMTString() }function Get() {var cookieString =new String(document.cookie)var cookieHeader ="Cookie1="var beginPosition = cookieString.indexOf(cookieHeader)if (beginPosition !=-1){document.all.Textbox.value = cookieString.substring(beginPosition + cookieHeader.length)}elsedocument.all.Textbox.value ="Cookie 未找到!" } </SCRIPT></HTML>//172.取月的最后一天 function getLastDay(year,month) {//取年var new_year = year;//取到下一個月的第一天,注意這里傳入的month是從1～12var new_month = month++;//如果當前是12月，則轉至下一年if(month>12){new_month -=12;new_year++;}var new_date = new Date(new_year,new_month,1);return (new Date(new_date.getTime()-1000*60*60*24)).getDate(); }//173.判斷當前的焦點是組中的哪一個 for(var i=0;i<3;i++)if(event.srcElement==bb[i])break;//174.實現類 package com.baosight.view.utils; import javax.servlet.jsp.tagext.TagSupport; import javax.servlet.http.HttpSession; public class Mytag extends TagSupport {public int doStartTag() throws javax.servlet.jsp.JspException{boolean canAccess = false;HttpSession session= pageContext.getSession();if (canAccess){return EVAL_BODY_INCLUDE;}else{return this.SKIP_BODY;}} }175.在web.xml中添加定義<taglib><taglib-uri>guoguo</taglib-uri><taglib-location>/WEB-INF/abc.tld</taglib-location></taglib>176.標簽庫中定義abc.tld <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd"><taglib><tlibversion>1.0</tlibversion><jspversion>1.1</jspversion><shortname>hr</shortname><uri>guoguo</uri><info>Extra 3 Tag Library</info><tag><name>mytag</name><tagclass>com.baosight.view.utils.Mytag</tagclass><attribute><name>id2</name><required>true</required><rtexprvalue>true</rtexprvalue></attribute></tag></taglib>177.在使用自定義標簽的頁面中加入自己定義的標簽， <%@ taglib uri="guoguo" prefix="guoguo"%> //自己定義標簽178.顯示帶邊框的集 <fieldset style="border:1px gray solid;width:100px"><legend>查詢條件</legend> dfdfdf </fieldset>//179.【文件(F)】菜單中的命令的實現
總結
以上是生活随笔為你收集整理的200多个js技巧代码(五)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第六次周赛
- 下一篇： Silverlight三维柱状图3D饼图