1.日期对象设置
<script> //获取 get //设置 set //补充两个获取的方法 var times=new Date(); //获取毫秒数 var mill=times.getMilliseconds();//1000毫秒等于一秒 //获取时间戳 var times1=times.getTime(); console.log(mill); console.log(times1); //1970.1.1 0:0:0到现在的秒数就是时间戳 //设置日期 var times=new Date(); times.setFullYear();//修改年份信息 times.setMonth();//修改月份信息 times.setDate();//修改天数 times.setHours();//修改小时信息 times.setMinutes();//修改分钟 times.setSeconds();//修改秒 times.setMilliseconds();//修改毫秒 </script>
2.封装函数求两个时间的时间差
<script> //封装函数求两个时间的时间差 //'2022-10-24 10:20:30' //'2021-10-24 10:20:30' function get_diff_time(t1,t2){ //得到两个日期的时间戳 var res=Math.abs(t1.getTime()-t2.getTime()) console.log(res) //想办法把res换成秒,得到的res是毫秒 /1000 var data=Math.ceil(res/1000); var day=parseInt(data/(60*60*24)) var hour=parseInt(data%(60*60*24)/(60*60)); var minute=parseInt(data%(60*60)/60) var second=parseInt(data%60) console.log(`${day}天${hour}小时${minute}分钟${second}秒`) } var t1=new Date('2022-10-24 10:20:30'); var t2=new Date('2021-10-24 10:20:30'); get_diff_time(t1,t2) </script>
3.定时和间歇调用
<script> //实现倒计时的效果 function get_diff_time(t1,t2){ //得到两个日期的时间戳 var res=Math.abs(t1.getTime()-t2.getTime()) console.log(res) //想办法把res换成秒,得到的res是毫秒 /1000 var data=Math.ceil(res/1000);//秒 var day=parseInt(data/(60*60*24)) var hour=parseInt(data%(60*60*24)/(60*60)); var minute=parseInt(data%(60*60)/60) var second=parseInt(data%60) return `${day}天${hour}小时${minute}分钟${second}秒` } // var t1=new Date('2022/10/24 10:24:25') // var t2=new Date(); // document.getElementById('clock').innerHTML // setTimeout(function(){ // console.log('hello') // },1000) //第一个参数是个函数,第二个参数是时间,毫秒为单位 //过这个时间后再执行这个函数 一秒后打印hello // setInterval(function(){ // console.log('hello') // },5000)//每隔五秒打印一次,一直打印 var t1=new Date('2022/10/24 10:24:25') var t2=new Date(); setInterval(function(){ var t2=new Date(); var str=get_diff_time(t1,t2); document.getElementById('clock').innerHTML=str; },1000) </script>
4.清除定时器
<script> var i=setTimeout(function(){ console.log('hello') },1000); clearTimeout(i) </script>
5.走马灯
<div id="qf">千锋教育大前端中榜发布web3.0</div> <script> function test1(){ var titles=document.getElementById('qf').innerHTML; var arr=titles.split('') var first=arr.shift(); arr.push(first); titles=arr.join('') document.getElementById('qf').innerHTML=titles; } var i; </script> <button οnclick="test1();setInterval(test1,500)">开始</button>
7.代码的异步
8.bom
9.浏览器可视窗口的尺寸
console.log('宽度',window.innerWidth)
console.log('高度',window.innerHeight)
10.浏览器的弹出层
<script> //警告框window.alert('提示文本') 提示文本+按钮 alert()没有任何返回值 // 询问框window.confirm('提示文本') 提示文本 确定取消 有返回值 如果用户点确定返回true,取消false // 输入框window.prompt('提示文本') 提示文本+输入框 有返回值,一定是字符串类型,如果取消返回值就是null var test=confirm('请确认是否要删除') if(test){ console.log('你点击了确定') }else{ console.log('你点击了取消'); } //他们三个的共同点都是阻断程序的进行 //用户操作完成以后才执行后面的密码 console.log(6666) function del_arr(){ var arr=[1,2,3,4] if(confirm('你确定要删除吗')){ console.log(arr.pop()) }else{ console.log(arr) } } </script> <button οnclick="del_arr">删除</button>
11.浏览器的常见事件
// 事件:on+事件名字事件触发以后一定跟着一个动作 load
当页面html css 图片等全部加载完以后在 再执行时间的动作
window.οnlοad=function(){}
12.浏览器的其他事件
<script> //resize //当页面的尺寸发生改变,然后触发这个事件 //window.οnresize=function(){} window.οnresize=function(){ console.log(window.innerWidth,window.innerHeight); } //scroll //当页面滚动的时候触发这个事件 window.οnscrοll=function(){ console.log() } </script>
13.浏览器地址栏
<script> //跳转 //href 属性 // window.location.href 可以读也可以写 读 // window.location.href="一个新的页面" 写 // console.log(window.location.href); //获取你当前页面url的地址 // window.location.href="http://www.qfedu.com"; //刷新页面 // window.location.reload() //重新加载页面的所有内容 //注意这一行代码不要放在打开页面就能执行的位置,重复的刷新是对资源的浪费 </script> <!-- <button οnclick="window.location.reload()">刷新页面</button> -->
14.浏览器的打开和关闭
<body> <script> // open('地址') // 打开一个窗口请求新的地址 // 地址一定要加上协议 http:// // 或者 https:// // close() // 关闭当前窗口 </script> <button οnclick="window.open('http:\/\/www.baidu.com')">打开</button> <button οnclick="window.close()">关闭</button> </body>
走马灯
<div id="qf">千锋教育大前端中榜发布web3.0</div> <script> function test1(){ var titles=document.getElementById('qf').innerHTML; var arr=titles.split('') var first=arr.shift(); arr.push(first); titles=arr.join('') document.getElementById('qf').innerHTML=titles; } var i; </script> <button οnclick="test1();setInterval(test1,500)">开始</button>
闪烁星空
<style> body { background-color: black; } </style> <script type="text/javascript"> var k=1; function xing(){ var x=Math.floor(Math.random()*1024); var y=Math.floor(Math.random()*768); document.getElementById("star1").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>"; x=Math.floor(Math.random()*1024); y=Math.floor(Math.random()*768); document.getElementById("star2").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>"; x=Math.floor(Math.random()*1024); y=Math.floor(Math.random()*768); document.getElementById("star3").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>"; x=Math.floor(Math.random()*1024); y=Math.floor(Math.random()*768); document.getElementById("star4").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>"; x=Math.floor(Math.random()*1024); y=Math.floor(Math.random()*768); document.getElementById("star5").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>"; k=k+1; // setTimeout("xing()",500); } </script> </head> <!-- <body οnlοad="xing()"> --> <body οnlοad="setInterval(xing,500)"> <div id="star1"></div> <div id="star2"></div> <div id="star3"></div> <div id="star4"></div> <div id="star5"></div> </body>
摇骰子
<body> <img src="./sai1.png" width=100 height=100 alt="1" id="one"> <img src="./sai2.png" width=100 height=100 alt="1" id="two"> <img src="./sai3.png" width=100 height=100 alt="1" id="three"> <!-- 必须不断的修改src的路径 --> <!-- sai.png固定 1 2 3 4 5 6 --> <!-- 随机值 --> <!-- 三个骰子 需要生成三个随机值 1~6 --> <!-- 间歇定时器 实现没隔多长时间执行依次 --> <button οnclick="zhuan()">开始</button> <button οnclick="stop()">停止</button> <!-- 连续点击会同时执行多个定时器 多个定时器之间时间间隔小 感到很快 --> <!-- 无法停止 就是不知道停止哪一个定时器 --> <script> var i = 0; function zhuan(){ i = setInterval("change()",100) } function change(){ var first = Math.floor(Math.random()*6+1); var second = Math.floor(Math.random()*6+1); var third = Math.floor(Math.random()*6+1); document.getElementById('one').src = './sai'+first+'.png'; document.getElementById('two').src = './sai'+second+'.png'; document.getElementById('three').src = './sai'+third+'.png'; } // change() function stop(){ clearInterval(i); } </script> </body>
扫一扫
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
