作业总结:创建一个函数,在函数体内新建一个变量endTime,并赋值new一个Date('2019,5,1)'的对象,(个人认为这样比课堂代码写的更容易阅读和记忆),然后再新建一个变量命名为data 并赋值 new Data(),以获取当前时间。 新建一个变量rd取值(endTime-data)/1000,为的是删除毫秒数并取整。
新建变量D以获取剩余天数 赋值用rd除以86400的整数 (60秒*60分*24小时=86400 其实就是一天的秒数)
新建变量H以获取剩余小时 赋值用rd取整86400除以3600
新建变量M以获取剩余分钟 赋值用rd取整3600除以60
新建变量S以获取剩余秒 赋值用rd取整360
获取span标签,在标签内部使用.text函数写入所获取到的值
$('span').text(D+'天'+H+'小时'+M+'分钟'+S+'秒')
函数体外部执行函数,然后使用定时函数每个1000毫秒运行一次函数即可
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>time</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 14px; } .box{ width: 1200px; height: 300px; line-height: 300px; background: #ff6700; margin: 30px auto; text-align: center; } p,span{ font-size: 50px; color:#fff; } </style> </head> <body> <div class="box"> <p>距离劳动节还剩<span></span></p> </div> <script type="text/javascript"> $(function(){ function Time1(){ // 获取剩余时间,我觉得这样比课堂的代码更简单 var endTime = new Date('2019,5,1') ; // var endTime = Date.parse('2019,4,5') ; var data = new Date(); // var time_2 = time_1.getYear(); // 获取一下剩余的时间,去除毫秒 var rd = Math.floor((endTime-data)/1000); console.log(rd); // 获得天数 var D = Math.floor(rd/86400); console.log(D); // 取余获得剩余小时数 var H = Math.floor(rd%86400/3600); console.log(H); // 取余获得剩余分钟数 var M = Math.floor(rd%3600/60); console.log(M); // 取余获得剩余秒 var S = Math.floor(rd%60); console.log(S); $('span').text(D+'天'+H+'小时'+M+'分钟'+S+'秒') } Time1(); setInterval(Time1,1000); }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例