javascript实现倒计时-------Day28
先来两张图片,看一看今天写什么:
看到图片右上角是什么了么看到图片以下是什么了么
相信这个大家都不会陌生吧。那些生活中等着秒杀,等着抢小米人们,焦躁等待的你曾一秒一秒的盯着它看么,我不知道答案,可我知道有那么一批人。可能已经在心里開始一秒一秒的開始数了。这一年一度的高考也又要到了。倒计时的时间也是已经越来越小,我不知道哪些在数着考试的时间。哪些在数着毕业的时间。哪些纯粹在数着解脱的时间,呜呼哀哉,各有各路,这道路口现在也就那么着吧。
言归正传,今天来写一下倒计时,到如今来看确然是简单的非常了,可是我们还是来按步骤分析下:
实现效果:
时间按“秒”减小,实现动态减小效果。这个就不多说了
实现原理:
首先我们能够要确定倒计时的时长,即最大值,然后将最大值用天、时、分或者秒进行描写叙述。动态的每秒钟递减倒计时的最大时长,动态的效果表现出来就是随时显示当前的最大时长,最后在倒计时结束后,结束循环,停止递减。
这里要用到几个时间转换:1秒(s)=1000毫秒(ms)。至于天、时、分、秒之间的转换不用说了吧
备注:setinterval的定时调用的指定周期为毫秒(ms)
代码实现:
话不多说了,上代码:
window.onload=function showDate(){
var needTime=60;
var dateTime=function(){
var hour=Math.floor(needTime/(3600*60));
var minute=Math.floor((needTime/60)%60);//分的转换,/60描写叙述被小时整除的剩余部分。%60表示整除后剩下的不能被秒整除的部分为分
var second=Math.floor(needTime%60);//无法被秒整除的就是秒数
hour<0?hour=0:hour=hour;//这个条件运算符爽吧,学了之后就没用过几次,用上去感觉简练了好多
minute<0?minute=0:minute=minute;
second<0?second=0:second=second;
hour.toString().length < 2 ? hstr = "0" + hour.toString() : hstr = hour; //1显示01
minute.toString().length < 2 ? mstr = "0" + minute.toString() : mstr = minute; //1显示01
second.toString().length < 2 ? sstr = "0" + second.toString() : sstr = second; //1显示01
timestr = hstr + ":" + mstr + ":" + sstr;
needTime=needTime-1;//needTime--也能够;
if(needTime==0){
clearInterval(dateTime);
}
document.getElementById("ce").innerHTML=timestr; };
window.setInterval(dateTime, 1000);//调用方法啊,一定定义了,就直接调用定的名称即可了。不用加()
};
</script>
html部分就更简单了,写一个div属性id=”ce“就能够了,当然假设要是想要样式的话就单独写嘛,事实上就是一个定时器的应用。还记得刚接触这行业。当时做一个图书站点。想要弄一个倒计时拍卖,找了些资料,看了好久没看懂。还感觉太麻烦了,结果...这样来看的话是不是秒表也就不在话下了呢,同样原理嘛,一个降低,一个添加.
仅仅要不停下脚步,我们就在不停进步吧。好吧,我仅仅能这么安慰自己...
版权声明:本文博客原创文章,博客,未经同意,不得转载。
javascript实现倒计时-------Day28的更多相关文章
- javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
- 用Javascript 实现倒计时
用Javascript 实现倒计时<!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- javascript 时间倒计时
新加入一个项目的集中开发,遇到一个需要倒计时的需求,经过测试,有以下几种方案,分享出来: 方案一: 页面Html: <span style="font-size:18px;" ...
- javascript实现倒计时
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Javascript实现倒计时和根据某时间开始计算时间
JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7',' ...
- javascript 时间倒计时效果
<div id="divdown1"></div> <script language="javascript" type=&quo ...
- javascript - 活动倒计时(天、时、分、秒)
计数时: 结束时: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- JavaScript写倒计时
在网页中,特别是电商网站中,倒计时的出现频率很高,接下来给大家介绍一下怎么用JavaScript写一个倒计时.代码如下: 首先我们通过Date构造函数的方法创建一个倒计时的结束的时间.并将其转换为毫秒 ...
随机推荐
- web框架python
22.python笔记之web框架 一.web框架本质 1.基于socket,自己处理请求 #!/usr/bin/env python3 #coding:utf8 import socket de ...
- 陈词滥调,正确使用memset
前项目发现一个问题,计划永远是一个dynamic_cast当一个异常动态转换,搜索了半天才发现问题竟然是在memset使用,见.但当处于几十万行代码量级中时,就变得不太那么easy定位了. 本文归纳了 ...
- mysql视图学习总结
转自http://www.cnblogs.com/wangtao_20/archive/2011/02/24/1964276.html 一.使用视图的理由是什么? 1.安全性.一般是这样做的:创建一个 ...
- 【Java&Android开源库代码剖析】のAndroid-Universal-Image-Loader-part1
做Android app开发的同学应该都听说过或者用过nostra13的Android-Universal-Image-Loader开源库,它在图片异步加载.缓存和显示等方面提供了强大灵活的框架.之前 ...
- java泛型 之 入门(interface)
一:泛型简单介绍: (1)所谓泛型,就是变量类型的參数化. 泛型是JDK1.5中一个最重要的特征.通过引入泛型,我们将获得编译时类型的安全和执行时更小的抛出ClassCastException的可能. ...
- [ACM] poj 1258 Agri-Net (最小生成树)
Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37131 Accepted: 14998 Descri ...
- .Net Core配置文件
.Net Core下如何管理配置文件 一.前言 根据该issues来看,System.Configuration在.net core中已经不存在了,那么取而代之的是由Microsoft.Extensi ...
- delphi 发送消息控制滚动条
1.Perform 函数 DBGrid1.Perform(WM_VSCROLL,SB_PAGEDOWN,0); //控制滚动条,向后翻页 DBGrid1.Perform(WM_VSCROLL,SB_ ...
- STL 源代码剖析 算法 stl_numeric.h -- copy
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie copy //唯一对外接口 /*------------------------------ ...
- VC6.0入门使用
软件下载地址 http://pan.baidu.com/s/1qWuqFAO 新建win console 32 project,然后新建header文件.最后新建source cpp文件.如图所看到的