JS如何实现倒计时功能,如何防止刷新。

JavaScript017

JS如何实现倒计时功能,如何防止刷新。,第1张

倒计时可以用js的setTimeout来控制

http://www.tocus.com.cn/?send=article_show&id=34&class=2

可以循环计时,而对于页面刷新,我们可以屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键来达到效果

<script>

//屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键

function document.oncontextmenu(){event.returnValue=false}//屏蔽鼠标右键

function window.onhelp(){return false} //屏蔽F1帮助

function document.onkeydown(){

if((window.event.altKey)&&((window.event.keyCode==37)||(window.event.keyCode==39))){

//屏蔽Alt+方向键←

//屏蔽Alt+方向键→

event.returnValue=false

}

if((event.keyCode==8)||(event.keyCode==116)||(event.ctrlKey &&event.keyCode==82)){

//屏蔽退格删除键

//屏蔽F5刷新键

//Ctrl+R

event.keyCode=0

event.returnValue=false

}

if(event.keyCode==122){event.keyCode=0event.returnValue=false}//屏蔽F11

if(event.ctrlKey &&event.keyCode==78)event.returnValue=false //屏蔽Ctrl+n

if(event.shiftKey &&event.keyCode==121)event.returnValue=false //屏蔽shift+F10

if(window.event.srcElement.tagName=="A" &&window.event.shiftKey)

window.event.returnValue=false //屏蔽shift加鼠标左键新开一网页

if((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4

window.showModelessDialog("about:blank","","dialogWidth:1pxdialogheight:1px")

return false

}

}

</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

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

<title>New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="DAYU">

<meta name="Keywords" content="">

<meta name="Description" content="">

</head>

<body>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

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

<title>New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="DAYU">

<meta name="Keywords" content="">

<meta name="Description" content="">

</head>

<?=date_default_timezone_set("Asia/Shanghai")?><!-- 这里会输出1先不管 -->

<?php

//3天后的时间

$d =strtotime('+3 days')

$threeday=date('Y-m-d H:i:s',$d)

?>

<script language="javascript">

function countdown(endtime, today)

{

//today = new Date()

//var testDate = new Date()

//today = new Date()

//target_time=new Date(endtime)

testDate = new Date()

today = testDate.format("yyyy-MM-dd hh:mm:ss")

target_time=endtime

//alert(target_time)

//timeold=(target_time.getTime()-today.getTime())

//alert(target_time)

//alert(today)return

//--------------------------------

timeold =DateDiff(target_time, today)

//alert(DateDiff(target_time, today))

//------------------------------

sectimeold=timeold/1000

secondsold=Math.floor(sectimeold)//走到这里好像就有问题了

msPerDay=24*60*60*1000

e_daysold=timeold/msPerDay

daysold=Math.floor(e_daysold)

e_hrsold=(e_daysold-daysold)*24

hrsold=Math.floor(e_hrsold)

e_minsold=(e_hrsold-hrsold)*60

minsold=Math.floor(e_minsold)

e_seconds=(e_minsold-minsold)*60

seconds=Math.floor(e_seconds)

e_millisecond=(e_seconds-seconds)*1000

millisecond=Math.floor(e_millisecond)

millisecond10=Math.floor(millisecond)

the_element = document.getElementById('counttime')

the_element.innerHTML="仅剩<br>"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"

window.setTimeout("countdown('" + endtime + "', today)", 100)

}

</script>

<BODY>

<table><tr><td width="175"><SPAN id="counttime" style="FONT-WEIGHT: boldCOLOR: #000000FONT-FAMILY:Arial"></SPAN>

<script language="javascript">

/**

* 时间对象的格式化

*/

Date.prototype.format = function(format){

/*

* eg:format="yyyy-MM-dd hh:mm:ss"

*/

var o = {

"M+" : this.getMonth()+1, //month

"d+" : this.getDate(), //day

"h+" : this.getHours(),//hour

"m+" : this.getMinutes(), //minute

"s+" : this.getSeconds(), //second

"q+" : Math.floor((this.getMonth()+3)/3), //quarter

"S" : this.getMilliseconds() //millisecond

}

if(/(y+)/.test(format)) {

format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length))

}

for(var k in o) {

if(new RegExp("("+ k +")").test(format)) {

format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length))

}

}

return format

}

//比较2个时间的差值

function DateDiff(dmEndDate, dmStartDate) {

dmEndDate = dmEndDate.replace(/-/g, "/")

dmEndDate = new Date(dmEndDate)

dmStartDate = dmStartDate.replace(/-/g, "/")

dmStartDate = new Date(dmStartDate)

var time = dmEndDate.getTime() - dmStartDate.getTime()

var iDays = parseInt(time / (1000 * 60 * 60 * 24))

return iDays

}

//*****************************************

// var endtime = "<?=date('Y-m-d H:i:s',time())?>"

//var testDate = new Date()

//var today = testDate.format("yyyy年MM月dd日hh小时mm分ss秒")

//var today = testDate.format("yyyy-MM-dd hh:mm:ss")

//var endtime = '6-2-2013 17:35:00'

//var endtime = "<?=date('Y-m-d H:i:s',time())?>"

var endtime = "<?=$threeday?>"

//alert(endtime)

//var today = new Date()

var testDate = new Date()

var today = testDate.format("yyyy-MM-dd hh:mm:ss")

// alert(today)

//countdown("<?=date('Y-m-d H:i:s',time())?>", today)

countdown("<?=$threeday?>", today)

</script></td></tr></table>

</BODY>

</HTML>

</body>

</html>

</body>

</html>

-------------------------------------------------------

页面保存为PHP文件去执行.

仅剩

0天0小时0分0秒//这个结果不对,应该是2天几分几秒才对

JS实现倒计时(时、分,秒)

var

interval

=

1000

function

ShowCountDown(year,month,day,divname)

{

var

now

=

new

Date()

var

endDate

=

new

Date(year,

month-1,

day)

var

leftTime=endDate.getTime()-now.getTime()

var

leftsecond

=

parseInt(leftTime/1000)

//var

day1=parseInt(leftsecond/(24*60*60*6))

var

day1=Math.floor(leftsecond/(60*60*24))

var

hour=Math.floor((leftsecond-day1*24*60*60)/3600)

var

minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60)

var

second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60)

var

cc

=

document.getElementById(divname)

cc.innerHTML

=

"脚本之家提示距离"+year+"年"+month+"月"+day+"日还有:"+day1+"天"+hour+"小时"+minute+"分"+second+"秒"

}

window.setInterval(function(){ShowCountDown(2010,4,20,'divdown1')},

interval)

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]