JavaScript(2)
2015-11-18 18:56
585 查看
x.substring(start,end);含头不含尾
x.split(bystr);返回数组
x.repalce(regexp)可用这则表达式
x.match(regexp) 匹配,找到的话返回匹配字符串的数组
找不到的话返回null
search()==IndexOf();
var books= new Array(7);//初始7个,其实可以无限添加元素
var books= new Array(100,”a”,true);//不区分类型
var books= new Array([100]);//就一个元素:100
var books= new Array();
math.PI : 180度
Math.round(3.56)
n.toFixed(2):保留数字n的2位小数,四舍五入,小数没有补0
7)
js文件
html
8)数组
9)彩票
10)reg
11)form
12)Date
13)方法重载
14)decodeURI/encodeURI
15)eval计算器
16)删除确认(2个return)
17)页面跳转
18)动态时钟
x.split(bystr);返回数组
x.repalce(regexp)可用这则表达式
x.match(regexp) 匹配,找到的话返回匹配字符串的数组
找不到的话返回null
search()==IndexOf();
var books= new Array(7);//初始7个,其实可以无限添加元素
var books= new Array(100,”a”,true);//不区分类型
var books= new Array([100]);//就一个元素:100
var books= new Array();
math.PI : 180度
Math.round(3.56)
n.toFixed(2):保留数字n的2位小数,四舍五入,小数没有补0
7)
js文件
function searchAndReplace(){ //IPO //var txtObj = document.getElementById("txtString");//本行作用等同下一行 var txtObj = document.querySelector("#txtString"); var str=txtObj.value; //正则表达式,也可写原文。属性后缀g:全局替换。后缀i:忽略大小写 var reg=/js/gi; /*var reg=/我(去|草)/gi;*/ /*str.match(reg):找到的话,返回数组 找不到的话,返回null*/ var strs=str.match(reg); if(strs!=null){ console.log(strs.length); /*str.replace(正则表达式,替换值); */ str=str.replace(reg,'**'); /*结果写回文本框*/ txtObj.value=str; alert('共替换'+strs.length+'处'); } }
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>字符查询与过滤</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script src="index7.js"></script> </head> <body style="font-size:18px;font-weight:bold"> <input style="width:300px" id="txtString" value="我的第一个JS页面,js是个客户端脚本语言"/><br/> <input type="button" value="过滤特殊字符(js)" onclick="searchAndReplace();"/> </body> </html>
8)数组
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>数组</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script> // Step0:初始化数组a为1,2,3,b为123,12,23 /*JS只要看到中括号,就是数组*/ var f=[];//js常用的创建方式 /*JS中数组没有长度限制*/ f[0]=1; f[1]=1; var a=[1,2,3]; var b=[123,12,23]; /*document.write:往网页的顶部写东西, 开发中很少用,因为会改变页面布局*/ document.write("<h1>初始化数组a为:"+ a.toString()+"</h1>" ); document.write("<h1>初始化数组b为:"+ b.toString()+"</h1>" ); //连接数组:一个数组.concat(另一数组);不会改变a和b的任一数组 var c = a.concat(b); document.write("<h1>初始化数组c为:"+ c.toString()+"</h1>"); //c.slice(2,4)截取数组一部分,参数含头不含尾 var d = c.slice(2,4); document.write("<h1>初始化数组d为:"+ d.toString()+"</h1>"); //数组排序,c.sort():按字符串排, //先比第一位的字符,相同的话比第2位,然后第3位。。。 c.sort(); document.write("<h1>数组c排序为:"+ c.toString()+"</h1>"); //比较器 function compare(a,b){ return a-b; } /*JS中方法定义正确有三种:*/ //function compare(a,b){return a-b;} //var compare=function(a,b){return a-b;} //var compare= new Function('a','b','return a-b;'); c.sort(compare);//compare就是对象,JS中一切都是对象 document.write("<h1>数组c重新用比较器比较后排序为:"+ c.toString()+"</h1>"); function compareDesc(a,b){ return b-a; } c.sort(compareDesc); document.write("<h1>数组c重新用比较器倒序比较后排序为:"+ c.toString()+"</h1>"); c.reverse();//数组中的顺序颠倒 document.write("<h1>数组c顺序颠倒:"+ c.toString()+"</h1>"); </script> </head> <body style="font-size:18px;font-weight:bold"> </body> </html>
9)彩票
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>彩票算法</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> </head> <body style="font-size:18px;font-weight:bold"> <script> var result=[]; var i=0; while(i<7){ var r = Math.floor(Math.random()*33+1); //1-33之间的随机整数 //判断元素是否在数组中出现,indexOf用法和原理同String中 if(result.indexOf(r)==-1){ //result[i]=r; result.push(r); i++; } } //function sortFun(a,b){return a-b;} //result.sort(sortFun); result.sort(function(a,b){return a-b}); alert(result.toString()); </script> </body> </html>
10)reg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>reg</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> </head> <body style="font-size:18px;font-weight:bold"> <script> var reg=/(明明|静静)/g var str ="你:明明呵呵,呵呵静静,静静是谁,明明是谁?"; //reg.exec(str): 检索字符串str中指定的值(明明、静静),每次只能找到第一个 //返回找到的位置,并确定其位置。 while(arr=reg.exec(str)){//arr其实就是接收了一个字符串 //arr.index:当前找到的关键字的开始位置 //reg.lastIndex:下次循环的开始位置。每次循环时自动从lastIndex开始执行 document.write("关键字的前后位置:"+arr.index+"-"+(reg.lastIndex-1)+"<br/>"); } </script> </body> </html>
11)form
JS文件:function validateUserName(name){ //IPO //^...$ : 全文匹配。 //^是说必须以reg开头,$是说必须以reg结尾 var reg=/^[a-zA-Z0-9_]{1,10}$/; //reg.test测试name是否通过表达式 //如果没通过: if(!reg.test(name)){ alert("姓名格式不符"); } } function validatePwd(pwd){ var reg=/^\d{6}$/; //如果没通过: if(!reg.test(pwd)) alert("密码格式不符");//以后对话框都是css+div,alert基本不用 } --------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>form</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script src="index11form.js"></script> </head> <body> <form> <h2>增加管理员</h2> <table width="600px"> <tr> <td width="80px" height="35px">姓名:<td> <td width="180px"> <input type="text" name="userName" onblur="validateUserName(this.value)"/> <td> <td>10个字符以内,字母数字、数字、下划线的组合<td> <tr> <tr> <td width="80px" height="35px">密码:<td> <td width="180px"> <input type="text" onblur="validatePwd(this.value)"/> <td> <td>6个数字<td> <tr> </table> </form> </body> </html>
12)Date
JS文件: /** var reg1=/^\d{3,6}$/; var reg2=new RegExp("^\\d{3,6}$"); 编译正则表达式: reg.compile(x,[y])一般不用,浏览器自动编译 reg.exec(str) var now = new Date(); 自动获得客户端当前时间 W3C school(文档) var nowd2 = new Date("2013/3/20 11:12") getDate(); getDay;getFullYear() setDate(); setDay;setFullYear() (1)每个分量都有一对get和set getHours() getMinutes() getSeconds() (2)年月日星期是单数 时分秒毫秒是复数 (3)怎么取出来,算完再放回去 0是周日 */ /****index12date.js*****/ /*凡是从页面上传入的内容,都是字符串类型*/ function calc(days){ var n=parseInt(days); //获得当前七日 var now=new Date(); //怎么取出来,算完,怎么放回去 var d=now.getDate();//--5 /*数值计算,注意+/-1修正*/ //d=d+20-1; //20天后的火车票 d=d-n+1;//3 /*setXXX方法会直接修改原对象 返回值为毫秒数 */ //var end=now.setDate(d); var end=new Date(); /* end.setDate(0)--上个月最后一天 end.setDate(-1)--上个月倒数第二天 end.setMonth(3)--设为3月 */ end.setDate(d); /*Locale:当地时间 Date:只显示日期部分 Time:只显示时间部分 */ alert("开始日期:"+end.toLocaleDateString()+"\n" +"截至日期"+now.toDateString()); //alert("开始日期:"+end.toString()+"\n" //+"截至日期"+now.toString()); //此处<br/>不好使 } ---------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>订单查询</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script src="index12date.js"></script> </head> <body> <h2>订单时段查询</h2> <!-- label:扩大点击区域--> <label><input type="radio" name="date" value="3" onclick="calc(this.value)"/> 三天内 </label> <label><input type="radio" name="date" value="7" onclick="calc(this.value)"/> 一周内 </label> </body> </html>
13)方法重载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>重载</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script type="text/javascript"> /** JS是解释执行,后面的方法把前面的覆盖了 function myMethod(n,m){ alert(n+m) } function myMethod(n){ alert(n*n) } //var myMethod = function myMethod(n){alert(n*n)} //var myMethod = function myMethod(n,m){alert(n+m)} */ /* 变通实现重载 */ function myMethod(){ /*每个方法中都有一个arguments数组, 根据参数个数不同来执行不同的语句*/ if(arguments.length==1){ //平方 var n = parseFloat(arguments[0]); alert(n*n); } if(arguments.length==2){ //加法 var a = parseFloat(arguments[0]); var b = parseFloat(arguments[1]); alert(a+b); } } </script> </head> <body> <input type="button" value="计算平方" onclick="myMethod(12)"/> <input type="button" value="计算加法" onclick="myMethod(10,13)"/> </body> </html>
14)decodeURI/encodeURI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>decodeURI/encodeURI</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <!-- 常用的全局函数有: parseInt()/parseFloat() isNaN() eval decodeURI/encodeURI 解码编码 alert属于window --> </head> <body> <h1> var str="http://www.baidu.com?张三" </h1> <script type="text/javascript"> var str ="http://www.baidu.com/s?wd=张三"; //编码:encodeURI str=encodeURI(str);//Java decode(str) document.write("<h1>encodeURI str="+str+"</h1>"); //解码:decodeURI str=decodeURI("%E5%BC%A0%E4%B8%89");//Java encode(str) document.write("<h1>decode from server :str="+str+"</h1>"); </script> </body> </html>
15)eval计算器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>计算器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script type="text/javascript"> function calc(str){ var taObj=document.querySelector('#txtData'); //c,清空 if(str=='C')taObj.value=""; //=,计算 else if(str=='='){ if(taObj.value.length>0) /*如果传入表达式错误,eval会抛出异常*/ try{ var r=eval(taObj.value); taObj.value=r; }catch(err){ taObj.value=err; } } //否则,追加 else taObj.value+=str; } </script> </head> <body> <div> <input type="button" value="1" onclick="calc(this.value)"> <input type="button" value="2" onclick="calc(this.value)"> <input type="button" value="3" onclick="calc(this.value)"> <input type="button" value="4" onclick="calc(this.value)"><br/> <input type="button" value="C" onclick="calc(this.value)"> <input type="button" value="+" onclick="calc(this.value)"> <input type="button" value="-" onclick="calc(this.value)"> <input type="button" value="=" onclick="calc(this.value)"><br/> <!--readonly表示文本框不可编辑 <textarea type="text" cols="25" rows="4" id="txtData" style="resize:none" readonly onclick="calc(this.value) > </textarea>--> <input type="text" id="txtData" style="font-size:15pt;border:1px solid gray;" /> </div> </body> </html>
16)删除确认(2个return)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>删除确认</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script type="text/javascript"> function update(){ /*确定:返回true;取消:返回false*/ var r=confirm('是否继续提交?'); //false取消提交事件 /**重要:取消事件:需要2个return,常用在重要信息的提交时*/ return r;//false--告诉浏览器 } </script> </head> <body> <form> <input name="user""/> <!--需要注意的是,为按钮定义单击事件时,需要使用 return 关键字。--> <input type="submit" value="更新" onclick="return update()"/> </form> </body> </html>
17)页面跳转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>窗口跳转新页面等</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script type="text/javascript"> </script> </head> <body> <!--页面跳转3种形式: 1.替换当前页 <a href="url"></a> 2.可重复打开新窗口 <a href="url" target="_black"></a> js:window.open(url) 3.重复链接,只能开一个新窗口 js:window.open(url,'标识名') 标识名的作用是同名的窗口只能打开一次 --> <input type="button" value="可重复打开新窗口" onclick="window.open('http://www.baidu.com')"/> <input type="button" value="只能开一个新窗口" onclick="window.open('http://www.baidu.com','baidu')"/> <!--以超链接的形式代替按钮:(void(0)什么都不做。) a href="javascript:void(0)":将超链接变成死链接,不可用井号,因为会回到顶部 --> <a href="javascript:void(0)" onclick="window.open('http://www.baidu.com','baidu')">不可重复打开新页面</a> </body> </html>
18)动态时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>时间</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style></style> <script type="text/javascript"> /*定时器:做什么事(function) 何时做,何时停止 */ //定义全局变量,代表线程号 var timer; /*倒计时:计算倒计时;页面记载后开始;点按钮时停止*/ var calc=function(){ var now = new Date(); //假定18点整下课 var hour = 17-now.getHours(); var minutes = 59-now.getMinutes(); var seconds = 59-now.getSeconds(); if(hour<0) clearInterval(timer); else{ //var h1=document.getElementById("time"); var h1=document.querySelector("h1"); /*innerHTML:开始标签到结束标签之间的所有文本*/ h1.innerHTML=hour+"小时"+minutes+"分"+seconds+"秒"; } } /*<!--onload事件会在页面或图像加载完成后立即发生。-->*/ window.onload=function(){ /*setInterval(做什么事,每隔多少毫秒执行一次), 此时已经开辟了新线程执行calc 这个方法会返回一个整数,唯一标识1个子线程 */ timer=setInterval(calc,1000); } function stopTimer(){ //===专门用于比较undefined, ==会把undefined认为是null if(timer===undefined) //重新开始一个线程 timer=setInterval(calc,1000); else //关闭一个线程 timer=clearInterval(timer); //timer=undefined } /*一次性计时器:做什么事(function)何时做,何时停止*/ var timer1; function myAlert(){ alert("该起床了"); //实现重复启动闹钟(alert之后,线程值设置为undefined) timer1=undefined; } function startAlert(){ if(timer1===undefined) /*setTimeout(做什么事情,等待多少毫秒); */ timer1=setTimeout(myAlert,5000); //5秒中之后执行myAlert方法,此5秒之内timer1有值 else /*取消等待(线程启动后,timer1不是undefined,如果再次点击的话,中断线程)*/ timer1=clearTimeout(timer1); //timer=undefined //如果线程timer1有值,那么中断此线程 } </script> </head> <body> 距离下课还有: <h1 id="time"></h1> <input type="button" value="停止倒计时" onclick="stopTimer(this)"/><br/> <input type="button" id="btnTimeOut" value="再睡5秒" onclick="startAlert(this)"/><br/> </body> </html>
相关文章推荐
- js学习总结
- js常用事件总结
- js常用事件总结
- js导出表格数据
- js导出表格数据
- (转)用JS获取地址栏参数的方法(超级简单)
- backup_articles
- javascript_DOM 编程艺术学习笔记(五)
- Servlet与jsp的“一语惊醒梦中人”的区别
- JavaScript跨域请求RESTful Web Servic
- JWT【JSON Web Token】 简述
- Json数据解析
- 对js中的引用类型的理解(6)——基本包装类型(Booelean、Number、String)
- 对js中的引用类型的理解(5)——Date类型
- 对js中的引用类型的理解(4)——Function类型
- 对js中的引用类型的理解(3)——Array类型
- 应用js函数柯里化currying 与ajax 局部刷新dom
- 通过共享文件夹来进行前后端独立开发
- ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形
- js 函数arguments一种用法