Correction status:Uncorrected
Teacher's comments:
使用parse() 方法获取目标时间到时间戳的毫秒数 new Date(); 获取当前时间 .getTime获取当前时间到时间戳的毫秒数,然后相减再使用取余的方法转换成天,小时,分钟等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript"src="jquery-3.3.1.min.js"> </script> <style type="text/css"> *{ margin: 0; padding: 0; } div{ font-size: 36px; width: 1200px; height: 180px; margin: 100px auto; background: #82d743; line-height: 180px; text-align: center; color: #fff; } </style> <title>倒计时</title> </head> <body> <div> <p>距离春节倒计时 <span></span> </p> </div> <script type="text/javascript"> $(document).ready(function(){ function RO(){ //parse() 方法可解析一个日期时间字符串,并返回1970/1/1午夜距离该日期时间的毫秒数;时间戳 //返回目标日期与时间戳之间的毫秒数 var d=Date.parse("2020/01/24"); var date= new Date(); //返回当前时间到时间戳的毫秒 var dd=date.getTime(); //取秒 var rd=Math.floor((d-dd)/1000); var days=Math.floor(rd/86400); var hours=Math.floor(rd%86400/3600); var minus=Math.floor(rd%3600/60); var secos=Math.floor(rd%60); $('span').text(days+'天'+hours+'小时'+minus+'分'+secos+'秒'); } setInterval(RO,1); }) </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结:
1:学习了jquery的两种引入方法
2:if(typeof $=='undefined')来测试jq有没有引入成功
3:入口就绪函数: $(document).ready(function(){}) 或 $(function(){})
4:选择器: 元素选择器$('body') id选择器$('#box') class选择器$('.box') 匹配多个选择器$('#box,.box') 类型选择器$('li.list')
属性选择器$('[href]') $("a[target='_blank']") 层级选择器 $('父级元素>子级元素') $('祖先元素 后代元素') 比较选择器 大于$(':gt(x)') 小于$(':lt(x)') 等于$(':eq(x)')
5:事件的使用 例:$('button').click(function() 点击事件
6:实例: 倒计时
parse() 返回指定日期到时间戳的毫秒数 具体的取时间的实现,就是逻辑算数问题了 也是固定不变的.
Date.parse("Apr 05,2019") 也可以Date.parse("2019/4/5") 或2019/04/05
这节课程不难 在琢磨文本框输入时间 然后页面显示倒计时 要是琢磨出来了 我会更新代码的
感谢老师