十五烟具、焦點(diǎn)事件&鍵盤(pán)事件
?1. 焦點(diǎn)事件
onfocus =>獲得焦點(diǎn)事件? ? ? ? ?onblur=>失去焦點(diǎn)事件
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>焦點(diǎn)事件</title>
? ? <style>
? ? ? ? input{
? ? ? ? ? ? outline: none;
? ? ? ? }
? ? ? ? /* 偽類選擇器:focus梢什，表示獲得焦點(diǎn)樣式 */
? ? ? ? /* input:focus{
? ? ? ? ? ? background-color: lightblue;
? ? ? ? ? ? border: 2px solid red;
? ? ? ? } */
? ? </style>
</head>
<body>
? ? <div>
? ? ? ? <span>賬號(hào):</span>
? ? ? ? <input type="text" placeholder="請(qǐng)輸入賬號(hào)">
? ? </div>
? ? <div>
? ? ? ? <span>密碼:</span>
? ? ? ? <input type="password" placeholder="請(qǐng)輸入密碼">
? ? </div>
? ? <script>
? ? ? ? let inputs = document.querySelectorAll('input')
? ? ? ? inputs.forEach(r=>{
? ? ? ? ? ? // 備份文本框的placeholder
? ? ? ? ? ? let placeholder = r.placeholder
? ? ? ? ? ? //獲取焦點(diǎn)事件
? ? ? ? ? ? r.onfocus = function(){
? ? ? ? ? ? ? ? // 文本框的placeholder設(shè)置空
? ? ? ? ? ? ? ? r.placeholder = ''
? ? ? ? ? ? }
? ? ? ? ? ? //失去焦點(diǎn)事件
? ? ? ? ? ? r.onblur = function(){
? ? ? ? ? ? ? ? // 文本框的placeholder恢復(fù)
? ? ? ? ? ? ? ? r.placeholder = placeholder
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
網(wǎng)頁(yè)顯示為：
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>焦點(diǎn)事件練習(xí)</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .txt{
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? margin: 10px;
? ? ? ? ? ? padding: 6px;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? }
? ? ? ? .txt input{
? ? ? ? ? ? outline: none;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? border: none;
? ? ? ? }
? ? ? ? .txt input.border{
? ? ? ? ? ? border-bottom: 1px solid #eee;
? ? ? ? }
? ? ? ? .txt ul{
? ? ? ? ? ? margin-top: 5px;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="txt">
? ? ? ? <input type="text" id="search">
? ? ? ? <ul id="list">
? ? ? ? ? ? <li>卡布奇洛</li>
? ? ? ? ? ? <li>巧克力</li>
? ? ? ? ? ? <li>咖啡</li>
? ? ? ? ? ? <li>蛋糕</li>
? ? ? ? ? ? <li>餅干</li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? // 獲取列表
? ? ? ? let list = document.querySelector('#list')
? ? ? ? // 獲取搜索框
? ? ? ? let search = document.querySelector('#search')
? ? ? ? // 獲得焦點(diǎn)事件
? ? ? ? search.onfocus = function(){
? ? ? ? ? ? search.classList.add('border')
? ? ? ? ? ? list.style.display = 'block'
? ? ? ? }
? ? ? ? // 失去焦點(diǎn)事件
? ? ? ? search.onblur = function(){
? ? ? ? ? ? search.classList.remove('border')
? ? ? ? ? ? list.style.display = 'none'
? ? ? ? }
? ? </script>
</body>
</html>
網(wǎng)頁(yè)顯示為：
(1).拖動(dòng)框效果
dom.offsetLeft =>獲取元素的默認(rèn)左邊距dom.offsetTop =>獲取元素的默認(rèn)上邊距
window.innerWidth=>視口寬度? ? ? window.innerHeight=> 視口高度
dom.offsetWidth =>獲取元素可見(jiàn)寬度(width+border+padding)
dom.offsetHeight => 獲取元素可見(jiàn)高度(height+border+padding)
e.pageX=>鼠標(biāo)指針到X軸坐標(biāo)e.pageY=>鼠標(biāo)指針到Y(jié)軸坐標(biāo)
<!DOCTYPE html>
<html>
<head>
? ? <meta>
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>拖動(dòng)框效果(在一個(gè)范圍內(nèi))</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .main{
? ? ? ? ? ? /* 相對(duì)定位 */
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? border: 10px solid red;
? ? ? ? ? ? margin: 20px;
? ? ? ? }
? ? ? ? .box {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? /* 絕對(duì)定位 */
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 100px;
? ? ? ? ? ? left: 100px;
? ? ? ? }
? ? ? ? .box .title {
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: lightseagreen;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? padding-left: 10px;
? ? ? ? }
? ? ? ? .box .title .close {
? ? ? ? ? ? width: 24px;
? ? ? ? ? ? height: 24px;
? ? ? ? ? ? line-height: 24px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? background-color: lightcoral;
? ? ? ? ? ? color: white;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 3px;
? ? ? ? ? ? top: 3px;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="main">
? ? ? ? <div class="box">
? ? ? ? ? ? <div class="title">
? ? ? ? ? ? ? ? 我是標(biāo)題
? ? ? ? ? ? ? ? <div class="close">X</div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? // 獲取main
? ? ? ? let main = document.querySelector('.main')
? ? ? ? //獲取box
? ? ? ? let box = document.querySelector('.box')
? ? ? ? // offsetWidth返回元素的可見(jiàn)寬度
? ? ? ? // console.log(main.offsetWidth);
? ? ? ? // clientWidth返回元素的可用寬度
? ? ? ? // console.log(main.clientWidth);
? ? ? ? // offsetLeft返回元素到左外邊距
? ? ? ? // console.log(main.offsetLeft);
? ? ? ? // 計(jì)算出左外邊距
? ? ? ? let mleft = (main.offsetWidth-main.clientWidth)/2 + main.offsetLeft
? ? ? ? //獲取title
? ? ? ? let title = document.querySelector('.title')
? ? ? ? //獲取close
? ? ? ? let close1 = document.querySelector('.close')
? ? ? ? //關(guān)閉按鈕點(diǎn)擊事件
? ? ? ? close1.onmousedown = function (e) {
? ? ? ? ? ? // 阻止事件冒泡
? ? ? ? ? ? // e.stopPropagation();
? ? ? ? ? ? box.style.display = 'none'
? ? ? ? }
? ? ? ? let isdown = false? //表示鼠標(biāo)是按下
? ? ? ? let offX = 0? ? //鼠標(biāo)到容器的左邊距
? ? ? ? let offY = 0? ? //鼠標(biāo)到容器的上邊距
? ? ? ? let maxLeft = main.clientWidth - box.offsetWidth? //最大左右移動(dòng)距離
? ? ? ? let maxTop = main.clientHeight - box.offsetHeight? //最大上下移動(dòng)距離
? ? ? ? //標(biāo)題鼠標(biāo)按下事件
? ? ? ? title.onmousedown = function (e) {
? ? ? ? ? ? // pageX,pageY 是點(diǎn)擊處距離視口(0,0)坐標(biāo)的距離
? ? ? ? ? ? // offsetX,offsetY 是點(diǎn)擊處距離當(dāng)前容器的距離
? ? ? ? ? ? let { offsetX, offsetY } = e
? ? ? ? ? ? offX = offsetX
? ? ? ? ? ? offY = offsetY
? ? ? ? ? ? //鼠標(biāo)按下
? ? ? ? ? ? isdown = true
? ? ? ? }
? ? ? ? //窗口鼠標(biāo)移動(dòng)事件（注意：該事件給window）
? ? ? ? window.onmousemove = function (e) {
? ? ? ? ? ? // 阻止默認(rèn)行為，防止拖動(dòng)的是文字
? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? if (isdown) {
? ? ? ? ? ? ? ? let { pageX, pageY } = e
? ? ? ? ? ? ? ? let left = pageX-mleft-offX? //計(jì)算出left值
? ? ? ? ? ? ? ? let top = pageY-mleft-offY? //計(jì)算出top值
? ? ? ? ? ? ? ? // 判斷l(xiāng)eft值
? ? ? ? ? ? ? ? if(left<0) left = 0
? ? ? ? ? ? ? ? else if(left>maxLeft) left = maxLeft
? ? ? ? ? ? ? ? // 判斷top值
? ? ? ? ? ? ? ? if(top<0) top = 0
? ? ? ? ? ? ? ? else if(top>maxTop) top = maxTop
? ? ? ? ? ? ? ? box.style.left = left +'px'
? ? ? ? ? ? ? ? box.style.top = top +'px'
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //窗口鼠標(biāo)彈起事件（注意：該事件給window）
? ? ? ? window.onmouseup = function () {
? ? ? ? ? ? //鼠標(biāo)彈起
? ? ? ? ? ? isdown = false
? ? ? ? }
? ? ? ? //窗口失去焦點(diǎn)事件（注意：該事件給window）
? ? ? ? window.onblur = function(){
? ? ? ? ? ? //鼠標(biāo)彈起
? ? ? ? ? ? isdown = false
? ? ? ? }
? ? </script>
</body>
</html>
網(wǎng)頁(yè)顯示為：
(2).右鍵菜單
e.target=>獲取具體的元素? ?
e.preventDefault()=>阻止默認(rèn)行為? ? 比如：阻止超鏈接跳轉(zhuǎn)朝聋，阻止右鍵點(diǎn)擊事件
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>右鍵菜單</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .main{
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? border: 10px solid red;
? ? ? ? ? ? margin: 10px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .menu{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? background-color: lightblue;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? /* 隱藏并占空間 */
? ? ? ? ? ? visibility: hidden;
? ? ? ? }
? ? ? ? .menu li{
? ? ? ? ? ? line-height: 24px;
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="main">
? ? ? ? <ul class="menu">
? ? ? ? ? ? <li>添加學(xué)生</li>
? ? ? ? ? ? <li>查詢學(xué)生</li>
? ? ? ? ? ? <li>修改學(xué)生</li>
? ? ? ? ? ? <li>刪除學(xué)生</li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? let main = document.querySelector('.main')
? ? ? ? let menu = document.querySelector('.menu')
? ? ? ? // 算出菜單的最大left
? ? ? ? let maxLeft = main.clientWidth - menu.offsetWidth
? ? ? ? console.log(maxLeft);
? ? ? ? // 算出菜單的最大top
? ? ? ? let maxTop = main.clientHeight - menu.offsetHeight
? ? ? ? // 容器的右鍵點(diǎn)擊事件
? ? ? ? main.oncontextmenu = function(e){
? ? ? ? ? ? //獲取鼠標(biāo)指針容器里面的位置
? ? ? ? ? ? let {offsetX,offsetY} = e
? ? ? ? ? ? // 阻止默認(rèn)行為
? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? menu.style.visibility = 'visible'
? ? ? ? ? ? //left不能越界
? ? ? ? ? ? if(offsetX>maxLeft) offsetX = maxLeft
? ? ? ? ? ? //top不能越界
? ? ? ? ? ? if(offsetY>maxTop) offsetY = maxTop
? ? ? ? ? ? menu.style.left = offsetX+'px'
? ? ? ? ? ? menu.style.top = offsetY+'px'
? ? ? ? }
? ? ? ? // 容器的點(diǎn)擊事件
? ? ? ? main.onclick = function(){
? ? ? ? ? ? menu.style.visibility = 'hidden'
? ? ? ? }
? ? ? ? //給所有的li注冊(cè)點(diǎn)擊事件
? ? ? ? document.querySelectorAll('li').forEach(r=>{
? ? ? ? ? ? r.onclick = function(){
? ? ? ? ? ? ? ? alert('執(zhí)行'+r.innerHTML)
? ? ? ? ? ? ? ? menu.style.visibility = 'hidden'
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
網(wǎng)頁(yè)顯示為：
(3).選項(xiàng)卡
classList.remove() => 移除樣式? ? ? ? ? classList.add() => 添加樣式
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>選項(xiàng)卡效果</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .box{
? ? ? ? ? ? width:500px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? margin: 10px;
? ? ? ? }
? ? ? ? .titles{
? ? ? ? ? ? display: flex;
? ? ? ? }
? ? ? ? .titles li{
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? padding: 2px 10px;
? ? ? ? ? ? margin-right: 4px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .titles li.active{
? ? ? ? ? ? background-color: lightcoral;
? ? ? ? ? ? color: white;
? ? ? ? }
? ? ? ? .contents{
? ? ? ? ? ? margin-top: 5px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? padding: 5px;
? ? ? ? }
? ? ? ? .contents li{
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? .contents li.show{
? ? ? ? ? ? display: block;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="box">
? ? ? ? <ul class="titles">
? ? ? ? ? ? <li class="active">奔馳</li>
? ? ? ? ? ? <li>寶馬</li>
? ? ? ? ? ? <li>奧迪</li>
? ? ? ? ? ? <li>大眾</li>
? ? ? ? </ul>
? ? ? ? <ul class="contents">
? ? ? ? ? ? <li class="show">
? ? ? ? ? ? ? ? 梅賽德斯-奔馳（Mercedes-Benz）是世界聞名的豪華汽車品牌嗡午。1886年1月，
? ? ? ? ? ? ? ? 卡爾·本茨發(fā)明了世界上第一輛三輪汽車冀痕，獲得專利（專利號(hào)：DRP 37435 [1]? ）荔睹，
? ? ? ? ? ? ? ? 被譽(yù)為“汽車的發(fā)明者”。與此同時(shí)言蛇，奔馳的另一位創(chuàng)始人戈特利布·戴姆勒發(fā)明了世界上第一輛四輪汽車僻他。
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? 寶馬（BMW），中文全稱為巴伐利亞發(fā)動(dòng)機(jī)制造廠股份有限公司腊尚，德國(guó)汽車品牌吨拗，
? ? ? ? ? ? ? ? 寶馬的車系有i、X婿斥、Z劝篷、純數(shù)字4個(gè)車型，1民宿、2娇妓、3、4勘高、5峡蟋、6、7华望、8等幾個(gè)系列蕊蝗，
? ? ? ? ? ? ? ? 還有在各系基礎(chǔ)上進(jìn)行改進(jìn)的M系（寶馬官方的高性能改裝部門），寶馬公司創(chuàng)建于1916年赖舟，
? ? ? ? ? ? ? ? 總部設(shè)在德國(guó)巴伐利亞州慕尼黑蓬戚，BMW的藍(lán)白標(biāo)志寶馬總部所在地巴伐利亞州州旗的顏色
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? 德國(guó)豪華汽車品牌，其標(biāo)志為四個(gè)圓環(huán)相扣”鲎ィ現(xiàn)為德國(guó)大眾汽車公司的子公司子漩。
? ? ? ? ? ? ? ? 2018年12月20日，2018世界品牌500強(qiáng)排行榜發(fā)布石洗，奧迪位列51位幢泼。 [2]?
? ? ? ? ? ? ? ? 2019年10月，Interbrand發(fā)布的全球品牌百?gòu)?qiáng)榜排名42讲衫。
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? 大眾汽車（德語(yǔ)：Volkswagen）是一家總部位于德國(guó)沃爾夫斯堡的汽車制造公司缕棵，
? ? ? ? ? ? ? ? 也是世界四大汽車生產(chǎn)商之一的大眾集團(tuán)的核心企業(yè)。
? ? ? ? ? ? ? ? 2019年位居《財(cái)富》世界500強(qiáng)第9位。
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? // 獲取所有的titles
? ? ? ? let titles = document.querySelectorAll('.titles li')
? ? ? ? // 獲取所有的contents
? ? ? ? let contents = document.querySelectorAll('.contents li')
? ? ? ? // titles注冊(cè)點(diǎn)擊事件
? ? ? ? titles.forEach((r,i)=>{
? ? ? ? ? ? r.onclick = function(){
? ? ? ? ? ? ? ? //移除當(dāng)前高亮樣式
? ? ? ? ? ? ? ? document.querySelector('.titles li.active').classList.remove('active')
? ? ? ? ? ? ? ? //切換高亮
? ? ? ? ? ? ? ? r.classList.add('active')
? ? ? ? ? ? ? ? //隱藏當(dāng)前顯示內(nèi)容
? ? ? ? ? ? ? ? document.querySelector('.contents li.show').classList.remove('show')
? ? ? ? ? ? ? ? //切換顯示
? ? ? ? ? ? ? ? contents[i].classList.add('show')
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
網(wǎng)頁(yè)顯示為：
2. 鍵盤(pán)事件
onkeydown =>?按鍵按下事件? ? ? ? ? ? ? ? ?onkeypress => 按鍵產(chǎn)生字符事件
onkeyup =>按鍵彈起事件e.keyCode => 返回按鍵碼
注意：注冊(cè)事件時(shí)要加on招驴，觸發(fā)時(shí)不需要on
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>鍵盤(pán)事件</title>
</head>
<body>
? ? <div>
? ? ? ? <span>請(qǐng)輸入搜索內(nèi)容：</span>
? ? ? ? <input type="text" id="txt">
? ? ? ? <button id="btn">搜索</button>
? ? </div>
? ? <script>
? ? ? ? // 獲取文本框
? ? ? ? let txt = document.querySelector('#txt')
? ? ? ? // 獲取按鈕
? ? ? ? let btn = document.querySelector('#btn')
? ? ? ? //搜索按鈕注冊(cè)點(diǎn)擊事件
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? alert('正在搜索'+txt.value)
? ? ? ? }
? ? ? ? // 鍵盤(pán)按下事件
? ? ? ? txt.onkeydown = function(){
? ? ? ? ? ? console.log('鍵盤(pán)按下');
? ? ? ? }
? ? ? ? // 鍵盤(pán)產(chǎn)生字符
? ? ? ? txt.onkeypress = function(){
? ? ? ? ? ? console.log('按鍵產(chǎn)生字符');
? ? ? ? }
? ? ? ? // 鍵盤(pán)彈起事件
? ? ? ? txt.onkeyup = function(e){
? ? ? ? ? ? console.log('鍵盤(pán)彈起');
? ? ? ? ? ? //獲取鍵盤(pán)編碼
? ? ? ? ? ? let {keyCode} = e
? ? ? ? ? ? //判斷是否是回車鍵
? ? ? ? ? ? if(keyCode===13){
? ? ? ? ? ? ? ? // onclick屬性用于注冊(cè)事件
? ? ? ? ? ? ? ? // click()方法用于執(zhí)行事件
? ? ? ? ? ? ? ? btn.click()
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
網(wǎng)頁(yè)與控制臺(tái)顯示為：
(1).打字游戲
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>打字游戲</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .content {
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .content .zm {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? background-color: chartreuse;
? ? ? ? ? ? color: white;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? .msg {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? line-height: 200px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? background-color: thistle;
? ? ? ? ? ? font-size: 22px;
? ? ? ? ? ? color: blue;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="content">
? ? ? ? <div class="msg">
? ? ? ? ? ? 按回車鍵開(kāi)始/空格暫停/ESC重新開(kāi)始
? ? ? ? </div>
? ? </div>
? ? <script>
? ? ? ? //定義一個(gè)字母文本
? ? ? ? let zmtxts = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
? ? ? ? //獲取元素
? ? ? ? let content = document.querySelector(".content")
? ? ? ? //定義一個(gè)創(chuàng)建顏色的方法
? ? ? ? function $color() {
? ? ? ? ? ? let color = "#"
? ? ? ? ? ? // 定義顏色字符串
? ? ? ? ? ? let str = "0123456789ABCDEF"
? ? ? ? ? ? for (let i = 0; i < 6; i++) {
? ? ? ? ? ? ? ? color += str[Math.floor(Math.random() * 16)]
? ? ? ? ? ? }
? ? ? ? ? ? return color
? ? ? ? }
? ? ? ? //定義兩個(gè)全局變量并賦值為空方便后面清除定時(shí)器
? ? ? ? let time1 = null
? ? ? ? let time2 = null
? ? ? ? //定義創(chuàng)建字母方塊的方法
? ? ? ? function $craete() {
? ? ? ? ? ? // 該定時(shí)器生成字母
? ? ? ? ? ? time1 = setInterval(() => {
? ? ? ? ? ? ? ? // 創(chuàng)建一個(gè)字母元素
? ? ? ? ? ? ? ? let zm = document.createElement("div")
? ? ? ? ? ? ? ? // 設(shè)置字母文本
? ? ? ? ? ? ? ? zm.innerHTML = zmtxts[Math.floor(Math.random() * 26)]
? ? ? ? ? ? ? ? // 設(shè)置字母樣式
? ? ? ? ? ? ? ? zm.className = "zm"
? ? ? ? ? ? ? ? // 設(shè)置字母方塊在盒子里面的左邊距
? ? ? ? ? ? ? ? zm.style.left = Math.random() * 770 + "px"
? ? ? ? ? ? ? ? zm.style.backgroundColor = $color()
? ? ? ? ? ? ? ? // 將字符添加到容器中
? ? ? ? ? ? ? ? content.appendChild(zm)
? ? ? ? ? ? }, 1000);
? ? ? ? }
? ? ? ? //定義移動(dòng)字母方塊的方法
? ? ? ? function $move() {
? ? ? ? ? ? // 該定位器讓字符往下掉
? ? ? ? ? ? time2 = setInterval(() => {
? ? ? ? ? ? ? ? // 獲取所有的字母
? ? ? ? ? ? ? ? let zms = document.querySelectorAll(".zm")
? ? ? ? ? ? ? ? // 讓所有的字母往下掉
? ? ? ? ? ? ? ? zms.forEach(zm => {
? ? ? ? ? ? ? ? ? ? // 重新設(shè)置字母的top
? ? ? ? ? ? ? ? ? ? let top = zm.offsetTop
? ? ? ? ? ? ? ? ? ? top = top + 10
? ? ? ? ? ? ? ? ? ? zm.style.top = top + "px"
? ? ? ? ? ? ? ? ? ? // 判斷字母的top值如果大于容器的高度
? ? ? ? ? ? ? ? ? ? if (top > content.offsetHeight) {
? ? ? ? ? ? ? ? ? ? ? ? //刪除自己
? ? ? ? ? ? ? ? ? ? ? ? zm.remove()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }, 300);
? ? ? ? }
? ? ? ? // 給window注冊(cè)鍵盤(pán)彈起事件
? ? ? ? onkeyup = function (e) {
? ? ? ? ? ? //當(dāng)按下enter鍵執(zhí)行
? ? ? ? ? ? if (e.keyCode === 13) {
? ? ? ? ? ? ? ? // 如果定時(shí)器是空篙程，開(kāi)啟定時(shí)器
? ? ? ? ? ? ? ? if (time1 === null && time2 === null) {
? ? ? ? ? ? ? ? ? ? $craete()
? ? ? ? ? ? ? ? ? ? $move()
? ? ? ? ? ? ? ? ? ? document.querySelector(".msg").style.display = "none"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //當(dāng)按下空格鍵執(zhí)行
? ? ? ? ? ? else if (e.keyCode === 32) {
? ? ? ? ? ? ? ? clearInterval(time1)
? ? ? ? ? ? ? ? time1 = null
? ? ? ? ? ? ? ? clearInterval(time2)
? ? ? ? ? ? ? ? time2 = null
? ? ? ? ? ? ? ? document.querySelector(".msg").style.display = "block"
? ? ? ? ? ? }
? ? ? ? ? ? //當(dāng)按下ESC鍵執(zhí)行
? ? ? ? ? ? else if (e.keyCode === 27) {
? ? ? ? ? ? ? ? //清除定時(shí)器
? ? ? ? ? ? ? ? clearInterval(time1)
? ? ? ? ? ? ? ? time1 = null
? ? ? ? ? ? ? ? clearInterval(time2)
? ? ? ? ? ? ? ? time2 = null,
? ? ? ? ? ? ? ? //清除所有的字母
? ? ? ? ? ? ? ? [...document.querySelectorAll(".zm")].forEach(zm => zm.remove())
? ? ? ? ? ? ? ? document.querySelector(".msg").style.display = "block"
? ? ? ? ? ? }
? ? ? ? ? ? //在開(kāi)啟狀態(tài)下才能消除元素
? ? ? ? ? ? if (time1 && time2) {
? ? ? ? ? ? ? ? [...document.querySelectorAll(".zm")].find(zm => zm.innerHTML === e.key.toUpperCase()).remove()
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
(2).貪吃蛇
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>貪吃蛇游戲</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .content {
? ? ? ? ? ? width: 800px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? background: linear-gradient(to top, rgba(46, 199, 219, 0.438), rgba(0, 0, 255, 0.555), rgba(223, 93, 115, 0.562));
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .content .mine {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? display: none;
? ? ? ? }
? ? ? ? .content .key {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? color: white;
? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? background: radial-gradient(rgba(211, 76, 76, 0.541), rgba(66, 66, 219, 0.685), rgba(27, 18, 20, 0.459));
? ? ? ? }
? ? ? ? .content .key .title {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 30px;
? ? ? ? ? ? left: 100px;
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .sw {
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? background-color: burlywood;
? ? ? ? }
? ? ? ? .count {
? ? ? ? ? ? width: 160px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? right: 0px;
? ? ? ? ? ? top: 0px;
? ? ? ? ? ? color: red;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? .s {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? }
? ? ? ? .a {
? ? ? ? ? ? margin: 10px 0;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border: 1px solid rgb(214, 196, 196);
? ? ? ? ? ? color: blue;
? ? ? ? ? ? background-color: white;
? ? ? ? }
? ? ? ? .btn {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? color: blue;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="content"></div>
? ? <script>
? ? ? ? //定義一個(gè)創(chuàng)建元素的方法
? ? ? ? function $c(tagName) {
? ? ? ? ? ? return document.createElement(tagName)
? ? ? ? }
? ? ? ? //創(chuàng)建本身以及定位自身位置
? ? ? ? let content = document.querySelector(".content")
? ? ? ? let mine = $c("div")
? ? ? ? let key = $c("div")
? ? ? ? let list = $c("ul")
? ? ? ? let start = $c("li")
? ? ? ? let btn1 = $c("button")
? ? ? ? let bspeed = $c("li")
? ? ? ? let pause = $c("li")
? ? ? ? let restart = $c("li")
? ? ? ? let btn2 = $c("button")
? ? ? ? let title = $c("h3")
? ? ? ? let count = $c("div")
? ? ? ? mine.className = "mine"
? ? ? ? key.className = "key"
? ? ? ? title.className = "title"
? ? ? ? count.className = "count"
? ? ? ? list.className = "s"
? ? ? ? start.className = "a"
? ? ? ? btn1.className = "btn"
? ? ? ? btn2.className = "btn"
? ? ? ? bspeed.className = "a"
? ? ? ? pause.className = "a"
? ? ? ? restart.className = "a"
? ? ? ? title.innerHTML = "歡迎來(lái)到貪吃蛇"
? ? ? ? btn1.innerHTML = "按enter開(kāi)始"
? ? ? ? bspeed.innerHTML = "按空格切換速度"
? ? ? ? pause.innerHTML = "按ESC暫停"
? ? ? ? btn2.innerHTML = "按shift重新開(kāi)始"
? ? ? ? content.appendChild(mine)
? ? ? ? content.appendChild(key)
? ? ? ? content.appendChild(count)
? ? ? ? list.appendChild(start)
? ? ? ? list.appendChild(bspeed)
? ? ? ? list.appendChild(pause)
? ? ? ? list.appendChild(restart)
? ? ? ? key.appendChild(title)
? ? ? ? key.appendChild(list)
? ? ? ? start.appendChild(btn1)
? ? ? ? restart.appendChild(btn2)
? ? ? ? //設(shè)置本身初始位置在中心
? ? ? ? let maxLeft = content.offsetWidth - 30
? ? ? ? let maxTop = content.offsetHeight - 30
? ? ? ? mine.style.left = maxLeft / 2 + "px"
? ? ? ? mine.style.top = maxTop / 2 + "px"
? ? ? ? //定義本身初始方向向左
? ? ? ? let direction = "L"
? ? ? ? //定義本身速度為100(注意此100為100ms即為本身移動(dòng)定時(shí)器的時(shí)間)
? ? ? ? let speed = 100
? ? ? ? //通過(guò)鍵盤(pán)控制方向和速度
? ? ? ? onkeyup = function (e) {
? ? ? ? ? ? // A:65? W:87? D:68? S:83
? ? ? ? ? ? //左:37 上:38 右:39 下:40
? ? ? ? ? ? switch (e.keyCode) {
? ? ? ? ? ? ? ? case 37:
? ? ? ? ? ? ? ? ? ? direction = "L"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 65:
? ? ? ? ? ? ? ? ? ? direction = "L"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 38:
? ? ? ? ? ? ? ? ? ? direction = "T"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 87:
? ? ? ? ? ? ? ? ? ? direction = "T"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 39:
? ? ? ? ? ? ? ? ? ? direction = "R"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 68:
? ? ? ? ? ? ? ? ? ? direction = "R"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 83:
? ? ? ? ? ? ? ? ? ? direction = "B"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 40:
? ? ? ? ? ? ? ? ? ? direction = "B"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 32:
? ? ? ? ? ? ? ? ? ? speed = (speed === 100) ? 50 : 100
? ? ? ? ? ? ? ? ? ? clear()
? ? ? ? ? ? ? ? ? ? move()
? ? ? ? ? ? ? ? ? ? $cteateFood()
? ? ? ? ? ? ? ? ? ? $checkCrash()
? ? ? ? ? ? ? ? ? ? $gameOver()
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 27:
? ? ? ? ? ? ? ? ? ? clear()
? ? ? ? ? ? ? ? ? ? document.querySelector(".key").style.display = "block"
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 13:
? ? ? ? ? ? ? ? ? ? if (time1 === null) {
? ? ? ? ? ? ? ? ? ? ? ? move()
? ? ? ? ? ? ? ? ? ? ? ? $cteateFood()
? ? ? ? ? ? ? ? ? ? ? ? $checkCrash()
? ? ? ? ? ? ? ? ? ? ? ? $gameOver()
? ? ? ? ? ? ? ? ? ? ? ? document.querySelector(".key").style.display = "none"
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? case 16:
? ? ? ? ? ? ? ? ? ? window.location.reload()
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let time1 = null
? ? ? ? //定義一個(gè)本身移動(dòng)的方法
? ? ? ? function move() {
? ? ? ? ? ? time1 = setInterval(() => {
? ? ? ? ? ? ? ? let mine = document.querySelector(".mine")
? ? ? ? ? ? ? ? mine.style.display = "block"
? ? ? ? ? ? ? ? let left = mine.offsetLeft
? ? ? ? ? ? ? ? let top = mine.offsetTop
? ? ? ? ? ? ? ? switch (direction) {
? ? ? ? ? ? ? ? ? ? case "L":
? ? ? ? ? ? ? ? ? ? ? ? left = left - 15
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "T":
? ? ? ? ? ? ? ? ? ? ? ? top = top - 15
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "R":
? ? ? ? ? ? ? ? ? ? ? ? left = left + 15
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "B":
? ? ? ? ? ? ? ? ? ? ? ? top = top + 15
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? mine.style.left = left + "px"
? ? ? ? ? ? ? ? mine.style.top = top + "px"
? ? ? ? ? ? }, speed);
? ? ? ? }
? ? ? ? //定義顏色方法
? ? ? ? function $color() {
? ? ? ? ? ? let color = "#"
? ? ? ? ? ? let str = "0123456789ABCDEF"
? ? ? ? ? ? for (let i = 0; i < 6; i++) {
? ? ? ? ? ? ? ? color += str[Math.floor(Math.random() * 16)]
? ? ? ? ? ? }
? ? ? ? ? ? return color
? ? ? ? }
? ? ? ? let time2 = null
? ? ? ? //定義生成食物的方法
? ? ? ? function $cteateFood() {
? ? ? ? ? ? time2 = setInterval(() => {
? ? ? ? ? ? ? ? let sw = $c("div")
? ? ? ? ? ? ? ? sw.className = "sw"
? ? ? ? ? ? ? ? sw.style.backgroundColor = $color()
? ? ? ? ? ? ? ? document.querySelector(".content").appendChild(sw)
? ? ? ? ? ? ? ? let left = content.offsetWidth - 30
? ? ? ? ? ? ? ? let top = content.offsetHeight - 30
? ? ? ? ? ? ? ? sw.style.left = Math.floor(Math.random() * left) + "px"
? ? ? ? ? ? ? ? sw.style.top = Math.floor(Math.random() * top) + "px"
? ? ? ? ? ? }, 1000);
? ? ? ? }
? ? ? ? //定義兩個(gè)物體碰撞的方法
? ? ? ? function $twoDomCrash(dom1, dom2) {
? ? ? ? ? ? let left1 = dom1.offsetLeft
? ? ? ? ? ? let top1 = dom1.offsetTop
? ? ? ? ? ? let right1 = dom1.offsetWidth + left1
? ? ? ? ? ? let bottom1 = dom1.offsetHeight + top1
? ? ? ? ? ? let left2 = dom2.offsetLeft
? ? ? ? ? ? let top2 = dom2.offsetTop
? ? ? ? ? ? let right2 = dom2.offsetWidth + left2
? ? ? ? ? ? let bottom2 = dom2.offsetHeight + top2
? ? ? ? ? ? if (left1 < left2 && left2 < right1 && (top1 < top2 && top2 < bottom1 || top1 < bottom2 && bottom2 < bottom1)) {
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? } else if (left1 < right2 && right2 < right1 && (top1 < top2 && top2 < bottom1 || top1 < bottom2 && bottom2 < bottom1)) {
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? } else if (left2 < left1 && left1 < right2 && (top2 < top1 && top1 < bottom2 || top2 < bottom1 && bottom1 < bottom2)) {
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? } else if (left2 < right1 && right1 < right2 && (top2 < top1 && top1 < bottom2 || top2 < bottom1 && bottom1 < bottom2)) {
? ? ? ? ? ? ? ? return true
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? return false
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? let time3 = null
? ? ? ? //檢查是否碰撞的方法
? ? ? ? function $checkCrash() {
? ? ? ? ? ? time3 = setInterval(() => {
? ? ? ? ? ? ? ? [...document.querySelectorAll(".sw")].find(sw => {
? ? ? ? ? ? ? ? ? ? if ($twoDomCrash(sw, mine)) {
? ? ? ? ? ? ? ? ? ? ? ? sw.remove()
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }, 10);
? ? ? ? }
? ? ? ? let time4 = null
? ? ? ? //判斷游戲結(jié)束的方法
? ? ? ? function $gameOver() {
? ? ? ? ? ? time4 = setInterval(() => {
? ? ? ? ? ? ? ? let count = document.querySelector(".count")
? ? ? ? ? ? ? ? let swcount = document.querySelectorAll(".sw").length
? ? ? ? ? ? ? ? count.innerHTML = "現(xiàn)在有" + swcount + "個(gè)食物"
? ? ? ? ? ? ? ? let left = mine.offsetLeft
? ? ? ? ? ? ? ? let top = mine.offsetTop
? ? ? ? ? ? ? ? if (swcount > 20) {
? ? ? ? ? ? ? ? ? ? clear()
? ? ? ? ? ? ? ? ? ? alert("食物過(guò)多")
? ? ? ? ? ? ? ? ? ? document.querySelectorAll(".sw").forEach(sw => sw.remove())
? ? ? ? ? ? ? ? ? ? document.querySelector(".key").style.display = "block"
? ? ? ? ? ? ? ? ? ? count.innerHTML = "現(xiàn)在有0個(gè)食物"
? ? ? ? ? ? ? ? } else if (left < 0 || left > maxLeft || top < 0 || top > maxTop) {
? ? ? ? ? ? ? ? ? ? clear()
? ? ? ? ? ? ? ? ? ? alert("你已撞墻")
? ? ? ? ? ? ? ? ? ? document.querySelectorAll(".sw").forEach(sw => sw.remove())
? ? ? ? ? ? ? ? ? ? document.querySelector(".key").style.display = "block"
? ? ? ? ? ? ? ? ? ? count.innerHTML = "現(xiàn)在有0個(gè)食物"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 10);
? ? ? ? }
? ? ? ? //清除定時(shí)器的方法
? ? ? ? function clear() {
? ? ? ? ? ? clearInterval(time1)
? ? ? ? ? ? time1 = null
? ? ? ? ? ? clearInterval(time2)
? ? ? ? ? ? time2 = null
? ? ? ? ? ? clearInterval(time3)
? ? ? ? ? ? time3 = null
? ? ? ? ? ? clearInterval(time4)
? ? ? ? ? ? time4 = null
? ? ? ? }
? ? ? ? [...document.querySelectorAll(".btn")][0].onclick = function () {
? ? ? ? ? ? if (time1 === null) {
? ? ? ? ? ? ? ? move()
? ? ? ? ? ? ? ? $cteateFood()
? ? ? ? ? ? ? ? $checkCrash()
? ? ? ? ? ? ? ? $gameOver()
? ? ? ? ? ? ? ? document.querySelector(".key").style.display = "none"
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ? ? [...document.querySelectorAll(".btn")][1].onclick = function () {
? ? ? ? ? ? ? ? window.location.reload()
? ? ? ? ? ? }
? ? </script>
</body>
</html>
