课后作业:模拟婚礼网站用户名的输入框模拟京东关闭广告模拟下拉菜单实现开关灯

本文链接：https://blog.csdn.net/qq_44378358/article/details/107796682

模拟婚礼网站用户名的输入框
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 250px;
            color: #6db8ff;
            border: #555555 solid 1px;
            margin: 1px auto;
        }

        input {
            display: inline-block;
            color: grey;
        }
    </style>
</head>
<body>
<div>
    <input type="text" value="邮箱id/手机号">
</div>
<script>
    var inp = document.querySelector('input');
    inp.onclick = function () {
        inp.style.borderColor = 'pink';
        console.log(inp.value);
        if (inp.value == '邮箱id/手机号') {
            inp.value = '';
        }
        inp.style.color = 'black';
    }
    inp.onblur = function () {
        if (inp.value == '') {
            inp.value = '邮箱id/手机号';
            inp.style.color = 'grey';
        }
    }
</script>
</body>
</html>

模拟京东关闭广告
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            width: 200px;
            height: auto;
            /*position: relative;*/
        }

        div {
            position: relative;
            height: auto;
            width: 200px;
            border: 1px solid #cccccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: red;
        }

        p {
            position: absolute;
            /*display: inline-block;*/
            top: -13px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            /*line-height: 14px;*/
            font-family: Arial, sans-serif;
            cursor: pointer;
        / / 指针改变
        }
    </style>
</head>
<body>
<div>
    关闭广告
    <img src="二维码.jpg">
    <p>x</p>
</div>
<script>
    var div=document.querySelector('div');
    var p=document.querySelector('p');
    p.onclick=function () {
        div.style.display='none';
    }
</script>
</body>
</html>

下拉菜单
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 100px;
            border: #6db8ff solid;
            margin: 100px auto;
            text-align: center;
            position: relative;
        }

        .box li {
            /*float: ;*/
            display: none;
            list-style: none;
            background-color: #6db8ff;
            border: 1px solid;
            /*margin: -1px;*/
        }
    </style>
</head>
<body>
<div class="box">
    <p>微博</p>
    <li>私信</li>
    <li>评论</li>
    <li>@我</li>
</div>
<script>
    var div=document.querySelector('.box');
    var lis=document.getElementsByTagName('li');
    console.log(div);
    div.onmouseover=function () {
        console.log(1);
        for (var i=0;i<lis.length;i++){
            lis[i].style.display='block';
        }
    }
    div.onmouseout=function () {
        console.log(2);
        for (var i=0;i<lis.length;i++){
            lis[i].style.display='none';
        }
    }
</script>
</body>
</html>

javascript实现开关灯
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">关灯</button>
<script>
    var btn = document.getElementById('btn');
    var body = document.body;
    console.log(btn);
    var flag = true;
    btn.onclick = function () {
        if (flag) {
            body.style.backgroundColor = 'black';
            this.innerText='开灯';
            flag = false;
        } else {
            body.style.backgroundColor = 'white';
            this.innerText='关灯';
            flag = true;
        }
    }
</script>
</body>
</html>