求一个倒计时js代码,非常简单的

JavaScript023

求一个倒计时js代码,非常简单的,第1张

逻辑如下：

1、先判断两个时间的时间差，当然如果得到的时间是13位时间戳的话你需要转化一下

2、判断时间够一天显示天数，够一小时显示小时数

相关代码：

//获取时间，时间戳转换，不是则不转

var mydate1 = new Date(parseInt(time1.replace("/Date(", "").replace(")/", "")))

var mydate2 = new Date(parseInt(time2.replace("/Date(", "").replace(")/", ""))) 

//获取剩余秒数 

var timerc =dateDiff(mydate, '2015/05/19 10:00:00') / 1000

function dateDiff(date1, date2) {

            var dt1 = new Date(Date.parse(date1))

            var dt2 = new Date(Date.parse(date2))

            try {

                return Math.round((dt2.getTime() - dt1.getTime()))

            }

            catch (e) {

                return e.message

            }

        } 

//循环调用倒计时

  function add() { //加时函数

            --timerc //时间变量自减1

            var day = parseInt(timerc / 86400)

            var hour = parseInt((timerc % 86400) / 3600)

            var min = parseInt((timerc % 3600) / 60)

            var sec = Number(parseInt(timerc % 60 / 10)).toString() + Number(parseInt((timerc % 10))).toString()

            if (day > 0) { //如果不到5分钟

                $("#day").html(day + '天') //写入天数

                $("#hour").html(hour + '时') //写入小时数

                $("#min").html(min + '分') //写入分钟数

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else if (hour > 0) {

                $("#hour").html(hour + '时') //写入小时数

                $("#min").html(min + '分') //写入分钟数

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else if (min > 0) {

                $("#min").html(min + '分') //写入分钟数

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else if (sec != '00') {

                $("#sec").html(sec + '秒') //写入秒数（两位）

            }

            else {

                tiao(activity) return true//时间到0调用函数

            }

            setTimeout("add()", 1000) //设置1000毫秒以后执行一次本函数

        }

望采纳！

function test(){

     var txt1 = document.getElementById("txt1"),

         txt2 = document.getElementById("txt2"),

         txt3 = document.getElementById("txt3"),

         opt  = document.getElementById("sel")

     txt3.value =  eval(txt1.value + opt.value + txt2.value)//eval函数可计算某个字符串，并执行其中的的js代码

} <input type="text" id="txt1" />

<select id="sel">

     <option value="+">+</option>

     <option value="-">-</option>

     <option value="*">*</option>

     <option value="/">/</option>

</select>

<input type="text" id="txt2" />

=

<input type="text" id="txt3" />

<input type="button" id="btn" value="计算" onclick="test()"/>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<meta name="keywords" content="焦点图" />

<meta name="description" content="焦点图代码" />

<title>焦点图</title>

<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/jquery.js"></script>

<script type="text/javascript" src="http://www.jinchuwenhua.com/templets/default/js/slide.js"></script>

</head>

<body>

<!-- 代码 开始 -->

<style>

.ck-slide ul { margin: 0padding: 0list-style-type: none}

.ck-slide { position: relativeoverflow: hidden}

.ck-slide ul.ck-slide-wrapper { position: absolutetop: 0left: 0z-index: 1margin: 0padding: 0}

.ck-slide ul.ck-slide-wrapper li { position: absolute}

.ck-slide .ck-prev, .ck-slide .ck-next { position: absolutetop: 50%z-index: 2width: 35pxheight: 70pxmargin-top: -35pxborder-radius: 3pxopacity: .15background: redtext-indent: -9999pxbackground-repeat: no-repeattransition: opacity .2s linear 0s}

.ck-slide .ck-prev { left: 5pxbackground: url(templets/default/images/arrow-left.png) #000 50% no-repeat}

.ck-slide .ck-next { right: 5pxbackground: url(templets/default/images/arrow-right.png) #000 50% no-repeat}

.ck-slidebox { position: absoluteleft: 50%bottom: 0pxz-index: 30hright:30pxwidth:100%}

.ck-slidebox ul { height: 30pxpadding: 0 4pxbackground: rgba(0,0,0,0.5)text-align:center}

.ck-slidebox ul li { float: leftheight: 30pxmargin: 0px 4pxline-height:30pxcolor:#fffdisplay:none}

.ck-slidebox ul li em { display: blockwidth: 100%height: 30px cursor: pointerfont-size:14px}

.ck-slidebox ul li.current em {color:#fff }

.ck-slidebox ul li em:hover { }

.ck-slide { width: 600pxheight: 400pxmargin: 0 auto}

.ck-slide ul.ck-slide-wrapper { height: 400px}

.ck-slide-wrapper li {display:none}

.ck-slidebox ul li{display:none}

.current{display:block!important}

</style>

<div class="ck-slide">

<ul class="ck-slide-wrapper">

<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/307.html" target="_blank"><img id="slide-img-1" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014114S60-L.jpg" class="slide" alt="国考明起报名招2.7万人 首次仅面向体制外招录" style='width:600px'/></a>

</li>

<li>

<a target="_blank" href="http://www.jinchuwenhua.com//a/xinwen/2015/1014/289.html" target="_blank"><img id="slide-img-2" src="http://www.jinchuwenhua.com/uploads/151014/1-151014092105J3.jpg" class="slide" alt="中关村“变形记”：从电子卖场到7.2公里的创业大街" style='width:600px'/></a>

</li>

<li>

<a target="_blank" href="http://www.jinchuwenhua.com/a/xinwen/2015/1014/290.html" target="_blank"><img id="slide-img-3" src="http://www.jinchuwenhua.com/uploads/allimg/151014/1-151014092F30-L.jpg" class="slide" alt="金星大聊两性话题 辣评娱乐圈男星：没我想睡的" style='width:600px'/></a>

</li>

</ul>

<a href="javascript:" class="ctrl-slide ck-prev">上一张</a><a href="javascript:" class="ctrl-slide ck-next">下一张</a>

<div class="ck-slidebox">

<div class="slideWrap">

<ul class="dot-wrap">

<li><em>国考明起报名招2.7万人 首次仅面向体制外招录</em></li>

<li><em>中关村“变形记”：从电子卖场到7.2公里的创业大街</em></li>

<li><em>金星大聊两性话题 辣评娱乐圈男星：没我想睡的</em></li>

</ul>

</div>

</div>

</div>

<!--图片轮播结束-->

<!-- 代码 结束 -->

<script>

$('.ck-slide').ckSlide({

autoPlay: true

})

</script>

</body>

</html>