<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .container { width: 300px; height: 100px; margin: 0 auto; background-color: pink; border: 2px solid #808080; display: block; padding: 50px; } .box { display: inline-block; text-align: center; color: cornflowerblue; font-size: 50px; } .time { display: inline-block; width: 100px; margin: 0 auto; text-align: center; color: cornflowerblue; font-size: 30px; margin-top: 10px; } .fl { float: left; } .fr { float: right; } .set { width: 260px; color: gray; margin-top: 80px; } .container input { width: 60px; padding: 4px 8px; background-color: rgba(246, 192, 242, 0.7); outline: none; } .container button { margin-top: 6px; background-color: pink; display: inline-block; } </style> </head> <body> <div class="container"> <div class="box fl"> </div> <div class="time fl"> </div> <div class="clear"></div> <div class="set"> <input type="text" name="hour" id="hour" value="" placeholder="时" /> <input type="text" name="min" id="min" value="" placeholder="分" /> <input type="text" name="sec" id="sec" value="" placeholder="秒" /> <button class="fr" type="button" id="btn">设置</button> <div class="clear"></div> </div> </div> <script type="text/javascript"> //获取元素 var oBox = document.querySelector(".box"); var oTime = document.querySelector(".time"); var oHour = document.getElementById("hour"); var oMin = document.getElementById("min"); var oSec = document.getElementById("sec"); var oBtn = document.getElementById("btn"); var h; var m; var s; //设置定时器 var timer; timer = setInterval(function() { clock(); }, 500) function clock() { var oDate = new Date(); var hour = oDate.getHours(); var minute = oDate.getMinutes(); var second = oDate.getSeconds(); if(hour >= 12) { oTime.innerText = 'pm'; if(hour > 13) { hour = hour - 12; } } else { oTime.innerText = "am"; } //修改时分秒的格式 if(hour < 10) { hour = '0' + hour; } if(minute < 10) { minute = '0' + minute; } if(second < 10) { second = '0' + second; } //修改innertext oBox.innerText = hour + ":" + minute + ":" + second; oBtn.onclick = function() { //获取value值 h = oHour.value; m = oMin.value; s = oSec.value; } if((hour == h) && (minute == m) && (second == s)) { alert("闹钟响了！"); oHour.value = ''; oMin.value = ''; oSec.value = ''; } } clock(); </script> </body> </html>