前端开发之JS之事件案例

一、开关与切换

<!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>

前端开发之JS之事件案例

猜你喜欢