大家好，我是云中君！欢迎大家来观看我的博客

之前那，在群里看到很多人问，关于电商网站中的倒计时功能怎么实现，很多人说在网上找了很多插件，但是不是很会用，所以今天就在这里分享一下我封装的一个小的倒计时功能！

下面是布局代码！

 
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="css/index.css" rel="stylesheet">

    </head>

    <body>

    <!--用的时候把下面这个代码放到你那个放倒计时的盒子里面就好了-->

        <span class = "span1"  id="time1" data-time="2017/11/19 23:32">

                本场剩余：

            <!----data-time用来存放你商品到期的时间，时间格式就按照上面格式就好--->

            <!--每个span的id要唯一，调用函数的时候就是要传id这一个参数-->

                <em></em> 天

                <em></em> 小时

                <em></em> 分

                <em></em> 秒

            <!--em标签用来放置我们所要显示的时间--->

        </span>

        <script type="text/javascript" src="js/js.js"></script>

        <!--在这里调用js文件，里面是封装的倒计时的js函数-->

    </body>

</html>

　　 怎么样，布局很简单吧！接下来是我们的css代码，本人并没有做太多的设置，大家根据自己的喜好来设置不同的样式，这样都是可以的！

span{font-size:12px;color:#666;}

em{font-style:normal;color:red;font-size:12px;}

/******这里是css，大家可以根据自己的喜好更改到自己的style，笔者只是在这里简单的做了一些设置********/

　　接下来就是我们的js代码了





function getTime(id){

        var timer = null;//这里设置time为null，用于下面来清除计时器

        var obj = document.getElementById(id)//获取到放置时间数据的span的id

        timer = setInterval(function(){//设置定时器，来更新时间

                var a = new Date((obj.getAttribute("data-time"))).getTime();

                //上面这一步可能比较复杂，我们首先来看obj.getAttribute("data-time")这一句。这个是用来获取指定标签的data-time属性，
即我们要使用的到期时间，然后来看new Date().getTime(),这一句是用来获取我们所设置到期时间的时间戳，用于下面的计算，这个获取的是固定的数值

                var b = new Date().getTime();//这是获取当前时间，是一个不固定的数值

                var d = 0,s=0,h=0,m=0;//定义变量

                var ee = obj.getElementsByTagName("em")//获取布局中的em标签用于存取数据

                d = Math.floor((a - b)/1000/60/60/24);//获取剩余天数

                h = Math.floor((a - b)/1000/60/60%24);//获取剩余小时

                m = Math.floor((a - b)/1000/60%60);//获取剩余分钟

                s = Math.floor((a - b)/1000%60);//获取剩余秒数







                //中间这块区域是用来判断，当前时间数值小于10的时候给他前面加个0，这里可以根据具体情况可加可不加，以下同理

                if(d <){

                    d = "0" + d

                }else if(d < 0){

                    d = 0

                }

                if(h < 10){

                    h = "0" + h

                }else if(h < 0){

                    h = 0

                }

                if(m < 10){

                    m = "0" + m;

                }else if(m < 0){

                    m = 0;

                }

                if(s < 10){

                    s = "0" + s;

                }else if(s < 0){

                    s = 0;

                }




                ee[0].innerHTML = d;

                ee[1].innerHTML = h;

                ee[2].innerHTML = m;

                ee[3].innerHTML = s;

                if(a <= b){//当我们的时间到期的时候，清除计时器，然后把当前标签的内容设置为0；

                    clearInterval(timer);

                    ee[0].innerHTML = 00;

                    ee[1].innerHTML = 00;

                    ee[2].innerHTML = 00;

                    ee[3].innerHTML = 00;

                }

            },1000)

}

getTime("time1")//这里用来调用这个函数，传入id




　　这里我们就做好了一个倒计时的功能了！大家有不懂得地方可以加笔者的qq来和我一起讨论，欢迎大家来交流！qq：785228195






												


											
原生js实现一个简单的倒计时功能的更多相关文章
	

    
								
  1. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
		
    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
    
		
    2. 
						
  2. 原生 JS实现一个简单分页插件
		
    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
    
		
    3. 
						
  3. 原生js实现一个简单的轮播图
		
    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
    
		
    4. 
						
  4. 如何用原生JS实现一个简单的promise
		
    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...
    
		
    5. 
						
  5. 原生JS实现一个简单的前端路由（原理）
		
    说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...
    
		
    6. 
						
  6. JS实现一个简单的计算器
		
    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
    
		
    7. 
						
  7. 用JS做一个简单的电商产品放大镜功能
		
    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单.  ...
    
		
    8. 
						
  8. 用原生js写一个"多动症"的简历
		
    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
    
		
    9. 
						
  9. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
		
    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. mac电脑安装apache，不能启动
			
    因为mac系统是自带apach的 如果安装正确还是不能启动,有可能是 mac电脑自带apache功能,与安装的apache冲突. 这样关闭Mac自带apach即可. mac电脑apache命令:重启a ...
    
			
    2. 
						
  2. 一、VueJs 填坑日记之基础概念知识解释
			
    概述在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs.对于初学者(尤其是干后端的初学者)来说,刚 ...
    
			
    3. 
						
  3. Oracle与Sql server的区别
			
    一直搞不明白Oracle数据库和sql server的区别,今天我特意查资料把他们的区别整理出来 Oracle数据库:Oracle Database,又名Oracle RDBMS,或简称Oracle. ...
    
			
    4. 
						
  4. 结合程序崩溃后的core文件分析bug
			
    引言     在<I/O的效率比较>中,我们在修改图1程序的BUF_SIZE为8388608时,运行程序出现崩溃,如下图1:          图1. 段错误     一般而言,导致程序段 ...
    
			
    5. 
						
  5. UTF-8和UTF-8无BOM，一个会导致文件中中文变量无法匹配的bug
			
    昨晚用dom4j中的selectSingleNode解析xml,匹配节点. 发现匹配不到,但是确实存在该节点 将regex改为regex1后则可以匹配,也就是说文件中的"阿里旺旺" ...
    
			
    6. 
						
  6. Oracle11g静默安装dbca，netca报错处理--直接跟换操作系统
			
    最近给一个客户安装oracle 11gr2 概述: 操作系统:linux 32位操作系统 [oracle@nbsrfx response]$ uname -aLinux nbsrfx 2.6.32-5 ...
    
			
    7. 
						
  7. Bootstrap-datepicker3官方文档中文翻译---概述（原版翻译 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html）
			
    bootstrap-datepicker Bootstrap-datepicker 提供了一个拥有Bootstrap样式的弹性Datepicker控件 Requirements/使用要求 Bootst ...
    
			
    8. 
						
  8. 大数据学习系列之一  -----  Hadoop环境搭建(单机)
			
    一.环境选择 1,服务器选择 阿里云服务器:入门型(按量付费) 操作系统:linux CentOS 6.8 Cpu:1核 内存:1G 硬盘:40G ip:39.108.77.250 2,配置选择 JD ...
    
			
    9. 
						
  9. CCF-201409-3-字符串匹配
			
    问题描述 试题编号: 201409-3 试题名称: 字符串匹配 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你 ...
    
			
    10. 
						
  10. macOS安装beego的使用bee命令出现killed：9 解决办法
			
    最近想搞一个restful api,发现go还是不错的,拿来研究下 beego文档:https://beego.me/quickstart 安装之后,执行bee命令,报错如下: 应该是最新mac OS ...
    
			
    11.