考研倒计时html页面
2024-05-11 03:29:28
废话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title倒计时title><style>input {width: 40px;height: 20px;}#remainTime{background-color: royalblue;margin-top: 30px;font-size: 40px;text-align: center;}#remainTime span {color: deeppink;font-weight: bold;margin-right: 10px;}</style>
</head>
<body><div id="remainTime">考研倒计时：<span id="one"></span>天<span id="two"></span>时<span id="three"></span>分<span id="four"></span>秒</div><img src="./img/1.jpg" width="100%"/>
</body>
<script>(function show() { //1.设置目的时间var oYear = 2022var oMonth = 11var oDay = 24var oHour = 8var oMinute = 30var oSecond = 0var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);// console.log(dateFormat(funtureDate))//2.设置定时器setInterval(function () {//3.获取现在的时间var presentDate = new Date();//4.获取时间戳var funtureTime = funtureDate.getTime();var presenTime = presentDate.getTime();console.log(dateFormat(funtureDate)+"-"+dateFormat(presenTime));//5.获取剩余的时间戳var allTime = funtureTime - presenTime; //6.把毫秒转换为秒var allSecond = parseInt(allTime / 1000);//7.获取剩余多少天var day = size(parseInt(allSecond / 3600 / 24));//8.获取剩余多少小时var hour = size(parseInt(allSecond / 3600 % 24));//9.获取剩余多少分钟var minute = size(parseInt(allSecond / 60 % 60));//10.获取剩余多少秒var second = size(parseInt(allSecond % 60));//11.注入：document.getElementById('one').innerHTML = day;document.getElementById('two').innerHTML = hour;document.getElementById('three').innerHTML = minute;document.getElementById('four').innerHTML = second;}, 1000);//如果数>=10,则在前面补0function size(num) {return num < 10 & num >= 0 ? '0' + num : num;} })()//格式化日期格式 2function dateFormat(data){var date = new Date(data);var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());return YY + MM + DD;}</script>
</html>
成果图片：
加一个3D时间，废话还是不多说，上代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML5 3D 考研倒计时爆炸特效</title><link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /><style>input {width: 40px;height: 20px;}#remainTime{background-color: royalblue;margin-top: 30px;font-size: 40px;text-align: center;}#remainTime span {color: deeppink;font-weight: bold;margin-right: 10px;}</style>
</head><body>
<div style="text-align:center;clear:both;"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script>
</div><div id="remainTime">考研倒计时：<span id="one"></span>天<span id="two"></span>时<span id="three"></span>分<span id="four"></span>秒</div><!-- <img src="./img/1.jpg" width="100%"/> --><canvas id="canvas"></canvas><script src="js/index.js"></script></body>
<script>(function show() { //1.设置目的时间var oYear = 2022var oMonth = 11var oDay = 24var oHour = 8var oMinute = 30var oSecond = 0var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);// console.log(dateFormat(funtureDate))//2.设置定时器setInterval(function () {//3.获取现在的时间var presentDate = new Date();//4.获取时间戳var funtureTime = funtureDate.getTime();var presenTime = presentDate.getTime();console.log(dateFormat(funtureDate)+"-"+dateFormat(presenTime));//5.获取剩余的时间戳var allTime = funtureTime - presenTime; //6.把毫秒转换为秒var allSecond = parseInt(allTime / 1000);//7.获取剩余多少天var day = size(parseInt(allSecond / 3600 / 24));//8.获取剩余多少小时var hour = size(parseInt(allSecond / 3600 % 24));//9.获取剩余多少分钟var minute = size(parseInt(allSecond / 60 % 60));//10.获取剩余多少秒var second = size(parseInt(allSecond % 60));//11.注入：document.getElementById('one').innerHTML = day;document.getElementById('two').innerHTML = hour;document.getElementById('three').innerHTML = minute;document.getElementById('four').innerHTML = second;}, 1000);//如果数>=10,则在前面补0function size(num) {return num < 10 & num >= 0 ? '0' + num : num;} })()//格式化日期格式 2function dateFormat(data){var date = new Date(data);var YY = date.getFullYear() + '-';var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());return YY + MM + DD;}</script></html>
考研倒计时html页面相关推荐
- 用html+css+j写一个简洁的考研倒计时的页面
1.直接上源码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- python也可以成为贴心小管家--每日播报考研倒计时、天气情况、还有“营养鸡汤”
文章目录 一.前言 二.需要导入的库 三.分析 1.考研倒计时 2.天气情况 3.营养鸡汤 四.完整代码 五.Blogger's speech 一.前言 对于考研,你还在每天数着还有多少天吗?对于天气 ...
- 考研倒计时小系统(前后端交互)
首先展示一下效果 这个系统虽小 ,可是我个人觉得 , 几乎把最主要的技术都用到了 ,麻雀虽小,却五脏俱全 ! 1.整体实现思路 首先写一个页面,用于输入将要考研的日期 ,然后点击确定,触发一个点击事件 ...
- 倒计时_考研倒计时30天，拼了
阅读本文前,请您先点击上面的蓝色字体,再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转自网络,如有侵权,请联系删除谢谢. 距离 ...
- html倒计时还有多少天,2022考研倒计时还有多少天
据测算,2022年研究生入学考试第一次考试时间为2021年12月24日.25日(具体时间以教育局公告为准).目前距离2022年考研倒计时还有227天左右. 2022年研究生入学考试报名时间及考试时间 ...
- JavaScript编辑考研倒计时
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
- verilog60秒倒计时代码_滴滴，考研倒计时30天，考研人冲冲冲！_政务_澎湃新闻...
距离考研还有整整一个月,考研从不是一人的孤军奋战,背后总会有人为你加油鼓劲.在广西科师,有和蔼可亲的老师.奋斗拼搏的同学,还有诸多默默奉献的人.希望你们在这冲刺的阶段,充满力量,坚持到底.在这最后一场 ...
- [考研]考研倒计时第4天
今天是考研倒计时的第四天,今天的任务很简单: 复习政治和专业的基本概念. 转载于:https://www.cnblogs.com/Buffett/archive/2007/01/16/621292.h ...
- [考研]考研倒计时13天
今天是考研倒计时第13天.今天的任务就是用三天的时间完成政治的一轮复习,同时完成2000~2002三年的政治题的练习. 转载于:https://www.cnblogs.com/Buffett/arch ...
最新文章
- 编译httpd-2.4.46的RPM包
- 2018-3-22论文一种新型的智能算法--狼群算法（笔记三）算法的步骤+收敛性分析
- oracle 回收碎片,Oracle10g中表的碎片空间回收
- 系统调优，你所不知道的TIME_WAIT和CLOSE_WAIT
- pelee yuface 手势模型
- python 错误类型
- 匿名类 java final_java提高篇(十)-----详解匿名内部类 ,形参为什么要用final
- Windows Moblie 笔迹图板开发
- 注册规划师 计算机科学与技术,关于公布2018年度注册城乡规划师考试合格人员名单的通知...
- OpenGL第三方库：glad初始了解与下载
- 傲梅分区助手 linux,无损分区数据，调整分区大小软件：傲梅分区助手
- Vue如何使用video标签实现视频播放
- map和multimap的用法详解
- python-基于yagmail库开发自动邮件发送程序
- Python数据分析和django建站一般使用工具
- 送分题 - hzw模拟赛Test10
- 计算机显示器桌面变小,电脑显示器显示变小怎么办
- qt获取网卡流量_智能手机变成台式电脑的无线网卡来使用并连接WIFI上网的方法...
- C# 拼音转换-工具类
- 专业mac绘图软件：FireAlpaca for Mac(2.5.8中文）
热门文章
- [CAD]win10系统安装CAD时一直解压怎么办（安装漫长怎么办）（正在解压AutoCAD_20xx_Simplified_Chinese_Win_64bit_dim）
- 为什么截图粘贴到WORD里看不见呢
- allegro问题总结记录
- php http 字符串异常,php - 查询字符串http:// 变成http % 3A % 2F % 2 - 编程异常大全
- linux服务器jpegoptim和optipng批量无损压缩图片
- ignite 2.11.0 节点发现原理及源码分析
- linux 上u盘打不开,U盘打不开的解决办法(图文)
- 【视频】运行第一个容器 - 每天5分钟玩转容器技术（5）
- Unity5 全局光照
- mysql 2005开发版_Microsoft SQL Server 2005简体中文开发版下载