DOM操作案例练习二

最新推荐文章于 2022-12-20 17:02:55 发布

小选有在认真学前端

最新推荐文章于 2022-12-20 17:02:55 发布

阅读量88

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_52484792/article/details/124933233

版权

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;
        }
        
        body {
            /* width: 100%; */
            height: 100vh;
            background-image: url(../手风琴照片/dlrb.jpg);
            background-position: center center;
            background-size: cover;
            overflow: hidden;
        }
        
        ul {
            width: 800px;
            height: 400px;
            background-color: aqua;
            margin: 100px auto;
        }
        
        li {
            float: left;
            width: 80px;
            height: 400px;
            background-color: antiquewhite;
            background-position: center center;
            background-size: cover;
            transition: .3s;
        }
        
        .open {
            width: 480px;
            height: 400px;
        }
        
        li p {
            color: #fff;
            width: 16px;
            font-size: 24px;
            margin: 20px;
            font-weight: 700;
        }
        
        li p:hover {
            cursor: pointer;
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li class="open" style=" background-image: url(../手风琴照片/dlrb.jpg); ">
            <p>迪丽热巴</p>
        </li>
        <li style="background-image: url(../手风琴照片/wjk.jpg); ">
            <p>王俊凯</p>
        </li>
        <li style="background-image: url(../手风琴照片/yyqx.jpg); ">
            <p>易烊千玺</p>
        </li>
        <li style="background-image: url(../手风琴照片/zly.jpg); ">
            <p>赵丽颖</p>
        </li>
        <li style="background-image: url(../手风琴照片/qw.jpg); ">
            <p>戚薇</p>
        </li>
    </ul>
</body>
<script>
    var lis = document.querySelectorAll('li');

    var showIndex = 0;
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        // 为所有的li标签添加点击事件

        lis[i].onclick = function() {
            if (showIndex === this.index) {
                return;
            }

            // 关闭已展开的li
            lis[showIndex].className = '';
            // 展开关闭的li
            this.className = 'open';
            // 更改showIndex
            showIndex = this.index;
            // 为body修改背景图
            document.body.style.backgroundImage = this.style.backgroundImage;

        }
    }
</script>

</html>

</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;
        }
        
        .wrap {
            width: 1200px;
            height: 500px;
            box-shadow: 3px 3px 5px gray;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        
        .wrap>div {
            width: 140px;
            height: 200px;
            background-color: pink;
            margin: 2px;
            margin-top: 40px;
            position: relative;
        }
        
        .wrap>div:nth-of-type(3) {
            margin-left: 10px;
        }
        
        .wrap>div:nth-of-type(4) {
            margin-right: 10px;
        }
        
        .wrap>div .circle {
            width: 20px;
            height: 20px;
            background-color: deepskyblue;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div n="-1">
            <!-- <div class="circle"></div> -->
        </div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
        <div n="-1"></div>
    </div>
</body>
<script src="../number.js"></script>
<script>
    var ds = document.querySelectorAll('.wrap>div');
    var timer = null;

    // 开启定时器
    timer = setInterval(function() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var arr = [parseInt(h / 10), parseInt(h % 10), parseInt(m / 10), parseInt(m % 10), parseInt(s / 10), parseInt(s % 10)];
        setNumbers(arr);
    }, 1000)



    // arr=[n,n,n,n,n,n] 时间
    function setNumbers(arr) {
        for (var i = 0; i < ds.length; i++) {
            // 判断
            if (arr[i] === ds[i].getAttribute('n') / 1) {
                continue;
            }
            ds[i].setAttribute('n', arr[i]);
            // console.log(typeof(ds[i].getAttribute('n') / 1))
            // 先把之前的内容清空
            ds[i].innerHTML = '';
            showNumberInDiv(ds[i], arr[i]);
        }
    }
    setNumbers([0, 0, 0, 0, 0, 0]);

    // 把数字显示在div中
    function showNumberInDiv(div, n) {
        var arr = nums[n]; //拿到显示数字的数组

        for (var i = 0; i < arr.length; i++) {
            // 排数
            var array = arr[i];
            for (var j = 0; j < array.length; j++) {
                var d = document.createElement('div');
                d.className = "circle";
                d.style.left = array[j] * 20 + 'px';
                d.style.top = i * 20 + 'px';
                div.appendChild(d);
            }
        }
    }
</script>

</html>

小选有在认真学前端

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作案例练习二

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"> <tit
复制链接

扫一扫