h5页面计时器

小鱼儿 2023-10-18 09:22 55阅读 0赞

#### h5页面计时器 ####

*  效果
 *  代码

## 效果 ##

![在这里插入图片描述][70]

## 代码 ##

<script>
    		function countTime(){
    			var endDateStr="2018-09-29 15:00:00";
    			var date = new Date();
    			var now = date.getTime();
    			var endDate = new Date(endDateStr);
    			var end = endDate.getTime();
    			var leftTime = end-now;
    			var d,h,m,s;
    			var days,hours,minutes,seconds;
    			var str = '';
    			if (leftTime>0) {
    				d = parseInt(leftTime/1000/60/60/24, 10); //剩余天数
    				h = parseInt(leftTime/1000/60/60%24, 10); //剩余小时数
    				m = parseInt(leftTime/1000/60%60, 10); //剩余分钟数
    				s = parseInt(leftTime/1000%60, 10); //剩余秒数
    				days = checkTime(d);
    				hours = checkTime(h);
    				minutes = checkTime(m);
    				seconds = checkTime(s);
    				if (d>0) {
    					str = days+'天'+hours+'小时'+minutes+'分'+seconds+'秒';
    				}else if (h>0) {
    					str = hours+'小时'+minutes+'分'+seconds+'秒';
    				}else if (m>0) {
    					str = minutes+'分钟'+' : '+seconds+'秒';
    				}else if (s>0) {
    					str = seconds+'秒';
    				}
    				document.getElementById('timer').innerHTML = str;
    				setTimeout('countTime()',1000);
    			}else{
    				clearTimeout(countTime);
    			}		
    		}
    		function checkTime(i){
    			if (i>0 && i<10) {
    				i = '0'+i;
    			}
    			return i;
    		}
    		countTime();
    	</script>

[70]: https://img-blog.csdn.net/20180929141538403?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2NTcwNjA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

发表评论取消回复

表情：

评论列表（有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5页面计时器

h5页面计时器效果代码效果 ![在这里插入图片描述][70] 代码 <script> function countT

小鱼儿/ 2023年10月18日 09:22/ 0 赞/ 56 阅读

相关 H5静态页面的发布

一、下载node.js并安装。 https://nodejs.org/en/ 二、在服务器任意目录执行全局安装anywhere： npm i -g anywher

ゝ一纸荒年。/ 2022年10月12日 01:32/ 0 赞/ 210 阅读

相关 H5 页面写法

1.引入阿里巴巴移动终端框架 flexable.js 2.引入 base.css 3. 使用rem 单位 base.css: html,body,div,

柔光的暖阳◎/ 2022年09月28日 11:37/ 0 赞/ 229 阅读

相关 H5编写页面初探

学过js、css和html后，总期望有一次实践的机会，本次通过实践H5页面编写，深深体会到前台开发的不易，学习必须要引用到实践中才能暴露问题呢！

忘是亡心i/ 2022年08月20日 13:06/ 0 赞/ 230 阅读

相关 h5页面测试

1. 工具 : 草料二维码当我们写了一个h5页面时,在谷歌浏览器上显示正常，这时我们想在手机上模拟，这时我们可以利用草料二维码. 1.百度草料二维码打开官网，

野性酷女/ 2022年06月16日 08:21/ 0 赞/ 302 阅读

相关 h5页面禁止放大

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=

﹏ヽ暗。殇╰゛Y/ 2022年03月26日 09:28/ 0 赞/ 286 阅读

相关 h5在线对话页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

短命女/ 2022年02月16日 15:06/ 0 赞/ 294 阅读

相关 h5计时器（requestAnimationFrame）

> 上次写节拍器的时候用到了h5计时器，但只是简单的记录了一点，今天特在此总结一下。 <!DOCTYPE html> <html> <head lan

今天药忘吃喽~/ 2022年01月26日 01:31/ 0 赞/ 441 阅读

相关手机上调试H5页面

1.在h5页面中引入js文件 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><

超、凢脫俗/ 2021年08月27日 19:50/ 0 赞/ 565 阅读

相关不懂代码如何制作h5页面？H5页面制作平台推荐

不懂代码如何制作h5页面？H5页面制作平台推荐 Maka Maka是一款简单但是功能相对强大的在线H5制作工具，打开MAKA在线编辑器，对选定的精美模板进行替换或修改，鼠...

灰太狼/ 2020年06月08日 17:00/ 0 赞/ 926 阅读