zoukankan      html  css  js  c++  java
  • 20行代码的倒计时

    HTML结构

    	<div id="clockdiv">
    	    Days: <span class="days"></span><br>
    	    Hours: <span class="hours"></span><br>
    	    Minutes: <span class="minutes"></span><br>
    	    Seconds: <span class="seconds"></span>
    	</div>
    

    JS代码

    // 给定一结束时间
    		var timeline = 'Mon Aug 15 2016 19:09:18 GMT+0800';
    
    		// 获取时间函数 / Date.parse将时间转换成毫秒数
    		function getTime(endtime) {
    			var t = Date.parse(endtime) - Date.parse(new Date()); //转换成毫秒
    			var second = Math.floor(t/1000 % 60); //转换成秒
    			var minutes = Math.floor(t/1000/60 % 60); //转换成分钟
    			var hours = Math.floor(t/1000/60/60 % 24); //转换成小时
    			var day = Math.floor(t/1000/60/60/24); //转换成天
    			return {
    				'total': t,
    				'second': second,
    				'minutes': minutes,
    				'hours': hours,
    				'day': day
    			}  //把时间全部返回
    		}
    
    		//时间显示成内容函数
    		function clockfn(id,endtime) {
    			function getHtml() {
    				var t = getTime(endtime); //活的时间函数中的时间
    				var clock = document.getElementById(id),
    					daySpan = clock.querySelector('.days'),
    					hoursSpan = clock.querySelector('.hours'),
    					minutesSpan = clock.querySelector('.minutes'),
    					secondsSpan = clock.querySelector('.seconds');
    				//用时间赋值到倒计时内容
    				daySpan.innerHTML = t.day;
    				hoursSpan.innerHTML = t.hours;
    				minutesSpan.innerHTML = t.minutes;
    				secondsSpan.innerHTML = t.second;
    				//倒计时到, 清楚定时器
    				if(t.total <= 0) {
    					clock.innerHTML = '时间到';
    					timer = null;
    				}
    			}
    			//先云清一次内容 / 不然定时器要1秒钟才开始运行,才会显示内容
    			getHtml();
    			var timer = setInterval(getHtml, 1000);
    
    		}
    		clockfn('clockdiv',timeline);  //运行
    

    一个简单的倒计时, 简单的逻辑就是获得分/秒/等的时间    然后将里面的结构替换成获取的时间    用定时器控制其显示隐藏。

  • 相关阅读:
    java 中的锁 -- 偏向锁、轻量级锁、自旋锁、重量级锁(转)
    MySQL存储引擎--MyISAM与InnoDB区别
    Socket详解
    Java线程池参数
    Java反射机制(转)
    java注解
    docker入门实例
    docker常用命令总结
    showdoc 自动脚本安装
    [mysql]You must reset your password using ALTER USER statement before executing this statement.
  • 原文地址:https://www.cnblogs.com/htzan/p/5774091.html
Copyright © 2011-2022 走看看