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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS如何实现倒计时功能,如何防止刷新。相关的知识,希望对你有一定的参考价值。

倒计时可以用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=0;event.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:1px;dialogheight:1px");
return false;


</script>
参考技术A

1、倒计时的总时间从服务器端获取,每次刷新,每次都从服务器端获取

2、获取倒计时总时间后,在客户端进行倒计时。

function timer()

var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数 ,这个时间需要从服务器端获取。
var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
dd = checkTime(dd);
hh = checkTime(hh);
mm = checkTime(mm);
ss = checkTime(ss);
document.getElementById("timer").innerhtml = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
setInterval("timer()",1000);

function checkTime(i)  
              
               if (i < 10)   
                   i = "0" + i;  
                  
               return i;  
            

参考技术B $(function()
var time = $.cookie("time");
if(time==null)$.cookie("time",200);time=$.cookie("time");
$("input").val(time);
setTimeout(Round(),1000) ;
)
function Round()
$("input").val($.cookie("time"));
$.cookie("time")=$.cookie("time")-1;
setTimeout(Round(),1000) ;

<input></input>追问

能语言描述嘛。还有怎么防止刷新

追答

刷新没办法
所以你把你的值存在客户端Cookie里面
而且值变化同步到Cookie
这样你的值刷新了之后也不是初始值

参考技术C 直接用GETTIME调用系统时间不就是了嘛。万一别人设置了关浏览器清除缓存记录(我就爱这么干)那你防止刷新也没用。

ASP.NET 如何防止页面的刷新

ASP.Net中每点一次页面中的button控件,页面就会自动刷新一次。请问怎样防止这种刷新。... ASP.Net中每点一次页面中的button控件,页面就会自动刷新一次。请问怎样防止这种刷新。 展开

参考技术A 添加一段js或JQuery,给你的button添一个onclick事件,在你调用的js或jquery的方法中根据你的要求判断是return
false或true,返回false时就不会刷新网页了

以上是关于JS如何实现倒计时功能,如何防止刷新。的主要内容,如果未能解决你的问题,请参考以下文章

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

刷新页面后怎么让js定时器继续刷新前的状态继续计时

wordpress不用插件实现倒计时的功能

如何在网页中用html+js实现手机里下拉刷新的功能?请教高手

JS实现为控件添加倒计时功能

求php倒计时代码