您的位置：首页 > Web前端 > HTML5

h5页面计时活动

2017-12-22 14:07 92 查看

移动端倒计时活动，拖动页面或锁屏会发现倒计时失效(测试有问题的手机iphone中的UC浏览器，小辣椒内置浏览器其它未知)，解决方法可考虑使用 web worker。

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

counter.js

self.onmessage = function(evt){
var counter= evt.data;
var timer = setInterval(function(){
self.postMessage(--counter);
if(counter<= 0){
clearInterval(timer );
self.close();
}
}, 1000);
}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>倒计时</title>
</head>
<body>
<div id="num">60</div>
<script>
var num = document.getElementById('num');
var worker = new Worker('counter.js');
worker.postMessage(60);
worker.onmessage = function(event){
num.innerHTML = event.data;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航