导航:首页 > 编程语言 > js倒计时自动隐藏

js倒计时自动隐藏

发布时间:2025-03-08 22:44:42

㈠ 求一个用js编写的60秒倒计时,需要在页面上显示剩余时间

var s = 60, t;
function times(){
s--;
document.form.time.value = s;
t = setTimeout('times', 1000);
if ( s <= 0 ){
s = 60;
clearTimeout(t);
}
}

times();

㈡ JS 倒计时问题,手机网页后台运行时,js会暂停

如果我答得好请给我一点分

在html5中document新增了一个事件 visibilitychange,这个事件在页面前台或后台切换时被触发,你所说的问题就简单了,它也有个对应的属性visibilityState,用于检测当前页面的状态值为hidden还是visible。

解法是,在hidden时记录当前时间,在visible时用当前时间减去之前记录的时间就为当前倒计时需要减去的时间,这也就不需要和后台沟通了,或者你直接在visible时刷新页面也行,下面是小样,你测试一下

varb=getTime();

functiongetTime()
{
returnDate.now();

}



document.addEventListener('webkitvisibilitychange',function()
{

if(document.webkitVisibilityState=='hidden')
{
b=getTime();

}else
{
document.body.appendChild(document.createTextNode('间隔:'+(getTime()-b)))

}




})
document.addEventListener('mozvisibilitychange',function()
{


if(document.mozVisibilityState=='hidden')
{
b=getTime();

}else
{
document.body.appendChild(document.createTextNode('间隔:'+(getTime()-b)))

}



})

㈢ JS实现简单网页倒计时器

要制作一个简单的网页倒计时器,可以使用javaScript实现。首先,我们编写HTML代码,创建一个用于显示倒计时时间的div元素。

接下来,编写JavaScript代码。首先获取当前时间,然后指定一个到期时间(例如2032年1月1日),计算当前时间和到期时间的时间差(以毫秒为单位)。接着判断如果时间超了,停止倒计时。

已知总的秒数,通过取整数的方法计算天数、小时、分钟和秒数。为了增加用户体验,将数字转换成字符串,并在不足10的分秒中前补0。

定义一个空的字符串用于接收最后的倒计时字符串,并将其显示在页面上。最后,通过setInterval函数每1000毫秒更新一次倒计时。

总体的JavaScript代码如下:

javascript
// 指定计时器到期时间,首先封装函数
function antitime() {
var now = new Date(); // 获取当前时间
var to = new Date(2032, 1, 1, 0, 0, 0); // 指定到期时间
var deltaTime = (to - now) / 1000; // 求时间差(秒)
// 判断如果时间超了,停止倒计时
if (deltaTime <= 0) {
window.clearInterval(antitime);
}
// 计算天数、小时、分钟和秒数
var d = Math.floor(deltaTime / 3600 / 24),
h = Math.floor(deltaTime / 3600 % 24),
m = Math.floor(deltaTime / 60 % 60),
s = Math.floor(deltaTime % 60);
// 补零
if (d < 10) d = '0' + d;
if (h < 10) h = '0' + h;
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
// 定义一个空的字符串
var timer01 = '距离2032年1月1日还有' + d + '天' + h + '小时' + m + '分' + s + '秒';
document.getElementById('box').innerHTML = timer01;
}
// 开启定时器,每1000毫秒更新一次
setInterval(antitime, 1000);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自由互联。

㈣ 如何用javascript实现一小时倒计时

js代码:fun.js
var timmerID = null;
function time() {
var time = document.getElementById("now");
var left = document.getElementById("left");
var t = time.value.split(":");
var hour = parseInt(t[0]);
var min = parseInt(t[1]);
min=min+1;
if(min==60){
hour=hour+1;
min=0;
if(hour==24){
hour=0;
}
}
time.value=hour+":"+min;
left.value = left.value-1;
if(left.value==0){
mystop();
alert("时间已到!");
}

}
function mystart() {
var left = document.getElementById("left");
left.value="40";
timmerID = window.setInterval("time()", 1000*60);
}
function mystop() {
window.clearInterval(timmerID);
}

html页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>time.html</title>

<script type="text/javascript" src="fun.js"></script>
</head>

<body>
时间起点:<input type="text" name="now" id="now" value="0:0"/><input type="button" value="开始" onclick="mystart();"><br>
剩余时间:<input type="text" name="left" id="left" value="40" disabled="disabled"/>分钟<br>
</body>
</html>

补充:这个javascript放在一个文件叫fun.js,在html页面中要引用此文件,如:<script type="text/javascript" src="fun.js"></script> ,注意不要把路径弄错了,src后面的路径按照实际的来,如果两个文件在一个目录下,就是如上这样引用,当然也可以直接把全部的js内容放在html文件的头部,如:<script type="text/javascript">
<!--javascript代码-->
</script>

㈤ js设置DIV显示时间并动态显示时间倒计时多少秒,倒计时完了之后该层自动隐藏。

给你个思路:
1初始化时间,例如1小时5分钟30秒(也可以让用户手动设置,这里略)
保存在全局变量中
var hour,minute,second;

2设置定时每隔1秒执行function xxx
setInterval(function xxx(){...},1000);

3编写function用于每隔1秒更新时间,里面判断若倒计时为0时,隐藏div
function xxx(){
if(--second==0){
if(--minute==0){
if(--hour==0){
//隐藏div 设置style.display='none'
}
show(hour,minute,second);
second=60;
minute=60;
}
show(hour,minute,second);
second=60;
}
show(hour,minute,second);
}

function show(hour,minute,second){
var str_hour = hour<10?"0"+hour:""+hour;
var str_minute = minute<10?"0"+minute:""+minute;
var str_second = second<10?"0"+second:""+second;
//将这三个时分秒显示到div中指定位置
}

阅读全文

与js倒计时自动隐藏相关的资料

热点内容
javavoid参数 浏览:829
如何让编程具有记忆功能 浏览:435
javamail发送带附件的邮件 浏览:173
微信分享文件到其他软件 浏览:682
微信对话文件夹在哪 浏览:287
qq头像欧美范街头男生 浏览:321
毛孔app 浏览:880
照片级渲染教程 浏览:304
目录中的文件夹有什么用 浏览:177
车载u盘文件扫描 浏览:410
稻壳文档怎样改文件名 浏览:620
cad怎么把文件存成模板 浏览:250
编程设计用什么笔记本流畅 浏览:584
电脑突然打开文件很慢 浏览:501
数据线一般是多少瓦的 浏览:314
javawebjsp简单项目实例 浏览:930
u盘lost文件夹删除不了 浏览:754
工具使用如何帮助提升工作效率 浏览:773
什么叫解压缩下载的文件 浏览:703
js监听浏览器窗口移动 浏览:225

友情链接