js总结（二）
来源：互联网 发布：centos 下载工具 迅雷 编辑：程序博客网 时间：2024/05/22 16:58
一、引用类型（Date）
1.方法
var date=new Date(); //返回当前的日期和时间 //给Date中传入数据则得到传入的时间date.getFullYear(); //获取当前年份 date.getMonth()+1; //获取当前月份 date.getDate()； //获取当天date.getHours(); //获取当前小时date.getMinutes(); //获取当前分钟date.getSeconds(); //获取当前秒数date.getTime(); //获取1970.1.1至今的毫秒数2.JS中设定延时：setTimeout和setInterval
相同点：setTimeout和setInterval语法相同
setTimeout(“fn”，time) //time 是以毫秒为单位的时间间隔
setInterval(“fn”,time)
不同点
setTimeout 只执行一次，无周期
setInterval 周期=”交互时间”（即自动重复）
停止定时
clearTimeout(对象) //清除已设置的setTimeout对象
clearInterval(对象) //清除已设置的setInterval对象
3.时钟
1.时钟练习
1).使用setTimeout(没有延迟)
function showDateTime(){ var myDate=new Date(); var year=myDate.getFullYear(); var month=myDate.getMonth()+1; var date=myDate.getDate(); var h=myDate.getHours(); var m=myDate.getMinutes(); var s=myDate.getSeconds(); month=geShiHua(month); date=geShiHua(date); h=geShiHua(h); m=geShiHua(m); s=geShiHua(s); document.getElementById("shizhong").innerHTML=("时间："+year+"-"+month+"-"+date+" "+h+":"+m+":"+s); setTimeout("showDateTime()",1000);}window.onload=showDateTime;//showDateTime();function geShiHua(n){ if(n<10){ return "0"+n; }else return n;}2).使用setInterval
function showDateTime(){ var myDate=new Date(); var year=myDate.getFullYear(); var month=myDate.getMonth()+1; var date=myDate.getDate(); var h=myDate.getHours(); var m=myDate.getMinutes(); var s=myDate.getSeconds(); month=geShiHua(month); date=geShiHua(date); h=geShiHua(h); m=geShiHua(m); s=geShiHua(s); document.getElementById("shizhong").innerHTML=("时间："+year+"-"+month+"-"+date+" "+h+":"+m+":"+s);}setInterval("showDateTime()",1000);function geShiHua(n){ if(n<10){ return "0"+n; }else return n;}showDteTime(); //立即调用，解决1s延迟4.倒计时
function countDown(){ var nowDate=new Date(); var futureDate=new Date(2017,12,12,0,0); var distance=Math.floor(futureDate.getTime()-nowDate.getTime()/1000); var day=Math.floor(distance/86400); var hours=Math.floor(distance%86400/3600); var minutes=Math.floor(distance%86400%3600/60); var seconds=Math.floor(distance%60); document.getElementById("daojishi").innerHTML="倒计时："+day+"天"+hours+"："+minutes+":"+seconds;}countDown();setInterval("countDown",1000);二、Math对象
1.Math对象的属性
Math.E //常量e的值Math.LN2 //2的自然对数Math.LOG2E //以2为底e的对数Math.PI //π的值Math.SQRT2 //2的平方根Math.SQRT1_2 //1/2的平方根2.min()和max() 方法
var max=Math.max(3,54,32,16);alert(max); //54var min=Math.min(3,54,32,16);alert(min); //3也可以使用apply()方法var values=[1,2,3,4,5,6,7,8];var max=Math.max.apply(Math,values);3.舍入方法
Math.ceil(); //向上舍入Math.floor(); //向下舍入Math.round(); //四舍五入4.random()方法
Math.random() //生成0-1之间的随机数**生成m-n之间的随机数：**function fn(min,max){ return Math.floor(Math.random()*(max-min+1)+min);}fn(2,9); //生成2-9之间的随机数验证码练习
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>验证码</title> <style type="text/css"> .fl{ float: left;} .clear{clear: both;display: block} #wrapper{ width:400px; height: 150px; background: #ccc; margin:0 auto; padding: 20px; font-size:20px; } .text{ width: 180px; height: 32px; border:1px solid orange; margin-right: 15px; margin-bottom: 15px; text-align: center; background: orange; } .number{ width: 180px; height: 34px; line-height: 34px; display: block; background: orange; text-align: center; border:1px solid orange; } .btn{ width:40px; height: 30px; } .demo{ width:400px; height: 100px; margin-top: 30px; text-align: center; } </style></head><body> <div id="wrapper"> <input type="text" class="text fl"/> <span class="number fl"></span> <input type="button" value="确定" class="btn clear"/> <div class="demo">这是一个验证码框<br/>输入验证码吧小宝贝</div> </div> <script type="text/javascript"> var oinput=document.querySelector(".text"); var ospan=document.getElementsByTagName("span")[0]; var obtn=document.querySelector(".btn"); var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m"]; var arrlength=arr.length; var str=""; output(); obtn.onclick=function(){ var numb=oinput.value.toLocaleUpperCase(); var result=ospan.innerHTML.toLocaleUpperCase(); if(numb==""){ alert("别闹了快输入！") }else if(result!=numb){ alert("错了，再见！") }else if(result=numb){ alert("输入对了你真棒！") } } function output(){ for(var i=0;i<6;i++){ var num=Math.floor(Math.random()*arrlength); str+=arr[num]; } ospan.innerHTML=str; } </script></body></html>三、关于函数
1.函数的作用域
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>函数的作用域</title> <style type="text/css"> ul li{ width:200px; height:40px; line-height: 40px; text-align: center; background: red; margin-bottom: 20px; list-style: none; } </style></head><body> <ul> <li>是苹果呀</li> <li>是桃子呀</li> <li>是梨呀</li> <li>是我呀</li> </ul> <script type="text/javascript">/* var oli=document.querySelectorAll("ul li"); for(var i=0;i<oli.length;i++){ oli[i].onclick=function(){ alert(i); } }*/ //无论点击任何一向都提示4//将i值交给我们自定义的一个元素属性身上，因为i这个变量在下面的事件函数中无法访问到，所以每次点击的时候，// i这个变量已经循环到了oli.length这个值，所以我们需要用一个自定义属性来保存循环中i的值以便下面使用 var oli=document.querySelectorAll("ul li"); for(var i=0;i<oli.length;i++){ oli[i].number=oli[i].innerHTML; oli[i].onclick=function(){ alert(this.number); } } </script></body></html>2.单个选项卡
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> .wrapper{ width:500px; height: 300px; background: #ccc; margin: 20px auto; padding-top:20px; } ul{ width:460px; height: 30px; background: red; margin-bottom: 20px; } ul li{ float:left; width:100px; height: 30px; line-height: 30px; list-style:none; margin-right: 10px; text-align: center; cursor: pointer; } .demo{ width:300px; height:200px; line-height: 200px; border:1px solid orange; clear: both; margin:0 auto; text-align: center; display: none; } .active{ background: green; color: white; } .paly{ display: block; } </style></head><body> <div class="wrapper"> <ul> <li>box1</li> <li>box2</li> <li>box3</li> <li>box4</li> </ul> <div class="demo paly">table1</div> <div class="demo">table2</div> <div class="demo">table3</div> <div class="demo">table4</div> </div> <script type="text/javascript"> var oli=document.querySelectorAll("ul li"); var odiv=document.querySelectorAll(".demo"); for(var i=0;i<oli.length;i++){ oli[i].shuxing=i; oli[i].onclick=function(){ for(var i=0;i<oli.length;i++){ oli[i].className=""; odiv[i].style.display="none"; } this.className="active"; odiv[this.shuxing].style.display="block"; } } </script></body></html>3.多个选项卡
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> #box1,#box2,#box3{ width:500px; height: 300px; background: #ccc; margin: 20px auto; padding-top:20px; } ul{ width:460px; height: 30px; background: red; margin-bottom: 20px; } ul li{ float:left; width:100px; height: 30px; line-height: 30px; list-style:none; margin-right: 10px; text-align: center; cursor: pointer; } .demo{ width:300px; height:200px; line-height: 200px; border:1px solid orange; clear: both; margin:0 auto; text-align: center; display: none; } .active{ background: green; color: white; } .paly{ display: block; } </style></head><body><div id="box1"> <ul> <li>box1</li> <li>box2</li> <li>box3</li> <li>box4</li> </ul> <div class="demo paly">table1</div> <div class="demo">table2</div> <div class="demo">table3</div> <div class="demo">table4</div></div><div id="box2"> <ul> <li>box1</li> <li>box2</li> <li>box3</li> <li>box4</li> </ul> <div class="demo paly">table1</div> <div class="demo">table2</div> <div class="demo">table3</div> <div class="demo">table4</div></div><div id="box3"> <ul> <li>box1</li> <li>box2</li> <li>box3</li> <li>box4</li> </ul> <div class="demo paly">table1</div> <div class="demo">table2</div> <div class="demo">table3</div> <div class="demo">table4</div></div><script type="text/javascript"> function pattern(id,event){ var ol=document.getElementById(id); var oli=ol.getElementsByTagName("li"); var odiv=ol.getElementsByTagName("div") console.log(odiv.length) for(var i=0;i<oli.length;i++){ (function(index){ oli[index].addEventListener(event,function(){ for(var i=0;i<oli.length;i++){ oli[i].className=""; odiv[i].style.display="none"; } this.className="active"; odiv[index].style.display="block"; }); })(i) } } pattern("box1","click"); pattern("box2","click"); pattern("box3","click")</script></body></html>4.基础知识
1.js数据类型
包括：String、 Number、Boolean、Array、Object、Null、Undefined、NaN
2.强制转换类型
var dDate=new Date();String(null); //nullString(undefined); //undefinedString(1)+1; //11;String(dDate); //当前日期String([1,2,3]); //1,2,3String(true); //trueNumber('1xyz'); //NaNNumber('123'); //123Number(true); //1Number(dDate); //一堆数字Number([1,2,3]); //NaNBoolean('1'); //trueBoolean(1); //trueBoolean(dDate); //trueBoolean([1,2,3]); //trueBoolean(''); //falseBoolean(' '); //trueBoolean(undefined); //falseBoolean(null); //falseBoolean(NaN); //falseBoolean(-1); //trueBoolean(0); //false总结：除了'',"",0,NaN,null,undefined转化成布尔值为false以外，其余值都转化为true阅读全文
0 0
- js总结（二）
- JS总结（二）正则表达式
- React.js语法学习总结（二）
- JS学习总结（二）- Dom编程
- js期末总结二
- js 总结二
- 【WEB】JS面试题涉及基础知识总结（二）
- 借百度前端学院JS任务二总结JS数组（一）
- JS基础思维导图总结二
- Vue.js 学习要点总结(二)
- js入门（二）
- JS （二）
- js 基础（二）
- js高级（二）
- JS对象（二）
- js加强（二）
- js初步 （二）
- JS学习---（二）
- 把json格式数据写入到本地文件
- 简书用户名爬取
- git常用命令行
- 谦虚负责
- 同步锁 Lock
- js总结（二）
- Ian Goodfellow，Yoshua Bengio合著《深度学习》教材，2017年最新中文版下载
- iOS指纹解锁Swift
- 数据结构与算法系列 目录
- zepto框架的体验
- Mac使用Shell处理图片
- 基于 maven 的 ssm 项目搭建六：整合 druid 和 mybatis
- Inno Setup 获取当前语言的名称，安装完成后，依据名称进行文件拷贝
- CMake 笔记二
