master

分支 (1)

管理

管理

master

day02-JavaScript-Vue
/
16. JS-事件-案例.html

<!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>JS-事件-案例</title>
</head>
<body>

<img id="light" src="img/off.gif"> <br>

<input type="button" value="点亮" onclick="onlight()">
<input type="button" value="熄灭" onclick="onon()">

<br> <br>

<input type="text" id="name" value="ITCAST" onblur="jujiao()" onfocus="shijiao()">
<br> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<input type="button" value="全选" onclick="quanxuan()">
<input type="button" value="反选" onclick="fanxuan()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡;
    function onlight() {
        const light = document.getElementById("light");
        light.src = "img/on.gif"
    }

    function onon() {
        const on = document.getElementById("light");
        on.src = "img/off.gif"
    }

    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写;
    function jujiao() {
        const elementById = document.getElementById("name");
        elementById.value = elementById.value.toUpperCase()
    }

    function shijiao() {
        const elementById = document.getElementById("name");
        elementById.value = elementById.value.toLowerCase()
    }

    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function quanxuan() {
        const hobby = document.getElementsByName("hobby");
        for (let i = 0; i < hobby.length; i++) {
            const hoo = hobby[i];
            hoo.checked=true
        }

    }

    function fanxuan() {
        const hobby = document.getElementsByName("hobby");
        for (let i = 0; i < hobby.length; i++) {
            const hoo = hobby[i];
            hoo.checked=false
        }

    }


</script>
</html>