看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时。全当学习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. Win7和Vista的安全机制对于应用程序读取配置文件相关操作的影响(虚拟重定向技术)

    今天构造了一个新版本的XXXX软件,并且在纯净的系统下进行了较为全面的测试.测试中也发现了一些问题.其中包括在Win7测试时程序竟然在另一个目录中创建了文件夹和配置文件,并且进行相关读取操作,却并没有 ...

  2. 【MyEclipse常见错误】-java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory的解决

    ApacheJavaTomcatMyeclipse  自己前一段时间出现了这个问题,通过在网上搜索,大概知道了原因,整理下一,以供大家参考. 将项目部署好后,启动tomcat后报错,java.lang ...

  3. Linux上read命令的使用

    一:read倾听是一种美德       1.倾听键盘的输入并保存到变量中              例如:#! /bin/bash            echo  "please inpu ...

  4. SpringBoot2.1.6 整合CXF 实现Webservice

    SpringBoot2.1.6 整合CXF 实现Webservice 前言 最近LZ产品需要对接公司内部通讯工具,采用的是Webservice接口.产品框架用的SpringBoot2.1.6,于是采用 ...

  5. Hexo+NexT(六):手把手教你编写一个Hexo过滤器插件

    Hexo+NexT介绍到这里,我认为已经可以很好地完成任务了.它所提供的一些基础功能及配置,都已经进行了讲解.你已经可以随心所欲地配置一个自己的博客环境,然后享受码字的乐趣. 把博客托管到Github ...

  6. HDFS Java API 的基本使用

    一. 简介 二.API的使用         2.1 FileSystem         2.2 创建目录         2.3 创建指定权限的目录         2.4 创建文件,并写入内容 ...

  7. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  8. css之vw布局

    vw,vh是视口单位,是相对视口单位,与百分百布局不一样的是,百分百是相对于父及元素,而vw布局是相对与窗口. 而rem布局是要与js一起配合 // 以iphone6设计稿 @function px2 ...

  9. Requests方法 -- 重定向操作

    一.重定向1. (Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置,从地址A跳转到地址 B 了.2.重定向状态码:--301 redirect: 301 代表永久性转移(Per ...

  10. 理论+实践解析“IT治理”之模式与原则

    IT治理工作作为企业信息化建设的上层建筑,扮演着及其重要的角色.本文结合作者的学习及实践经验给出一些借鉴. 一.IT治理概述 1.1 何为IT治理 在企业信息化建设中的最大问题,往往不是技术问题,也不 ...