目錄
前言
計時器中的代碼
version 1.0
version 2.0
version 3.0
總結
前言
作為前端小灰 (不懂 但又不 完全不懂) 的博主，無意間接觸到了番茄鐘這個東西，也剛好最近進軍JavaWeb階段，所以就想著試試看能不能做出來這個效果，咱就是說給自己加了點任務，就屬于這么一個大動作，
再透個底，雖說咱就是一個純純的小灰，但是前端的知識以前也都學過，由于年代太過久遠不提也罷，縱使歲月變遷，萬物更替，但還是有一些亙古不變的東西，就比如說——大一那時候學前端U盤存的一些小東西，最后找到了一個能夠跟本次需求稍微搭上邊的東西——計時器，
計時器中的代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var c = 0;
var t;
function new1() {
document.getElementById("tet").value = c;
c = c + 1;
t = setTimeout("new1()", 1000);
}
function haha() {
clearTimeout(t);
}
</script>
</head>
<body>
<input type="button" value="開始" onclick="new1()">
<input id="tet" type="text" value="0">
<input type="button" value="停止" onclick="haha()">
</body>
</html>version 1.0
實作程序：根據找到的計時器，先了解了一下基本的流程代碼，再結合流程控制陳述句，修改了JS中的代碼以及部分界面代碼，
實作困難：開始和結束按鈕功能系結到一起這個地方花費了一些時間，其他部分就沒啥困難了，
功能實作：這個版本主要實作了數字的基本控制和按鈕的功能實作，能夠使數字每隔1秒依次遞減，把開始和暫停的按鈕功能系結在了一起，結束按鈕的功能也得到了完善，
示例代碼：現在回想起來才意識到早就已經被覆寫了，那就沒得看咯，下次一定注意...
心得體會：果然，有Java基礎再學JS也就沒有那么難，寫起來還是比較得心應手，后面看代碼會發現除了一些固定的需求寫法之外，邏輯判斷咱還是更傾向于Java，還有就是實作程序中，覺得難以實作就把它拆分成一個個小的需求，做起來就沒那么困難了，
version 2.0
實作程序：在上一個版本的基礎上，定義了一個下拉串列供用戶選取時間，并更新了JS的代碼實作正確的時間流動展示，
實作困難：獲取下拉串列的時間值，能夠在下邊文本框正確顯示，不得不說這個需求確實是超綱了，怎么獲取到都不知道，但是在互聯網時代這都不是問題，所以，咱就請教了一位身邊的前端大佬才實作了這個功能，
功能實作：主要實作了用戶選取不同的時間后，在文本框正確顯示并根據按鈕功能正常執行，文本框依照時間的格式依次遞減，直到減到0為止就提示 時間到！
心得體會：你不得不承認的是，不是所有的東西你都會，需要不斷的學習才能完善自己，學習的途徑有很多，沒有人在意你走的哪一條路，大多數人只會看你的結果是好是壞，
version 3.0
實作程序：在上一個版本的基礎上，增加了界面元素，測驗了基本功能，感覺可以拉出來溜溜了，
實作困難：選擇時間后改變盒子屬性，這部分也是博主不會的地方，不知道該怎樣去獲取并改變兩個盒子的屬性值，再一次的請教了大佬后也就迎刃而解了，
溫馨提示：
- 本網頁實作使用的是IDEA軟體
- 自行運行使用效果更佳，圖片路徑要注意
圖片資源：
最終代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>番茄鐘</title> <style> /*兩個大盒子*/ .div_c { /*設定寬高*/ width: 98%; height: 700px; /*絕對定位，并居中盒子*/ position: absolute; left: 50%; top: 10px; margin-left: -49%; /*內容居中*/ text-align: center; } /*第一個大盒子*/ #d1 { /*設定背景圖*/ background: url("../img/bg_1.jpg") no-repeat center; /*設定垂直高度，用于顯示在最上層*/ z-index: 20; } /*第二個大盒子*/ #d2 { background: url("../img/bg_2.jpg") no-repeat center; z-index: 10; } /*第二個大盒子里面的小盒子*/ #d2_time { width: 500px; height: 400px; margin: 0 auto; text-align: center; background: url("../img/bg_b1.jpg") no-repeat center; } /*下拉串列*/ #time { width: auto; height: 26px; } /*顯示的文本框*/ #test { width: 160px; height: auto; font-size: 60px; font-family: 楷體; text-align: center; margin-top: 28%; margin-left: 12px; } </style> <script> //定義執行順序 window.addEventListener('load', function () { let minute; //分鐘數 let second = "00"; //毫秒值 /*獲取下拉串列的值*/ let inputs = document.getElementById('time'); inputs.oninput = function () { //獲取分鐘數 minute = inputs.value; //設定用于判斷用戶點擊次數的變數值 let n = 0; let t; //文本框賦初始值 document.getElementById("test").value = minute + ":" + second; //更改點擊后第一個大盒子的z-index let d1 = document.getElementById("d1"); let time = document.getElementById("time"); time.addEventListener("click", function () { if (inputs.value !== "") d1.style.zIndex = "0"; }); //運行 function run() { if (minute !== 0 || parseInt(second) !== 0) { if (parseInt(second) === 0) { minute--; second = 59; } document.getElementById("test").value = minute + ":" + second; second--; t = setTimeout(run, 1000); } else { document.write("時間到！") } } //停止 function stop() { clearTimeout(t); } /*點擊事件*/ let start_btn = document.querySelector('.start'); start_btn.addEventListener('click', function () { if (minute !== "") { n++; if (n % 2 === 1) run(); else stop(); } }) //結束 let end_btn = document.querySelector('.end'); end_btn.addEventListener('click', function () { //重繪頁面 location.reload(); //重置資料 clearTimeout(t); n = 0; document.getElementById("test").value = ""; }) } }) </script> </head> <body> <div id="d1" class="div_c"> <div style="margin-top: 130px"> <span style="font-size: 26px; color: wheat; font-family: 楷體"><b>請選擇你要設定的時間：</b></span> <select name="province" id="time"> <option value="">--請選擇--</option> <option value="10">10分鐘</option> <option value="30">30分鐘</option> <option value="40">40分鐘</option> <option value="60">60分鐘</option> </select><br/><br/> </div> </div> <div id="d2" class="div_c"> <div id="d2_time"> <input id="test" type="text"><br/><br/> <input type="button" value="開始/暫停" class="start"> <input type="button" value="結束" class="end"> </div> </div> </body> </html>實作效果：
總結
時間能夠讓人成就自我，也能讓人自甘墮落！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357002.html
標籤：其他
上一篇：配置開發環境和生產環境基礎地址