JQuery+H 5ページ複数カウントダウン処理方式
JQuery+H 5、1ページ複数のカウントダウン処理方式
最近プロジェクトをして、1つのH 5ページの中で複数のカウントダウンのいくつかの小さな問題に遭遇しました.
プロジェクトのh 5ページは、アンドロイドが持参したブラウザのみを実行する(微信ブラウザ、アップルの携帯ブラウザはこれらを考慮しない).h 5ページを実行する場合、カウントダウンは実行されますが、ブラウザをバックグラウンドで実行する(例えば、もともとブラウザを開いていたのに、一時的に他のアプリに切り替えた)操作に切り替えるとします.ブラウザに戻る前にカウントダウンは動かない(jsはバックグラウンドで実行されない)ため、中間に時間差があります.
切り替え後-切り替えの中間の時差を解決する必要があります.比較的便利な方法で、
効果を上げる
1ページに複数のカウントダウンが存在する場合、タイマは1つの配列で格納され、カウントダウンコードを直接貼り付ける必要があることに注意してください.
最近プロジェクトをして、1つのH 5ページの中で複数のカウントダウンのいくつかの小さな問題に遭遇しました.
プロジェクトのh 5ページは、アンドロイドが持参したブラウザのみを実行する(微信ブラウザ、アップルの携帯ブラウザはこれらを考慮しない).h 5ページを実行する場合、カウントダウンは実行されますが、ブラウザをバックグラウンドで実行する(例えば、もともとブラウザを開いていたのに、一時的に他のアプリに切り替えた)操作に切り替えるとします.ブラウザに戻る前にカウントダウンは動かない(jsはバックグラウンドで実行されない)ため、中間に時間差があります.
切り替え後-切り替えの中間の時差を解決する必要があります.比較的便利な方法で、
visibilitychangeページの可視性を使用してイベントを変更し、カウントダウン初期化コードを再実行します.document.addEventListener("visibilitychange", function() {
if(!document.hidden){
// , ， ：
init();
}
});
効果を上げる
1ページに複数のカウントダウンが存在する場合、タイマは1つの配列で格納され、カウントダウンコードを直接貼り付ける必要があることに注意してください.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=375, user-scalable=no, target-densitydpi=device-dpi ">
<title> </title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
ul{
display: flex;
}
ul li{
list-style:none;
text-align:center;
padding: 0px 3px;
}
.num{
width:180px;
margin: 50px auto;
}
.number-title{
text-align:center;
font-size:15px;
color: #333333;
font-weight: bold;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<div class="number-content">
<div class="number-title"> </div>
<div class="num" id="001" data-time='2020/05/27 00:00:00'>
<ul>
<li class="day">2</li>
<li> </li>
<li class="hour">12</li>
<li> </li>
<li class="minute">34</li>
<li> </li>
<li class="second">58</li>
<li> </li>
</ul>
</div>
<div class="num" id="002" data-time='2020/06/21 04:23:55'>
<ul>
<li class="day">3</li>
<li> </li>
<li class="hour">12</li>
<li> </li>
<li class="minute">34</li>
<li> </li>
<li class="second">58</li>
<li> </li>
</ul>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
var timerArr = []; //
var currentDate = '';
var time = 0;
//
document.addEventListener("visibilitychange", function() {
if(!document.hidden){
initNumber();
}
});
$(function(){
//
initNumber();
}
)
function initNumber(){
var num = $('.number-content').find('.num');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
//
currentDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
var curtime = new Date(currentDate).getTime();
num.each(function() {
var _this = $(this);
var dataTime = $(this).attr('data-time');
var endTime = new Date(dataTime).getTime();
time = (endTime - curtime) / 1000;
setTimer(_this,time)
});
}
function setTimer(_this,time){
var timer = $(_this).attr('id');
clearTimeout(timerArr[timer]);
if(time > 0){
timerArr[timer] = setTimeout(function() {
setTimer(_this,time - 1);
}, 1000)
// 、 、 、
let day = parseInt(time / (60 * 60 * 24));
let hour = parseInt(time % (60 * 60 * 24) / 3600);
let minute = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let second = parseInt(time % (60 * 60 * 24) % 3600 % 60);
if($(_this).find('.day').html() != day){
$(_this).find('.day').html(day);
}
if($(_this).find('.hour').html() != hour){
$(_this).find('.hour').html(hour);
}
if($(_this).find('.minute').html() != minute){
$(_this).find('.minute').html(minute);
}
$(_this).find('.second').html(second);
} else {
$(_this).find('.day').html('0');
$(_this).find('.hour').html('0');
$(_this).find('.minute').html('0');
$(_this).find('.second').html('0');
clearTimeout(timerArr[timer]);
}
}
</script>
</body>
</html>