資訊專欄INFORMATION COLUMN
摘要：游戲按鈕原生實現(xiàn)游戲的開始暫停結(jié)束實現(xiàn)使用實現(xiàn)實現(xiàn)步驟獲取元素開始事件停止事件暫停事件定時器效果演示代碼按鈕動畫樣式輸入游戲總時長分鐘倒計時秒開始暫停結(jié)束有加入一丟丟的動畫代碼獲取元素總時長剩余時長點開始按鈕時間戳
游戲按鈕
原生js實現(xiàn)游戲的‘開始’‘暫停’‘結(jié)束’
實現(xiàn)：使用setInterval實現(xiàn)
js實現(xiàn)步驟：獲取元素
開始事件
停止事件
暫停事件
定時器
效果演示： html代碼
按鈕
分鐘
倒計時：秒
有加入一丟丟c3的動畫
js代碼window.onload = function(){
// 1.獲取元素
var endTimeStr = document.getElementsByClassName("endTime")[0];
var timeVal = document.getElementsByTagName("input")[0];
var startBtn = document.getElementsByClassName("start")[0];
var pauseBtn = document.getElementsByClassName("pause")[0];
var stopBtn = document.getElementsByClassName("stop")[0];
var totalTime, //總時長
showTime,//剩余時長
startTime, //點開始按鈕時間戳
nowTime,//定時器開啟的時間戳
timer;
var timeType = 1; //1結(jié)束后開始 2暫停后開始
// 2.開始事件
startBtn.onclick = function(){
if(timer) clearInterval(timer);
if(timeType==1)totalTime = timeVal.value*60; //初始化總時長
startTime = new Date(); //點擊按鈕開始時間
startBtn.disabled = true;
start();
}
// 3.停止事件
stopBtn.onclick = function(){
clearInterval(timer)
timeType = 1;
showTime = timeVal.value*60; //剩余時長
endTimeStr.innerHTML = showTime;
startBtn.disabled = false;
}
// 4.暫停事件
pauseBtn.onclick = function(){
clearInterval(timer)
timeType = 2;
startBtn.disabled = false;
totalTime = showTime; //總時長==剩余時長
}
/*
定時器
*/
function start(){
nowTime = new Date();//定時器開始時間
showTime = totalTime-parseInt((nowTime-startTime)/1000);
endTimeStr.innerHTML = showTime;
timer = setInterval(function(){
showTime--;
endTimeStr.innerHTML = showTime;
if(showTime<1){
clearInterval(timer)
alert("游戲結(jié)束");
}
},100);
}
}
代碼復(fù)制可直接查看效果
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104457.html
摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/L...
摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/L...
摘要：本項目將設(shè)計一個多選一的交互場景，用進(jìn)行頁面布局用制作動畫效果用原生編寫程序邏輯。中包含個展示頭像的和個標(biāo)明當(dāng)前被選中頭像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehope/pen/L...
摘要：今天我們分享的菜鳥文檔將介紹微信小游戲好友排行榜的制作過程，包括創(chuàng)建項目并發(fā)布微信開發(fā)者平臺添加小游戲打開開放域功能主域和開放域通訊，以及與原生的布局。 寫在前面：隨著越來越多的新人開始接觸白鷺引擎，創(chuàng)作屬于自己的游戲?？紤]到初學(xué)者會遇到一些實際操作問題，我們近期整理推出菜鳥系列技術(shù)文檔，以便更好的讓這些開發(fā)者們快速上手，Egret大神們可以自動忽略此類內(nèi)容。 今天我們分享的菜鳥文檔將...
閱讀 1286·2021-11-24 09:39
閱讀 2206·2021-11-22 13:54
閱讀 2254·2021-09-08 10:45
閱讀 1525·2021-08-09 13:43
閱讀 3041·2019-08-30 15:52
閱讀 3166·2019-08-29 15:38
閱讀 2902·2019-08-26 13:44
閱讀 3113·2019-08-26 13:30
