javasScript实现倒计时

这个功能是完全利用javascript实现的一个小功能,没有什么技巧含量,贴在这里方便自己以后用。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7     window.onload = Watch;//页面加载时调用Watch()函数
 8     function Watch() {
 9         var span = document.createElement("sapn");
10         span.innerHTML = "120:00";
11         var s = 60;//用来记录秒,因为需求是从1开始的。
12         var m = 119;//用来记录分钟
13         var w = setInterval(function () {
14         s--;
15         if (s == 00) {//当秒跑到60时,分钟加1,秒钟从0开始。
16             m--;
17             s = 60;
18         }
19     span.innerHTML = m + ":" + (s < 10 ? "0" + s : s); //显示时间(秒小于10时,前补0)
20     //到过5分钟时停止
21     }, 1000); //每1000毫秒即1秒执行一次此函数
22     document.getElementById("Show").appendChild(span);//显示到页面上
23     }
24     </script>
25 </head>
26 <body>
27     <div id="Show" style="text-align:center"></div>
28 </body>
29 </html>
时间: 2024-11-05 12:26:05

javasScript实现倒计时的相关文章

canvas制作倒计时炫丽效果

<!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ display: block; border: 1px solid #000; margin: 50px auto; } </style> </head> <body> <canvas class="canvas" id="canvas"

浅谈android中仅仅使用一个TextView实现高仿京东,淘宝各种倒计时

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

JS倒计时,不会重复执行

直接上代码,亲自测试了的,没问题咯 <html> <head> <title>点击获取验证码按钮后按钮变灰,倒计时一段时间后又可重复点击</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> </head> <body>

项目需求:自定义倒计时的TextView

现在这么一个需求: 我有一个ListView,每一个列表项 布局如上图,顶部一个大图片展示,中部一个音频播放,底部一个描述文字. 在这个界面,一次只能点击一个列表项的播放按钮,那么我直接在ListView所属的activity创建了唯一的一个MediaPlayer,然而,这不是问题,所有的音频方面的播放冲突都解决了 问题就在中部的音频播放,我需要点击左边的播放按钮,然后右边有一个剩余时间要跟随着变化,当然点击暂停的时候,剩余时间也要暂停 首先,这里运用了购物车功能的原理实现按钮的操作.Andro

WdatePicker设置时间与倒计时

之前苦于jQuery的datetimepicker插件不知道如何设置秒数,用了同学推荐的WdatePicker,真心好用. 相关文档用法可以上http://www.my97.net/dp/index.asp看详细介绍. 页面显示只需要<input type="text" id="datetimepicker1" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class=&quo

倒计时时间控件

在做一些电商或购物的app时,我们经常会看到倒计时抢购的标示,今天恰有时间把项目中用到的该控件提取出来,有需要的可以参考下 ====================================================================================================== 版权所有,如需转载请标明出处:http://blog.csdn.net/you4580 =========================================

PHP+HTML实现登出界面倒计时效果

在WAMP(Windows+Apache+MySQL+PHP)做网站时,通常需要使用Session记录表单登陆用户名和密码等变量,而在登出时需要清除Session.通常我想实现的登出是通过alert提示用户然后header跳转,但下面的代码是通过JavaScript实现的时间倒计时并跳转到主页的效果,主要是看到学校的BT网站等都是这个效果. PS:参考 C# 系统应用之Cookie\Session基础知识及php读取Cookie\Session 代码如下: <?php session_start

一个网页倒计时的实现

最近要做一个网站上的活动倒计时的功能.在网上搜了一下,网上关于js倒计时的代码倒是不少,但是正正可以应用到生产环境的则是少之又少. 比如我用到的这个就是这样的: var endDate=new Date(2014,7,25,23,59,59); var begin = new Date(); var intDiff=Math.round((endDate.getTime()-begin)/1000);//初始日期 function timer(intDiff){ window.setInterv

软考倒计时27天:信息系统集成专业技术知识

2014-04-27 14:09:38      多云          距软考还有27天!当一个人先从自己的内心开始奋斗,他就是个有价值的人. 1.信息系统集成的显著特点: 2.信息系统集成的分类 3.信息系统的生命周期: 4.信息系统的开发方法有哪些,各自的特点 5.软件需求的一个基本特征是:() 6.需求分析的目的 7.如何理解"高内聚,低耦合" 8.判断:软件测试是一种仅在编码阶段完成后才开始的活动. 9.软件测试在概念上区分为哪三类: 10.            软件维护的