一个倒计时页面用javascrpt

最新推荐文章于 2022-08-18 16:32:46 发布
最新推荐文章于 2022-08-18 16:32:46 发布
阅读量723 收藏
点赞数
分类专栏： jquery 文章标签： javascript倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tstbdt/article/details/46455753
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="">
	<title>跳转倒计时demo</title>
</head>

<body>
<div class="system-message">
<p class="jump">
页面自动 <a id="href" href="http://www.baidu.com";>跳转</a> 等待时间： <b id="wait"> 5</b>
</p>
</div>
<script type="text/javascript">
// (function(){
// var wait = document.getElementById('wait'),href = document.getElementById('href').href;
// var interval = setInterval(function(){
// 	var time = --wait.innerHTML;
// 	if(time <= 0) {
// 		location.href = href;
// 		clearInterval(interval);
// 	};
// }, 1000);
// })();
var wait =document.getElementById('wait'),href=document.getElementById('href').href;

var interval =setInterval(function(){
	var time=--wait.innerHTML;
	if(time<=0){
		location.href=href;
		clearInterval(interval);
	};
},1000);
</script>
</body>
</html>

牙小木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tp5跳转页面修改等待时间和页面提示内容
milli236的博客
02-14 2199
1.body里的div结构改造:用图片代替， {__NOLAYOUT__}&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org...
一个页面的倒计时代码
我的java笔记库
12-05 325
今天切割一页面，类似于团购网站的商品展示，N个竞拍商品，每个都得有单独的倒计时截止时间，期间杂七杂八的事一大堆。幸亏哥定力好，酝酿到大家都下班，办公室安静了，才着手写页面的js：倒计时。网上也有类似功能的代码，但都不怎么好用，干脆自己写吧。 分析了一下基本功能：时分秒，三级定时联动，倒计时开关，初始化变量等等... 差不多就是这个思路，最后，处理了一些小细节。可能还有bug，等待被发现 :...
php 错误提示模板,Tp5.1修改错误提示页面模板
weixin_42113794的博客
03-18 411
效果： 跳转提示*{ padding: 0; margin: 0; }body{ background: #290C0C; font-family: '微软雅黑'; color: #fff; font-size: 16px; }.system-message{ padding: 24px 48px; }.system-message h1{ font-size: 80px; font-weight...
tp5学习基础知识总结 3 控制器初始化和跳转
qq_42619132的博客
07-20 1116
  A 控制器 命名 访问 加载 初始化 1 命名首字母大写并驼峰形式 2 浏览器访问驼峰形式控制器会报错 将中间大写字母前加下划线     如：访问http://www.tp5.com/UserInfo 因改为 http://www.tp5.com/User_Info  0 方法里的return    正常不加载页面时 return 是返回打印出值    这是在配置文件 'd...
页面自动跳转
robert198837的专栏
04-24 1010
页面自动跳转中,等待时间：3秒 (function(){ var wait = document.getElementById('wait'),href = document.getElementById('href').href; var interval = setInterval(function(){ var time = --wait.innerHTML; if(t
var time=document.getElementById("time")这一行为啥可要可不要
Java技术
07-13 960
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置多少秒之后跳转百度页面</title> <style type="text/css"> p { text-align: center; } s...
Javascript倒计时页面跳转实例小结
10-26
在JavaScript中，实现倒计时页面跳转是常见的需求，主要应用于在线考试、限时优惠活动等场景。本文将深入解析几种不同的实现方法。 首先，我们可以使用`setInterval`或`setTimeout`函数来创建一个定时器，让页面在...
JS一个页面多个倒计时
10-17
在JavaScript（JS）中，实现一个页面多个倒计时功能是一项常见的需求，特别是在电商网站上，如淘宝和京东，用于显示商品秒杀活动的倒计时。这种功能能够吸引用户注意力，增加活动的紧迫感，从而提高转化率。本文将...
javascript页面倒计时实例
10-23
主要介绍了javascript页面倒计时实现方法,可实现简单的页面倒计时及自动提交表单功能,非常简单实用,需要的朋友可以参考下
JavaScript高仿支付宝倒计时页面及代码实现
10-21
在支付宝上我们经常会见到支付宝倒计时功能，倒计时应用非常广泛，下文给大家介绍js制作支付宝倒计时功能，但是里面涉及到，倒计时，弹框，以及字体图的相关知识，感兴趣的朋友一起看看吧
javascript中的innerHTML是什么意思，怎么个用法？
h3110n3w0r1d
10-14 3501
转自：https://blog.csdn.net/qq_27918787/article/details/52628311 innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容； 如：&lt;div id="aa"&gt;这是内容&lt;/div&gt; ， 我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对...
javascript实现一个简单的5秒倒计时，并跳转
热门推荐
lzpzwy的博客
04-24 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;倒计时五秒&lt;/title&gt; &lt;script&gt; //使用匿名函数方法 function countDown(){ var time =
tp5改写跳转提示页面
Leeyongbard的博客
07-08 1万+
大家都知道Tp框架一直以来的执行成功和失败的页面都不是特别的好看，不过这样也给了开发者一个不错的选择我们可以根据自己的喜好去改写这个跳转提示的页面 我使用的是Tp5框架，Tp5的跳转提示页面的改写和Tp3的有异曲同工之妙，首先还是先看一下Tp框架中自带的跳转提示页面的代码吧，我直接贴上了： {__NOLAYOUT__}         跳转提示             *{
innerHtml的用法及理解
cheng1a的博客
08-18 1万+
innerHtml标签可以获取标签内的html内容，用法为：document.getElementById(‘ xx ’).innerHTMLinnerHtml标签也可以用来设置标签内的html内容，用法为：document.getElementById(‘ xx ’).innerHTML=’需要设置的内容’;
如何在selenium中使用元素的innerHTML
weixin_43980875的博客
12-05 4366
在selenium 中使用JavascriptExecutor 修改innerHTML 通过selenium获取的元素无法直接修改元素的内容。通过JavascriptExecutor能够实现对任意可视元素进行innerHTML的修改替换。代码示例如下： c#代码示例 // An highlighted block driver.Navigate().GoToUrl(@&quot;https://www.fa...
document.getElementById（）
博客
04-10 1万+
句法： var element = document .getElementById（id）; 参量： id:要定位的元素的id。id是区分大小写的字符串，在文档中是唯一的。只有一个元素可以具有任何给定的id。 返回值 例 HTML代码： <html> <head> <title>getElementById example</title> &...
使用javascript写一个倒计时功能
最新发布
06-09
以下是使用 JavaScript 实现一个简单的倒计时功能的示例代码： ```javascript // 设置倒计时时间（单位：秒） var countdown = 60; // 获取倒计时容器元素 var countdownEl = document.getElementById("countdown"); // 创建倒计时函数 function startCountdown() { // 倒计时结束，清除计时器 if (countdown < 0) { clearInterval(countdownTimer); countdownEl.innerHTML = "倒计时结束"; return; } // 更新倒计时容器元素 countdownEl.innerHTML = "倒计时剩余时间：" + countdown + " 秒"; // 减少倒计时时间 countdown--; } // 启动计时器，每秒执行一次倒计时函数 var countdownTimer = setInterval(startCountdown, 1000); ``` 此示例将倒计时时间设置为 60 秒，并在页面中显示倒计时容器元素。倒计时函数 `startCountdown` 每秒执行一次，更新倒计时容器元素中的文本，直到倒计时结束。在每次执行倒计时函数时，倒计时时间 `countdown` 减少 1 秒。当倒计时结束时，计时器被清除，并显示倒计时结束的文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值