-
计时器
打开HTML显示如下：
点击开始后text栏会实时显示当前时间：
点击停止后时间会停止，不再继续实时显示；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <label> <input type="text" id="text"> </label> <label> <input type="button" value="开始" id="beginButton"> </label> <label> <input type="button" value="停止" id="overButton"> </label> </form> <script> var beginButton = document.getElementById('beginButton'); var overButton = document.getElementById('overButton'); var intervalObj beginButton.onclick = function () { dateObj = new Date(); dateString = dateObj.toLocaleString(); var text = document.getElementById('text'); text.setAttribute("value", dateString); intervalObj = setInterval(function (){ dateObj = new Date(); dateString = dateObj.toLocaleString(); var text = document.getElementById('text'); text.setAttribute("value", dateString); }, 1000); } overButton.onclick = function () { clearInterval(intervalObj); } </script> </body> </html> -
地名下拉菜单
打开HTML显示如下：
当未选择省份时，市下拉菜单无任何元素，当选择省后拉开第二个下拉菜单可以显示该省对应的市：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <label> <select id="province" class="province"> <option value="default">请选择省</option> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="shanghai">上海</option> </select> <select id="default" class="city"> <option value="0000">请选择市</option> </select> <select id="beijing" style="display: none"> <option value="0000">请选择市</option> <option value="0101">东城区</option> <option value="0102">朝阳区</option> <option value="0103">丰台区</option> </select> <select id="tianjin" style="display: none"> <option value="0000">请选择市</option> <option value="0201">河西区</option> <option value="0202">南开区</option> <option value="0203">和平区</option> <option value="0204">滨海新区</option> </select> <select id="shanghai" style="display: none"> <option value="0000">请选择市</option> <option value="0301">黄浦区</option> <option value="0302">徐汇区</option> <option value="0303">浦东新区</option> </select> </label> </form> <script> provinceList = ['default', 'beijing', 'tianjin', 'shanghai']; var provinceObj = document.getElementsByClassName('province')[0]; var displayCityObj = document.getElementById('default'); provinceObj.onchange = function () { for (i in provinceList) { console.log(provinceList[i]); if (provinceObj.value === provinceList[i]) { var cityObj = document.getElementById(provinceObj.value); console.log(cityObj); cityObj.removeAttribute('style'); console.log('hahah'); displayCityObj.style.display = 'none'; displayCityObj = cityObj; break; } } } </script> </body> </html>