一、开关与切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="jQuery351.js"></script> <style> #d1 { width: 100px; height: 100px; border-radius: 50%; border: orange 5px solid; } .c1 { background: green; } </style> </head> <body> <div id="d1"></div> <hr> <button id="on">打开</button> <button id="off">关闭</button> <button id="reverse"> 切换</button> <script> let d1Ele = document.getElementById('d1') let onEle = document.getElementById('on') let offEle = document.getElementById('off') let reverseEle = document.getElementById('reverse') onEle.onclick = function () { d1Ele.style.background = 'green' } offEle.onclick = function () { d1Ele.style.background = '' } reverseEle.onclick = function () { d1Ele.classList.toggle('c1') } </script> </body> </html>
二、获取焦点前后状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="jQuery351.js"></script> </head> <body> <input type="text" value="快来点这里" id="d1"> <script> let inputEle = document.getElementById('d1') inputEle.onfocus = function () { inputEle.value = '' inputEle.style.background = 'darkgrey' } inputEle.onblur = function () { inputEle.value = '这就走了？' inputEle.style.background = '' } </script> </body> </html>
三、开关时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="jQuery351.js"></script> <style> #now { border: orange 5px solid; } </style> </head> <body> 现在时间：<span id="now">时钟未开启</span> <hr> <button id="on">开启时钟</button> <button id="off">关闭时钟</button> <script> let timer = null let nowEle = document.getElementById('now') let onEle = document.getElementById('on') let offEle = document.getElementById('off') function show_now() { let dateEle = new Date() nowEle.innerText = `${dateEle.toLocaleString()}` } onEle.onclick = function () { if(timer === null) { timer = setInterval(show_now, 1000) } } offEle.onclick = function () { clearInterval(timer) timer = null nowEle.innerText = '时钟未开启' } </script> </body> </html>
四、省市联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="jQuery351.js"></script> </head> <body> <select name="" id="province"> <option value="" selected disabled>--请拉下选择省份--</option> </select> <select name="" id="city"> <option value="" selected disabled id="tip">--请拉下选择城市--</option> </select> <script> let provinceEle = document.getElementById('province') let cityEle = document.getElementById('city') let tipEle = document.getElementById('tip') let options = { '上海':['虹桥区', '宝山区', '普陀区'], '北京':['朝阳区', '海淀区', '昌平区'] } for (let x in options) { let optEle = document.createElement('option') optEle.innerText = x optEle.value = x provinceEle.appendChild(optEle) } provinceEle.onchange = function () { let now_province = provinceEle.value let now_city_list = options[now_province] cityEle.innerHTML = '' cityEle.appendChild(tipEle) for (let n = 0; n <now_city_list.length; n++){ let now_city = now_city_list[n] let optEle = document.createElement('option') optEle.innerText = now_city optEle.value = now_city cityEle.append(optEle) } } </script> </body> </html>