2021-12-11

十五烟具、焦點(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>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市别厘,隨后出現(xiàn)的幾起案子虱饿,更是在濱河造成了極大的恐慌,老刑警劉巖触趴,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氮发,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡雕蔽,警方通過(guò)查閱死者的電腦和手機(jī)折柠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)批狐,“玉大人扇售,你說(shuō)我怎么就攤上這事∠В” “怎么了承冰?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)食零。 經(jīng)常有香客問(wèn)我困乒,道長(zhǎng),這世上最難降的妖魔是什么贰谣? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任娜搂,我火速辦了婚禮,結(jié)果婚禮上吱抚,老公的妹妹穿的比我還像新娘百宇。我一直安慰自己,他們只是感情好秘豹,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布携御。 她就那樣靜靜地躺著,像睡著了一般既绕。 火紅的嫁衣襯著肌膚如雪啄刹。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天凄贩,我揣著相機(jī)與錄音誓军,去河邊找鬼。 笑死疲扎,一個(gè)胖子當(dāng)著我的面吹牛昵时,可吹牛的內(nèi)容都是我干的廓译。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了娘纷?” 一聲冷哼從身側(cè)響起么库,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎久橙,沒(méi)想到半個(gè)月后俄占,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡淆衷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年缸榄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片祝拯。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡甚带,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出佳头,到底是詐尸還是另有隱情鹰贵,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布康嘉,位于F島的核電站碉输,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏亭珍。R本人自食惡果不足惜敷钾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肄梨。 院中可真熱鬧阻荒,春花似錦、人聲如沸峭范。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)纱控。三九已至辆毡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間甜害,已是汗流浹背舶掖。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留尔店,地道東北人眨攘。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓主慰,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親鲫售。 傳聞我的和親對(duì)象是個(gè)殘疾皇子共螺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • * { margin: 0; padding: 0; list-sty...
    錦衣夜行001閱讀 280評(píng)論 0 3
  • 一.js部分代碼 1.創(chuàng)建字母和下落字母的方法 2.產(chǎn)生隨機(jī)顏色的方法 3.設(shè)置開(kāi)始和暫停 二.css部分...
    kygo閱讀 126評(píng)論 0 0
  • ECMAscript 基礎(chǔ)語(yǔ)法 變量 數(shù)據(jù)類型 運(yùn)算符 數(shù)組 函數(shù) 對(duì)象 BOM 瀏覽器對(duì)象模型 window對(duì)象...
    淺笑_閱讀 223評(píng)論 0 0
  • 十四、鼠標(biāo)事件 1. 鼠標(biāo)事件 // 點(diǎn)擊事件 => onclick // 雙擊事件 => ondblclick ...
    默默_01cf閱讀 141評(píng)論 0 0
  • js插件之iscroll,swiper 1.iscroll 1.1我們?cè)陔娚叹W(wǎng)站移動(dòng)端經(jīng)常會(huì)看見(jiàn)有側(cè)邊欄,如下圖 ...
    煤球快到碗里來(lái)閱讀 491評(píng)論 0 0