JS应用案例：时钟，国庆倒计时

时钟案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 400px;height: 100px;background-color: #ccc;border: 1px solid #f00;margin: 130px auto;text-align: center;line-height: 100px;font-size: 24px;}</style></head><body><div></div></body><script>function dateTime() {//获取当前系统时间，并且拼接成“xxxx年xx月xx日 xx:xx:xx”的形式var date = new Date();console.log(date);//获取时分秒，如果时分秒是一位数字，给它拼接成两位数字var hour = date.getHours();if(hour<10){hour = '0'+hour;}var minutes = date.getMinutes();if(minutes<10){minutes ='0'+minutes;}var seconds =date.getSeconds();if(seconds<10){seconds = '0'+seconds;   }var timeStr = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + hour +":" + minutes + ":" + seconds;//获取div元素，并将timeStr存储到div元素中var divEle = document.querySelector('div');divEle.innerHTML = timeStr;}//注意：setInterval(要调用的函数,间隔的毫秒是)里第一个参数如果不是直接定义的函数，而是调用其它的函数，只需要写函数名称，不要带()dateTime();setInterval(dateTime, 1000);</script></html>

国庆倒计时案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 600px;height: 200px;border: 1px solid black;margin: 150px auto;text-align: center;line-height: 200px;font-size: 24px;background-image: url(img/guoqin.jpg);}</style></head><body><div> </div></body><script>function datetime(){var dateFur = new Date('2022','9','1');var fs = dateFur.getTime();console.log(dateFur);console.log(fs);var dateNow = new Date();var ns = dateNow.getTime();console.log(dateNow);console.log(ns);var time = fs - ns;console.log(time);days = parseInt(time/(24*60*60*1000)); if(days<10){days = '0'+days;}hours = parseInt((time%(24*60*60*1000))/(60*60*1000));// console.log(hours);if(hours<10){hours = '0'+hours;}minutes = parseInt(((time%(24*60*60*1000))%(60*60*1000))/(60*1000));// console.log(minutes);if(minutes<10){minutes = '0'+minutes;}seconds = parseInt((((time%(24*60*60*1000))%(60*60*1000))%(60*1000))/1000);// console.log(seconds);if(seconds<10){seconds = '0'+seconds;}var timestr = "十一倒计时："+days+"天"+hours+"时"+minutes+"分"+seconds+"秒";// console.log(timestr);var divEle = document.querySelector('div');divEle.innerHTML = timestr;}datetime();setInterval(datetime,1000);</script>
</html>

JS应用案例：时钟，国庆倒计时相关推荐

JavaScript 国庆倒计时小案例
本次实现js国庆倒计时小案例开发工具与关键技术:Visual Studio 2015 JavaScript 当然首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...
利用JS实现短信验证码倒计时案例
本章教程利用JS实现发送短信倒计时案例,这个需求在实际开发过程很常见. 目录一.程序代码二.预览展示一.程序代码 <!DOCTYPE html> <html lang=&quo ...
html倒计时timer,js如何使用定时器实现倒计时功能
这次给大家带来js如何使用定时器实现倒计时功能,js使用定时器实现倒计时功能的注意事项有哪些,下面就是实战案例,一起来看一下. 日期函数倒计时 = 用将来的时间 - 现在的时间问题:将来时间距 ...
深入理解定时器系列第三篇——定时器应用(时钟、倒计时、秒表和闹钟)
前面的话本文属于定时器的应用部分,分别用于实现与时间相关的四个应用,包括时钟.倒计时.秒表和闹钟.与时间相关需要用到时间和日期对象Date,详细情况移步至此时钟最简单的时钟制作办法是通过正则表达 ...
定时器系列—定时器应用(时钟、倒计时、秒表和闹钟)
前面的话本文属于定时器的应用部分,分别用于实现与时间相关的四个应用,包括时钟.倒计时.秒表和闹钟.与时间相关需要用到时间和日期对象Date,详细情况移步至此时钟最简单的时钟制作办法是通过正则表达 ...
JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...
JS新手案例---登录注册
登录注册案例又见面了!今天我们继续学习一起JS相关的小案例,登录注册案例.这个案例在日常生活中我们经常碰到,学完之后自己都能建一个漂亮的登录界面.首先先来看一下效果图(具体的图片和样式可以自己更改) ...
html酷炫电子时钟效果,纯js实现电子时钟特效
这是一款使用纯js实现电子时钟特效.该电子时钟可以显示时间,星期几,以及是上午还是下午.它使用简单,非常容易集成到项目中. 使用方法在页面中引入电子时钟的样式文件main.css. HTML结构该 ...
JS匀速运动案例01
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

JS应用案例：时钟，国庆倒计时

JS应用案例：时钟，国庆倒计时相关推荐

最新文章

热门文章