JS实现的倒计时效果实例(2则实例)
作者:秋叶为何落 发布时间:2023-08-23 17:12:05
标签:JS,倒计时
本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:
我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码:
html页面:
<html>
<head>
<title>倒计时</title>
<!--以下为css样式-->
<style type= "text/css">
.daojishi h2
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
margin-bottom:5px;
color:#151515;
}
.daojishi #timer
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
color:#151515;
font-weight:bold;
}
</style>
<script type = "text/javascript" src = "timer.js">
</script>
</head>
<body onload = "timer()">
<div class = "daojishi">
<h2>剩余时间为:</h2>
<div id = "timer">
</div>
</div>
</body>
</html>
timer.js:
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;
}
运行效果截图如下:
再来看看另一个JS倒计时效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
<span id="t_d">00天</span>
<span id="t_h">00时</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</DIV>
<script type="text/javascript">
function getRTime(){
var EndTime= new Date('2016/05/1 10:00:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
/*var d=Math.floor(t/1000/60/60/24);
t-=d*(1000*60*60*24);
var h=Math.floor(t/1000/60/60);
t-=h*60*60*1000;
var m=Math.floor(t/1000/60);
t-=m*60*1000;
var s=Math.floor(t/1000);*/
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(getRTime,1000);
</script>
</body>
</html>
运行效果截图如下:
读者可以按照自己的喜好选择一款倒计时代码使用。
希望本文所述对大家JavaScript程序设计有所帮助。
0
投稿
猜你喜欢
- 类成员变量默认初始值的坑问题发现一个循环内,缺省值初始化同名变量,其中的list成员不是空,会延续之前同名变量的值。示例代码# Define
- 为什么使用事务 当对多个表进行更新的时候,某条执行失败。为了保持数据的完整性,需要使用事务回滚。 显示设置事务 代码如下:beg
- 1. 匿名函数匿名函数(anonymous function)是指未与任何标识符绑定的函数,多用在functional programmin
- vue中为何方法要写在methods里面1.methods是什么?首先先来段代码,我们在template中设定一个按钮,在点击按钮的时候打印
- 音频预处理这一讲主要介绍些音频基本处理方式,为接下来的语音识别打基础。三种播放音频的方式使用 python 播放音频有以下几种方式:os.s
- 字符编码,在编程中,是一个让学习者比较郁闷的东西,比如一个str,如果都是英文,好说多了。但恰恰不是如此,中文是我们不得不用的。所以,哪怕是
- 什么是MobileNetV2模型MobileNet它哥MobileNetV2也是很不错的呢MobileNet模型是Google针对手机等嵌入
- 图形用户界面 (GUI)图形用户界面 (GUI) 只不过是一个桌面应用程序,可帮助我们与计算机进行交互像文本编辑器这样的 GUI 应用程序可
- 【原文地址】My "First Look at Orcas" Presentation 【原文发表日期】 Th
- 铺垫在大量的实践中,似乎我们总是通过类似的方式来使用异步编程:监听事件事件发生执行对应的回调函数回调完成(可能产生新的事件添加进监听队列)回
- python版本: 3.6pandas版本: 0.23.4行索引索引行有三种方法,分别是 loc iloc iximport pandas
- 你知道(X)HTML中最多余的标签中是什么吗?在我看来就是这个<a>标签,不错,就是每个网站使用最多的超级链接标签<a&g
- ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写 的,主要用于创建前端用户界面,是一个与后台技术无关的
- 概述前段时间突然发现,我之前对git stash的使用都是错误的。具体说来,我是这么使用的:在远端有新的提交,需要git pull来拉取合并
- 前言本文主要介绍的是关于python 3用BeautifulSoup抓取div标签的方法示例,分享出来供大家参考学习,下面来看看详细的介绍:
- 需求是这样的,我从本科到现在硬盘里存了好多照片,本来是按类别分的,有一天,我突然想,要是能按照时间来分类可能会更好。可以右键查看照片的属性,
- 本教程为大家分享了Linux安装MySQL详细步骤,供大家参考,具体内容如下第一步: 下载MySQL安装包进入mysql官网,进入downl
- 一、什么是异常?异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行。一般情况下,在Python无法正常处理程序时就会发生一
- 从Keras转换成PB模型请注意,如果直接使用Keras2ONNX进行模型转换大概率会出现报错,这里笔者曾经进行过不同的尝试,最后都失败了。
- 本文实例讲述了Yii2 assets清除缓存的方法。分享给大家供大家参考,具体如下:use vendor\myVendorName\myPa