使用html+css+js实现倒计时,开启你痛苦的倒计时吧
使用html+css+js实现倒计时,开启你痛苦的倒计时吧
效果图:
这是我痛苦的倒计时,呜呜呜
好啦,再痛苦还是要分享代码,代码如下,复制即可使用:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
#time {
width: 350px;
height: 200px;
margin: 100px auto;
} #time input {
margin: 20px auto;
text-align: center;
border-radius: 10px;
} input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
} button {
margin: 0 0 0 35px;
border-radius: 10px;
} #start {
font-size: 1.55em;
}
</style>
<script>
function $(el) {
if(typeof(el) == 'string') {
return(document.getElementById(el));
}
return(el);
} function fillZero(num, digit) {
var str = '' + num;
if(str.length < digit) {
str = '0' + str;
}
return str;
}
window.onload = function() {
var oDiv1 = $('time');
var aInput = oDiv1.getElementsByTagName('input');
var oYear = aInput[0]; //年
var oMonth = aInput[1]; //月
var oDay = aInput[2] //日
var oDiv2 = $('start');
var aSpan = oDiv2.getElementsByTagName('span');
var sTxtDay = aSpan[0]; //天
var sTxtHour = aSpan[1] //小时
var sTxtMin = aSpan[2] //分
var sTxtSec = aSpan[3] //秒
var oTxtTarget = document.getElementsByTagName('b')[0];
var timer = null;
$('btn1').onclick = function() {
timer = setInterval(updateTime, 1000);
updateTime();
}
$('btn2').onclick = function() {
clearInterval(timer);
} function updateTime() { var sYear = Math.abs(oYear.value);
var sMonth = Math.abs(oMonth.value);
var sDay = Math.abs(oDay.value);
if(sMonth > 12 || sDay > 31){
clearInterval(timer);
alert('你又调皮了');
return;
}
oTxtTarget.innerHTML = sYear + ' 年 ' + sMonth + ' 月 ' + sDay + ' 日 ';
var oEndDate = new Date(sYear, (sMonth - 1), sDay);
var oNowDate = new Date();
var iRemain = 0;
iRemain = parseInt((oEndDate.getTime() - oNowDate.getTime()) / 1000);
if(iRemain <= 0) { //判断开始时间是否小于或等于今天
clearInterval(timer);
iRemain = 0;
alert('请输入大于今天的时间');
}
var iDay = parseInt(iRemain / 86400); //剩余天数 iRemain %= 86400;
var iHour = parseInt(iRemain / 3600); //剩余小时 iRemain %= 3600;
var iMin = parseInt(iRemain / 60); //剩余分钟 iRemain %= 60;
var iSec = iRemain; //剩余秒 sTxtDay.innerHTML = fillZero(iDay, 2);
sTxtHour.innerHTML = fillZero(iHour, 2);
sTxtMin.innerHTML = fillZero(iMin, 2);
sTxtSec.innerHTML = fillZero(iSec, 2);
} }
</script>
</head> <body>
<div id="time">
年: <input type="number" min="2017" max="2017" value="2017" />
月: <input type="number" min="1" max="12" value="1" />
日: <input type="number" min="1" max="31" value="27" />
<p><button id="btn1">开始倒计时</button><button id="btn2">停止倒计时</button></p>
<p>现在距离:<b>2017 年 1 月 27 日</b> 还剩 </p>
<div id="start">
<span>00</span>天
<span>00</span>小时
<span>00</span>分
<span>00</span>秒
</div>
</div>
</body> </html>
如果您有更好的方法或更多的功能,可以和大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!
使用html+css+js实现倒计时,开启你痛苦的倒计时吧的更多相关文章
- asp.net mvc项目实记-开启伪静态-Bundle压缩css,js
百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...
- 使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间。
使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间. 效果图: 哎,今天就又这么过去了,过的可真快 . 代码如下,复制即可使用: <!DOCTYPE html> & ...
- 使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 【转】Maven Jetty 插件的问题(css/js等目录死锁)的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS(有需要嫌麻烦的小伙伴拿走不谢)
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
随机推荐
- 解题:BZOJ 3884 上帝与集合的正确用法
题面 好久以前写的,发现自己居然一直没有写题解=.= 扩展欧拉定理:在$b>φ(p)$时有$a^b \equiv a^{b\%φ(p)+φ(p)}(mod$ $p)$ 然后每次递归那个$a^{b ...
- 解题:SCOI 2010 序列操作
题面 线段树......模板题(雾? 然而两种标记会互相影响,必须保证每次只放一个(不然就不知道怎么放了),具体的影响就是: 翻转标记会使得覆盖标记一起翻转,下放的时候就是各种swap 覆盖标记会抹掉 ...
- 【bzoj3881】【Coci2015】Divljak
题解 对$S$集合ac建自动机,把$T_{i}$放在里面跑,记录路径上的所有节点并对它们在fail树上求到root的树链并: 这样就得到了$T_{i}$所有的子串: 动态将$T_{i}$加入直接用树状 ...
- 什么是Docker并且它为什么这么受欢迎
什么是Docker (why it's so hot than hot) Docker是一个使用容器来方便快捷的创建,部署,运行程序的工具,容器允许开发人员将应用程序的一切打包(镜像),例如库和其他的 ...
- 深入了解volatile
volatile关键字经常在并发编程中使用,其特性是保证可见性以及有序性,但是关于volatile的使用仍然要小心,这需要明白volatile关键字的特性及实现的原理,这也是本篇文章的主要内容 一.J ...
- 执行composer install 报错的解决办法
执行composer install后报以下错误: Loading composer repositories with package informationInstalling dependenc ...
- bzoj千题计划106:bzoj1014 [JSOI2008]火星人prefix
http://www.lydsy.com/JudgeOnline/problem.php?id=1014 两个后缀的最长公共前缀:二分+hash 带修改带插入:splay维护 #include< ...
- zookeeper系列之:独立模式部署zookeeper服务
一.简述 独立模式是部署zookeeper服务的三种模式中最简单和最基础的模式,只需一台机器即可,独立模式仅适用于学习,开发和生产都不建议使用独立模式.本文介绍以独立模式部署zookeeper服务器的 ...
- EM算法(Expectation Maximization Algorithm)
EM算法(Expectation Maximization Algorithm) 1. 前言 这是本人写的第一篇博客(2013年4月5日发在cnblogs上,现在迁移过来),是学习李航老师的< ...
- 双11怎么那么强!之二:浅析淘宝网络通信库tbnet的实现
最近开始看Tair的源码实现,Tair的通信使用的是淘宝的开源的网络库tbnet实现.具体来说是依靠tbnet::Transport类型实现,其源代码路径如下:http://code.taobao.o ...