JavaScript_DOM小练习

 // 1, 有一个装有颜色的数组["red", "blue", "yellow", "green", "black", "orange"];

        // 点击button 启动定时器, 每一秒给它换一次色, 按顺序循环换色

　　<style>

        　　.box1 {

           　　 width: 200px;

          　　  height: 200px;  

           　　 border: 3px dashed skyblue;

    　　    }

 　　</style>

 

　　<div class="box1"></div>

       <button class="btn1">改变颜色</button><br>

 

 

        var colors = ["red", "blue", "yellow", "green", "black", "orange"];

        var btn1 = document.querySelector('.btn1')

        var box1 = document.querySelector('.box1')

        var timer

        btn1.onclick = function () {

            var i = 0

            clearInterval(timer)

            timer = setInterval(function () {

                box1.style.backgroundColor = colors[i]

                i++

                if (i >= colors.length) {

                    i = 0

                }

            }, 1000)

        }

        // 2, 实现一个个人信息页面   姓名  年龄  学历  专业, 可以获取到输入的信息, 点击保存按钮以后, 输出信息(信息显示形式: 姓名: 张三, 年龄: 33, 学历: 本科, 专业: 计算机)

        // 要求: 分别使用通过id, tagName, name三种获取节点的方式实现

    <input type="text" placeholder="姓名" id="Name">

    <input type="text" placeholder="年龄" class="age"><br>

    <input type="text" placeholder="学历">

    <input type="text" placeholder="专业" name="major"><br>

    <button id="btn2">保存</button>

 

        var Name = document.getElementById('Name')

        var age = document.getElementsByClassName('age')[0]

        var education = document.getElementsByTagName('input')[2]

        var major = document.getElementsByName('major')[0]

        document.querySelector('#btn2').onclick = function () {

            console.log(`姓名:$Name.value,\mathrm{年}\mathrm{龄}:${age.value},学历:$education.value,\mathrm{专}\mathrm{业}:${major.value}`);

        }

        // 3, 写一个定时器, 每隔0.1秒修改一次div内文字颜色和文字大小.最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 文字大小开始缩小, 缩小6次, 文字再开始增大…、

 

    <div id="box3">看我七十二变</div>

 

        function randomColor() {

            var r = parseInt(Math.random() * 256)

            var g = parseInt(Math.random() * 256)

            var b = parseInt(Math.random() * 256)

            return `rgb($r,${g},${b})`

        }

        var box3 = document.getElementById('box3')

        var size = 16

        var i = 0

        setInterval(function () {

            box3.style.color = randomColor()

            i++

            if (Math.floor(i / 6) % 2 == 0) {

                size += 4

            } else {

                size -= 4

            }

            box3.style.fontSize = size + 'px'

        }, 100)

        // 4, 网页换肤, 点击皮肤1, 切换到第一张图的效果, 点击皮肤2切换到第二张图的效果

        //获取body document.body

        //获取所有的按钮

　　

    <button id="btn4">皮肤一</button>

    <button id="btn4_2">皮肤二</button>

 

        document.getElementById('btn4').onclick = function () {

            document.body.style.backgroundImage = "url(https://img2.baidu.com/it/u=1572613686,938558453&fm=253&fmt=auto&app=120&f=JPEG)"

            document.body.style.backgroundSize = "100%"

        }

        document.getElementById('btn4_2').onclick = function () {

            document.body.style.backgroundImage = "url(https://img0.baidu.com/it/u=2725915437,1236608227&fm=253&fmt=auto&app=138&f=JPEG)"

            document.body.style.backgroundSize = 'content'

        }

        // 5,  隔行变色

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

 

        var lis = document.querySelectorAll('li')

        for (var i = 0; i < lis.length; i++) {

            if (i % 2) {

                lis[i].style.backgroundColor = 'red'

            } else {

                lis[i].style.backgroundColor = 'skyblue'

            }

        }