javascript 倒计时天、小时、分钟、描述的倒计时代码

   2023-02-08 学习力0
核心提示:调用方法var _TimeCountDown = new TimeCountDown("sttime1",{ startTime:'2016-07-30 10:07:55',//开始时间endTime:'2016-07-30 10:08:00',//结束时间timeCallBack:"timeOverfun", //回调函数});countDown.js/** * @author wanghaitao * @param stt

调用方法

var _TimeCountDown = new TimeCountDown("sttime1",{ 
startTime:'2016-07-30 10:07:55',	//开始时间
endTime:'2016-07-30 10:08:00',	//结束时间	
timeCallBack:"timeOverfun", //回调函数
});

countDown.js

/**
 * @author wanghaitao
 * @param sttime1 id
 * @param startTime 开始时间
 * @param endTime 结束时间
 * @param timeCallBack 回调函数
 * 
 * 	var _TimeCountDown = new TimeCountDown("sttime1",{	
		startTime:'2016-07-30 10:07:55',		//开始时间
		endTime:'2016-07-30 10:08:00',			//结束时间		
		timeCallBack:"timeOverfun",  //回调函数
	});
 */


(function(window,undefined){
	var TimeCountDown = function(container, params){
		if(!(this instanceof TimeCountDown)) return new TimeCountDown(container, params);
		
	   var defaults = {
		 		endTime:'',			//title
				startTime:'',		//请传入ID,或DOM对象
				Lid:'',
				leftTitle:"倒计时:",//左侧名称
				colonStat:false,//是否把小时分转换成:
				timeCallBack:null	//关闭执行的回调函数	 
	   }
	   params = params || {};
       var originalParams = {};
       for (var param in params) {
        
            if (typeof params[param] === 'object' && params[param] !== null && !(params[param].nodeType || params[param] === window || params[param] === document || (typeof Dom7 !== 'undefined' && params[param] instanceof Dom7) || (typeof jQuery !== 'undefined' && params[param] instanceof jQuery))) {
                originalParams[param] = {};
                for (var deepParam in params[param]) {
                    originalParams[param][deepParam] = params[param][deepParam];
                }
            }
            else {
                originalParams[param] = params[param];
            }
       }
	   for (var def in defaults) {
            if (typeof params[def] === 'undefined') {
                params[def] = defaults[def];
            }
            else if (typeof params[def] === 'object') {
                for (var deepDef in defaults[def]) {
                    if (typeof params[def][deepDef] === 'undefined') {
                        params[def][deepDef] = defaults[def][deepDef];
                    }
                }
            }
      }
       var s = this;
        // Params
        s.params = params;
	 	s.container = container;
        s.currentBreakpoint = undefined;
		s.calculateTime = function(){
			var startTime = s.vert(this.params.startTime);				
			var endTime = s.vert(this.params.endTime);
			var time = endTime - startTime;  //时间差的毫秒数 ;
			return time;
		}
		s.vert = function(time){
			if(typeof time == "undefined" || time==""){
				return false;
			}
			var strtime = (time).replace(/-/g,"/");
			var date1 = new Date(strtime);
			return parseInt(date1.getTime());			
		}
		s.nTime = s.calculateTime();
		s.countdown();

	};
	
	TimeCountDown.prototype = {
			countdown:function(){
					var interval = 1000; //毫秒		
					var time;
				 	this.nTime = this.nTime - interval; 
				 
				  	var leave1 = this.nTime;//计算天数后剩余的毫秒数
				 	var t = Math.floor(Math.floor((leave1/(3600*1000))/24));
				  	var hleave = this.nTime%((24*3600*1000));
				  	//把剩余毫秒数转换为小时
					var h = Math.floor(hleave/(3600*1000)) < 10 ? "0"+ Math.floor(hleave/(3600*1000)) : Math.floor(hleave/(3600*1000));	
					var leave2 = this.nTime%(3600*1000);        //计算小时数后剩余的毫秒数
					//把转换小时之后,剩余毫秒数转换为分钟
					var m = Math.floor(leave2/(60*1000)) < 10 ? "0" + Math.floor(leave2/(60*1000)) : Math.floor(leave2/(60*1000));
					
					//把转换分钟之后,剩余毫秒数转换为秒
					var leave3 = leave2%(60*1000);      //计算分钟数后剩余的毫秒数
					var s = Math.round(leave3/1000) < 10 ? "0" + Math.round(leave3/1000) : Math.round(leave3/1000);	
				 	
				 	if(!this.params.colonStat){
					 	if(t == 0){
					 		time = this.params.leftTitle+"<span>" + h + "</span><label>时</label><span>" + m + "</span><label>分</label><span>" + s + "</span><label>秒<label>";
					 		
					 	}else{
					 		
					 		time = this.params.leftTitle+"<span>" + t + "</span><label>天</label><span>" + h + "</span><label>时</label><span>" + m + "</span><label>分</label><span>" + s + "</span><label>秒<label>";
					 	}				 		
				 	}else{
					 		time = this.params.leftTitle+"<span>" + h + "</span><label>:</label><span>" + m + "</span><label>:</label><span>" + s + "</span><label><label>";			 		
				 	}				
					var callBackTime = t+h+m+s;
					document.querySelector("#"+this.container).innerHTML = time;
					if(callBackTime <= 0){
						eval(this.params.timeCallBack);
						return false;
					}
					var that = this;
					setTimeout(function(){
						that.countdown();
					},interval);				
			}
	}
	window.TimeCountDown=TimeCountDown;
})(window,undefined);

  

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • JavaScript翻转字符串方法 js翻转一个字符串
    先把字符串转化成数组String.prototype.split(),再借助数组的reverse方法翻转数组顺序(Array.prototype.reverse()),然后把数组转化成字符串。使用的API方法:String.prototype.split(' ')使用指定的分隔符字符串将一个String对象分割成字符串数组Array.prot
    03-08
  • javascript常见面试题之一:将字符串'get-
    var str='get-element-by-id'; function strToupper(str) { //利用split将字符串分割成数组var arr= str.split('-');for (var i = 1; iarr.length; i++) {      //1.利用for循环获取数组的每个元素,2.用charAt(0)获取每个元素的第一个字符;3.用substr
    03-08
  • JavaScript清除空格、换行,把双引号转换成单引号
    JavaScript清除空格、换行,把双引号转换成单引
    1、页面   2、源码 1 !DOCTYPE2 html3 head4meta charset="utf-8"5 title清除字符串的空格和双引号/title6 style type="text/css"7 textarea{8 padding:10px;9 font-size:18px; 10 width:100%; 11 resize:none; 12 } 13 .main{ 14 padding:40px 10px; 15
    03-08
  • javaScript的Date函数 javascript date(
    1、获取当前时间  Date()获取到的时间是当前设备的显示的时间,开发中要考虑到用户的设备时间是否正确let nowTime = new Date(); // 获取当前时间  把data时间转换成常规格式scriptlet getTimeNow = () = {let nowTime = new Date(); // 获取当前时间——
    03-08
  • JavaScript中什么是闭包
    JavaScript中什么是闭包
    概念:当一个内部函数被调用,就会形成闭包,闭包就是能够读取其他函数内部变量的函数  就是一个函数去访问了另外一个函数的中的变量的函数例子:!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title闭包/title/headbodyscript type="text/javascript"//允许函
    03-08
  • 关于Javascript中通过实例对象修改原型对象属性
    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值。基本类型的数据值有5种:null、undefined、number、boolean和string。引用类型的数据值往大的说就1种,即Object类型。往细的说有:Object类型、Array类型、Date类型、Regexp类型、Functio
    03-08
  • javascript中defer的作用(转)
    script src=".js.js" defer/scriptdefer的作用就是作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题 加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活! defer是脚本程序强大功能中的一个“无名英
    03-08
  • JavaScript Array map() 方法
    JavaScript Array map() 方法
    一、定义map() 方法返回一个新数组,不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值,并按照原始数组元素顺序依次处理元素。注意:map() 不会对空数组进行检测。二、语法array.map(function(currentValue,index,arr), thisValue)四、
    03-08
  • JavaScript中的arguments,callee,caller(转)
    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsArguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的 Function 对象的名字。 n :选项。要传递给 Function 对象的从
    03-08
  • 前台javascript排序 js排序的几种方式
     script type="text/javascript"$(function () {$('.Sorthead-ShowUp').click(function () { var filed = $(this).attr("name"); $(".issorting").removeClass("issorting"); $(this).addClass("issorting"); D
    03-08
点击排行