看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时。全当学习JS。
主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时),中间涉及到一些简单的数学运算和取整。
注:getDay()获取到星期的时候是0~6,0为星期天。所以声明一个数组来转换成大写的星期。在数组[getDay()]就得到星期格式。
HTML内容:
<span>显示当前时间:</span>
<span id="show" style="color: red"></span>
<div id='timeshow' style="color: red"></div>
<div id='timeleft' style="color:red;"></div>
JS内容:
showTime();
function showTime(){
var myData=new Date(); //获取当前时间
var endTime=new Date('2050/10/22,12:20:12') //设定倒计时结束时间
var lefttime=(endTime.getTime()-myData.getTime())/(24*60*60*1000); //结束时间-当前时间=剩下时间(毫秒数)把得到的数字转化成毫秒数(得到差的毫秒数/一天的毫秒数=天数)
//一天=24小时 1小时=60分钟 1分钟=60秒 1秒=1000毫秒
lefttime=Math.ceil(lefttime) //对得到的毫秒数进行四舍五入
 
var leftHMS=parseInt((endTime.getTime()-myData.getTime())/1000); //得到剩余的毫秒数
var ds=parseInt(leftHMS/(24*60*60)); //换算成天
var xs=parseInt(leftHMS/(60*60)%24); //得到小时 取模24小时
var fz=parseInt(leftHMS/60%60); //得到分钟
var mz=parseInt(leftHMS%60); //得到秒数
 
 
var year=myData.getFullYear(); //获取年
var month=myData.getMonth()+1; //获取月 必须+1
var data=myData.getDate(); //获取日
var h=myData.getHours();
var m=myData.getMinutes();
var s=myData.getSeconds();
m=checkTime(m);
s=checkTime(s);
function checkTime(i){
if(i<10){
return '0'+i;
}else{
return i;
}
};
//分钟和秒数都是一位数,所以需要用0补位
var d=myData.getDay(); //获取星期(因星期打印出事0~6,所以用数组形式转化成对应的星期)
var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
document.getElementById("show").innerHTML=year+'年'+month+'月'+data+'日'+'&nbsp;'+weekday[myData.getDay()]+'&nbsp;'+
h+':'+m+':'+s;
//打印出年月日
document.getElementById("timeshow").innerHTML='离高考还有:'+lefttime+'天';
//打印出倒计时天数
document.getElementById('timeleft').innerHTML='离世界末日还有:'+ds+'天'+xs+'小时'+fz+'分钟'+mz+'秒';
}
setInterval(function(){
showTime();
},500)
//定时调用showTime函数

一个简单的JS倒计时的更多相关文章

  1. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一个简单的js面试题

    在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求 给一个数组的最后 ...

  3. 一个简单的 js 时间对象创建

    JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date();          //创建一个时间对象 myDate.g ...

  4. Chart.js: 一个简单的 JS Chart Library

    Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供 ...

  5. 一个简单的JS日期挂历脚本

    分享一个JS脚本做的日期挂历,在需要的时候可以引入你的程序. 如需单独引入这个脚本,请将它保存在一个文件中然后引入它:如这样 <script type="text/javascript ...

  6. isMobile 一个简单的JS库,用来检测移动设备

    点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of t ...

  7. 一个简单的js队列,逻辑很清晰

    function Queue(type) { //type 是否是一个接着一个执行 function QueueConst() {} QueueConst.execute_ing=[], QueueC ...

  8. 一个简单的js时钟

    演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...

  9. 一个简单的js计数器(web储存)。

    <span id="countspan"></span> <a href="#" onclick="countNumbe ...

随机推荐

  1. 开源项目 RethinkDB 关闭,创始人总结失败教训(市场定位错误)

    当我们宣布RethinkDB关闭时,我答应写一个调查分析.我花了一些时间来整理所得的教训和经验,现在可以清楚地写出来. 在HN讨论贴中,人们提出了许多关于为什么RethinkDB失败的原因,从莫名的人 ...

  2. Js 动态插入css js文件

    function loadjscssfile(filename,filetype){ var file, //动态插入的文件 doc = document; if(filetype == " ...

  3. vc++的学习目的

    vc++支持多种编程方式,从结构化的编程,面向对象编程,泛型编程,com组件编程. 我想学习vc++的原因是它更接近底层.非常的高效,希望之后用它写出非常简洁高效的代码.

  4. 联想笔记本进入不了BIOS的解决方法

    当计算机遇到问题时,很多情况下需要进入BIOS进行解决.但很多新出的联想笔记本电脑在开机时,无论怎么疯狂的按F2,Fn+F2,F12或者Del,都无法进入BIOS,十分气人. 这种现象出现的原因是联想 ...

  5. 敏捷开发中如何做好Sprint规划?

    什么是Sprint规划? Sprint规划是scrum中用来启动Sprint的事件.迭代规划的目标是定义Sprint可以交付的内容,以及如何完成各项工作.迭代规划需要整个scrum团队合作完成. 与体 ...

  6. 30441数据定义语言DDL

    数据定义:指对数据库对象的定义.删除和修改操作. 数据库对象主要包括数据表.视图.索引等. 数据定义功能通过CREATE.ALTER.DROP语句来完成. 按照操作对象分类来介绍数据定义的SQL语法. ...

  7. postman --- 如何在用户登陆和CSRF验证的场景下使用

    一.前提 安装postman和Postman Interceptor postman应用放到桌面: 二.用户登陆 这种场景很简单,只要开启Interceptor,然后先请求登陆地址,再继续请求其他地址 ...

  8. Spark学习之路(九)—— Spark SQL 之 Structured API

    一.创建DataFrame和Dataset 1.1 创建DataFrame Spark中所有功能的入口点是SparkSession,可以使用SparkSession.builder()创建.创建后应用 ...

  9. Spring Boot2(五):使用Spring Boot结合Thymeleaf模板引擎使用总结

    一.Thymeleaf概述 一般来说,常用的模板引擎有JSP.Velocity.Freemarker.Thymeleaf . SpringBoot推荐的 Thymeleaf – 语法更简单,功能更强大 ...

  10. idea+mvc项目转换小记

    经过大家协商,决定还是紧跟时代潮流,把项目转到idea下,并且重新组织项目结构.项目环境原本为myeclipse+maven+springMVC,由于本人提议的boot+cloud变化太大,成本巨大, ...