DON基本事件

最新推荐文章于 2022-05-09 21:09:41 发布

aidi6601

最新推荐文章于 2022-05-09 21:09:41 发布

阅读量188

点赞数

原文链接：http://www.cnblogs.com/cherish937426/p/11493911.html

版权

开关灯事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }

        .c2 {
            background-color: red;
        }

        .c3 {
            background-color: green;
        }


    </style>
</head>
<body>

<div class="c1 c2 c3"></div>
<button class="b2">点击</button>


<script>

    divele = document.getElementsByClassName("c1")[0];
    buttonele = document.getElementsByClassName("b2")[0];
    buttonele.onclick = function () {
        divele.classList.toggle("c3")

    }


</script>


</body>

</html>
<!--
1 先将开关灯的样式给调节出来
2 在吧开关灯的标签找到
3 在将按钮的标签找到
4 将按钮的标签绑定一个事件
5 在事件中写入对于class的操作减掉绿色的样式类
-->

显示时间事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" class="c1">
<button class="c2">开始</button>
<button class="c3">结束</button>


<script>

    butele1 = document.getElementsByClassName("c2")[0];
    butele2 = document.getElementsByClassName("c3")[0];
    var t = null;

    function showtime() {
        time = new Date();
        inputele = document.getElementsByClassName("c1")[0];
        inputele.value = time.toLocaleString()
    }

    butele1.onclick = function () {
        if (!t) {
            t = setInterval(showtime, 1000)
        }

    };
    butele2.onclick = function () {
        clearInterval(t);
        t = null

    }

</script>
</body>
</html>


<!--
1 先写一个input框
2 在将script定义一个时间对象，用来输出value值
3 在通过计时器来控制时间的间隔显示
4 在写入几个按钮来控制开始结束
5 在通过jss将标签按钮找到，绑定事件
6 注意这里我们按开始按钮式如果多安了就会多开很多计时器。我们要限制计时器的个数定义一个全局变量来指向计时器
如果开始没有的时候就让他执行，如果有就不让他执行
7 注意在我们取消计时器的时候。的将全局变量清空
-->

获取焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" value="帅的什么也没有留下" class="c1">


<script>
    inputele = document.getElementsByClassName("c1")[0];
    inputele.onfocus = function () {
        inputele.value = ""

    };
    inputele.onblur = function () {
        inputele.value = "老板记得下一次在来哦"

    }

</script>

</body>
</html>
<!--
1 先写一个input框
2 通过jss找到input这个标签
3 在将这个标签绑定给 onfous 和onblur 这两个事件
4 在事件内写入触发事件的代码
-->

省市联动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<select name="" id="d1">

</select>


<select name="" id="d2">


</select>

<script>
    var data = {
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "上海": ["静安区", "黄浦区"],
        "深圳": ["南山区", "龙岗区"]
    };

    s1ele = document.getElementById("d1");
    s2ele = document.getElementById("d2");

    var opel = document.createElement("option");
    opel.innerText = "--请选择--";
    s1ele.appendChild(opel);

    for (let i in data) {
        var opele = document.createElement("option");
        opele.innerText = i;
        opele.value = i;
        s1ele.appendChild(opele)
    }
    s1ele.onchange = function () {
        var a = s1ele.value;
        var b = data[a];
        s2ele.innerHTML = "";

        for (let i = 0; i < b.length; i++) {
            var opele2 = document.createElement("option");
            opele2.innerText = b[i];
            opele2.value = b[i];
            s2ele.appendChild(opele2)
        }
    }
</script>
</body>
</html>


<!--
1 先写两个select框
2 在jss文件中找的select标签
3 在将字典date for循环得到省的值
4 我们在动态创建option标签每次循环将文本值传入option标签内
5 再将第一个select标签绑定一个onchange事假我们可以同过标签.value的方式取出我们select中选定的值
6 同过我们选定的值获取列表中的城市的值
7 然后在for循环 一次取出城市的值，动态的创建option标签。将文本值给option标签
8 注意每一次我们动态传值得时候都要将上次的标签信息给删除掉
-->

模态框事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128, 128, 128, 0.4);
            z-index: 1;
        }

        .c3 {
            height: 200px;
            width: 400px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -200px;

            background-color: white;
            z-index: 2;

        }

        .h1 {
            display: none;
        }


    </style>
</head>
<body>
<div class="c1">我是最下面的</div>
<button class="d1">登录</button>
<div class="c2 h1"></div>
<div class="c3 h1">
    <p>username <input type="text"></p>
    <p>password <input type="password"></p>
    <button class="d2">取消</button>
</div>

<script>
    var divele1 = document.getElementsByClassName("d1")[0];
    divele1.onclick = function () {
        divele2 = document.getElementsByClassName("c2")[0];
        divele3 = document.getElementsByClassName("c3")[0];
        divele2.classList.remove("h1");
        divele3.classList.remove("h1")
    }


    var divele4 = document.getElementsByClassName("d2")[0];
    divele4.onclick = function () {
        divele5 = document.getElementsByClassName("c2")[0];
        divele6 = document.getElementsByClassName("c3")[0];
        divele5.classList.add("h1");
        divele6.classList.add("h1")
    }


</script>


</body>
</html>


<!--
1 先定义3个diV 第一个是最底下的类容。第二个是模态框，第三个是登录框
2 注意，这几个div都要绝对定位，不然就不会飘起来
3 然后在定义一个h类来隐藏属相
4 我们在通过按钮绑定操作来修改每个div中的隐藏类
5 一个增加h一个删除按钮
-->

转载于:https://www.cnblogs.com/cherish937426/p/11493911.html

aidi6601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DON基本事件

开关灯事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height:...
复制链接

扫一扫