12个javascript小任务解析

已于 2023-11-28 13:41:38 修改
阅读量155 收藏
点赞数
文章标签： 前端 javascript html
于 2023-11-27 00:40:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_shi_xiao_cai/article/details/134633911
版权

题一：

要求：

设计思路：

a:首先是在右下角设置号一个向上返回顶部的按钮，可以用粘性定位，将其固定在右下角。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面返回顶部</title>
    <style>
       *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 10000px;
        }
        div{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 39px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
        <button id="btn">
            <img src="a58.png" alt="" style="width: 39px; height: 39px;">
        </button>
    </div>
    <script>
        window.onscroll = function(){
    
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            
            btn.onclick = handle
            function handle(){
                 var m = 20
            
                var timer = setInterval(function(){
                    m--;
                    if(m == 0) {
                        clearInterval(timer)
                        m=20
			        } else{
                        window.scrollBy({
                        right:0,
                        top:-(1506*m),
                        behavior:"smooth",
                    })
                    }
                } ,60)
            }
            if(Math.round(scrollTop)>300){
                    document.getElementById("btn").style.display="block";
            }else{
                document.getElementById("btn").style.display="none";
            }
        }
    </script>
</body>
</html>

 1.需要用到的核心知识点：

Window.scrollBy() 方法在窗口中按指定的偏移量滚动文档。

 参数：

  • x-coord 是你想滚动的水平像素值。
  • y-coord 是你想滚动的垂直像素值。

top

指定沿 Y 轴滚动窗口或元素的像素数。

left

指定沿 X 轴滚动窗口或元素的像素数。

behavior

指定滚动是否应该平滑（smooth）、瞬时运动到该位置（instant）、或者让浏览器选择（auto，默认）。

 2.具体设计：

首先是给页面设计一个足够的高度，并清除页面边距

然后就是js代码的编写：

首先给滚动条绑定一个函数：方法为加上一个

只要滚动条滑动就会执行函数

然后再在此函数内部再创建一个函数与返回顶部按钮进行绑定：

在这里我们可以设置一个间隔计时器用相同时间内滚动条所走过的距离逐渐递减来显示滚动条的由快到慢的效果，这里就要用到window.scrollBy方法，设置滚动条单次向上滑动到的位置。最重要的是滑动效果的设置，设置成平滑就可以显得十分流畅，而不是一顿一顿的。为了保证每次滑动的距离不一样，还需要提前定义一个变量并赋上初值，并在计时器内部设置上自减。最后为了保证滚动条的返回效果可以多次使用，还要用if语句判断滚动条的位置，这里是用定义并赋值的变量自减至0来判断的，这时就要停止计时器函数的继续执行，用上clearInterval，清除间隔计时器，并将赋值的变量重新赋予其初始值以达到重置效果。

对于滚动条滑动到顶部消失的效果则可以用if语句判断滚动条的状态并执行相应代码。

效果：

屏幕录制 2023-11-16 125015

题二：

要求：

 设计思路：轮播图我是在看到90几集写的，方法为js搭配css动画，除此之外还写了一个计时器版本的轮播图,这里就不介绍了，因为我想挑战一下只看到节点就写轮播图，所以钻研了一个星期，纯原创。中间的报错次数说多了都是泪：

  

上代码，功能基本还原了，只是有些写法很笨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .bigbox{
            width: 1226px;
            height: 460px;
            overflow: hidden;
            margin: auto;
            position: relative;
        }
        #middlebox{
            width: 9999px;
            animation: identifier1 50s linear 10s infinite;
        }
        #middlebox:hover{
            animation-play-state: paused;
        }
        #boxc{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n43.jpeg);
            background-size: contain;
        }
        #boxd{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n44.webp);
            background-size: contain;
        }
        #boxe{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n45.webp);
            background-size: contain;
        }
        #boxf{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n46.webp);
            background-size: contain;
        }
        #boxg{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n47.webp);
            background-size: contain;
        }
        #boxh{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n48.webp);
            background-size: contain;
        }
        #boxj{
            width: 1226px;
            height: 460px;
            float: left;
            background-image: url(n43.jpeg);
            background-size: contain;
        }
        .smalebox>img{
            width: 1226px;
            height: 460px;
        }

        @keyframes identifier1 {
        0%{
            transform: translateX(0);
        } 
        6%{
            transform: translateX(-1226px);
        } 
        16%{
            transform: translateX(-1226px);
        } 
        22%{
            transform: translateX(-2452px);
        } 
        32%{
            transform: translateX(-2452px);
        } 
        38%{
            transform: translateX(-3678px);
        } 
        48%{
            transform: translateX(-3678px);
        } 
        54%{
            transform: translateX(-4904px);
        } 
        64%{
            transform: translateX(-4904px);
        } 
        70%{
            transform: translateX(-6130px);
        } 
        80%{
            transform: translateX(-6130px);
        } 
        86%{
            transform: translateX(-7356px);
        } 
        100%{
            transform: translateX(-7356px);
        }
        }

        #box1{
            width: 150px;
            margin: auto;
        }

        .box2{
            position: absolute;
            width: 0px;
            height: 150px;
            top: 170px;
            z-index: 9999;
        }
        
        .bigger:hover>.box2{
            width: 100px;
            transition: all 0.2s linear;
        }

        .box2>img{
            width: 0px;
            height: 150px;
        }

        .bigger:hover>.box2>img{
            width: 100px;
            height: 150px;
            transition: all 0.2s linear;
        }

        .box3{
            position: absolute;
            width: 0;
            height: 150px;
            top: 170px;
            right: 0;
            z-index: 9999;
        }

        .bigger:hover>.box3{
            width: 100px;
            height: 150px;
            transition: all 0.2s linear;
        }

        .box3>img{
            width: 0px;
            height: 150px;
        }

        .bigger:hover>.box3>img{
            width: 100px;
            height: 150px;
            transition: all 0.2s linear;
        }

        .bigger{
            width: 100%;
            height: 460px;
            background-color: azure;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="bigger">
        <div class="box2">
            <img src="aa2.png" alt="" id="boxa">
        </div>
        <div class="bigbox">
            <div id="middlebox">
                <div class="smalebox" id="boxc">
                    小米商城图片
                </div>
                <div class="smalebox" id="boxd">
                    小米商城图片
                </div>
                <div class="smalebox" id="boxe">
                    小米商城图片
                </div>
                <div class="smalebox" id="boxf">
                    小米商城图片
                </div>
                <div class="smalebox" id="boxg">
                    小米商城图片
                </div>
                <div class="smalebox" id="boxh">
                    小米商城图片
                </div>
                <div class="smalebox" id="boxj">
                    小米商城图片
                </div>
            </div>
        </div>
        <div class="box3">
            <img src="aa3.png" alt="" id="boxb">
        </div>
    </div>

    <div id="box1">
        <input type="radio" name="a" id="btn" checked>
        <input type="radio" name="a" id="btn">
        <input type="radio" name="a" id="btn">
        <input type="radio" name="a" id="btn">
        <input type="radio" name="a" id="btn">
        <input type="radio" name="a" id="btn">
    </div>
    <button id="btn8"></button>
    <script>
        var middlebox = document.getElementById("middlebox")
        var radioElement = document.querySelectorAll("#btn");
        var box = middlebox.children
        console.log(box)
        boxb.onclick = handle
        x=1
        function handle(){
            if(x<6){
                radioElement[x].checked = true;
                x++
            }else if(x==6){
                x=1
                radioElement[0].checked = true;
            }
            middlebox.removeChild(box[0])
            var clonedNode = box[0].cloneNode(true)
            console.log(clonedNode)
            middlebox.appendChild(clonedNode)
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }
        boxa.onclick = handle1
        m=5
        function handle1(){
            if(m>0){
                
                radioElement[m].checked = true;
                m--
            }else if(m==0){
                m=5
                radioElement[0].checked = true;
            }
            middlebox.insertBefore(box[5],box[0])
            var clonedNode1 = box[6].cloneNode(true)
            console.log(clonedNode1)
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }

        n=0
        var timer = setInterval(function() {
            
            radioElement[n].checked = true;
            n++
            if(n===6){
                n=0
            }
		},8000);

        var inputtype = document.querySelectorAll("input")
        console.log(inputtype)

        inputtype[0].onclick = headler2
        inputtype[1].onclick = headler3
        inputtype[2].onclick = headler4
        inputtype[3].onclick = headler5
        inputtype[4].onclick = headler6
        inputtype[5].onclick = headler7

        var boxc = document.getElementById("boxc")
        var boxd = document.getElementById("boxd")
        var boxe = document.getElementById("boxe")
        var boxf = document.getElementById("boxf")
        var boxg = document.getElementById("boxg")
        var boxh = document.getElementById("boxh")
        var boxj = document.getElementById("boxj")

        function headler2(){
            for(i=0;i<box.length;i++){
                box[i].remove(box[i])
            }
            middlebox.appendChild(boxc)
            middlebox.appendChild(boxd)
            middlebox.appendChild(boxe)
            middlebox.appendChild(boxf)
            middlebox.appendChild(boxg)
            middlebox.appendChild(boxh)
            middlebox.appendChild(boxj)
            if(box.length<=6){
                middlebox.insertBefore(boxc,box[0])
            }else if(box.length===8){
                box[0].remove(box[0])
            }else if(box.length===9){
                for(m=0;m<2;m++){
                    box[0].remove(box[0])
                }
            }
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }

        function headler3(){
            for(i=0;i<box.length;i++){
                box[i].remove(box[i])
            }
            
            middlebox.appendChild(boxd)
            middlebox.appendChild(boxe)
            middlebox.appendChild(boxf)
            middlebox.appendChild(boxg)
            middlebox.appendChild(boxh)
            middlebox.appendChild(boxj)
            middlebox.appendChild(boxc)

            if(box.length<=6){
                middlebox.insertBefore(boxc,box[0])
            }else if(box.length===8){
                box[0].remove(box[0])
            }else if(box.length===9){
                for(m=0;m<2;m++){
                    box[0].remove(box[0])
                }
            }
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }

        function headler4(){
            for(i=0;i<box.length;i++){
                box[i].remove(box[i])
            }
            
            middlebox.appendChild(boxe)
            middlebox.appendChild(boxf)
            middlebox.appendChild(boxg)
            middlebox.appendChild(boxh)
            middlebox.appendChild(boxj)
            middlebox.appendChild(boxc)
            middlebox.appendChild(boxd)
            
            if(box.length<=6){
                middlebox.insertBefore(boxc,box[0])
            }else if(box.length===8){
                box[0].remove(box[0])
            }else if(box.length===9){
                for(m=0;m<2;m++){
                    box[0].remove(box[0])
                }
            }
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }

        function headler5(){
            for(i=0;i<box.length;i++){
                box[i].remove(box[i])
            }
            
            middlebox.appendChild(boxf)
            middlebox.appendChild(boxg)
            middlebox.appendChild(boxh)
            middlebox.appendChild(boxj)
            middlebox.appendChild(boxc)
            middlebox.appendChild(boxd)
            middlebox.appendChild(boxe)
            
            if(box.length<=6){
                middlebox.insertBefore(boxc,box[0])
            }else if(box.length===8){
                box[0].remove(box[0])
            }else if(box.length===9){
                for(m=0;m<2;m++){
                    box[0].remove(box[0])
                }
            }
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }

        function headler6(){
            for(i=0;i<box.length;i++){
                box[i].remove(box[i])
            }
            
            middlebox.appendChild(boxg)
            middlebox.appendChild(boxh)
            middlebox.appendChild(boxj)
            middlebox.appendChild(boxc)
            middlebox.appendChild(boxd)
            middlebox.appendChild(boxe)
            middlebox.appendChild(boxf)
            
            if(box.length<=6){
                middlebox.insertBefore(boxc,box[0])
            }else if(box.length===8){
                box[0].remove(box[0])
            }else if(box.length===9){
                for(m=0;m<2;m++){
                    box[0].remove(box[0])
                }
            }
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }

        function headler7(){
            for(i=0;i<box.length;i++){
                box[i].remove(box[i])
            }
            
            middlebox.appendChild(boxh)
            middlebox.appendChild(boxj)
            middlebox.appendChild(boxc)
            middlebox.appendChild(boxd)
            middlebox.appendChild(boxe)
            middlebox.appendChild(boxf)
            middlebox.appendChild(boxg)
            
            if(box.length<=6){
                middlebox.insertBefore(boxc,box[0])
            }else if(box.length===8){
                box[0].remove(box[0])
            }else if(box.length===9){
                for(m=0;m<2;m++){
                    box[0].remove(box[0])
                }
            }
            document.getElementById("middlebox").style.animation = `145s linear 5s infinite`
            setInterval(function fn11(){
                document.getElementById("middlebox").style.animation = ` identifier1 50s linear 3s infinite`
            },2000)
        }
    </script>
    
</body>
</html>

 我的思路是，在点击右键或左键时就把第一个图片删除后重新加入到最后一个，点击原点变化时则是先把所有图片都删除然后按对应顺序重新排序，点左键时则是用克隆方法替换图片位置。算是低配版的轮播图了。

效果：

屏幕录制 2023-11-26 225738

题三：

要求：

设计思路：

因为要做出瀑布流图片排列效果，所以要给大盒子加上一个column-count，并设置为6，然后图片宽度设为100%这样就可以让图片自动按比例平铺，并一行显示6列，然后就是加上懒加载效果，最终达到瀑布流效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    html,body{
        height: 100%;
        
    }
    
    #box{
        column-count: 6;
    }
    .box2{
        margin-bottom: 10px;
        break-inside: avoid; 
        height: 231px;
    }
    .box2 img{
            width: 100%;

        }
</style>
<body>
    <div id="box">
        <div class="box2">
            <img src="u=1669704037,1424149186&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="" >
        </div>
    </div>

    <script>
        var arr1 = [
            {
                url: "tiger1.jpg"
            },
            {
                url: "u=594033505,3380474084&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "u=1669704037,1424149186&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "OIP-C (1).jpg"
            },
            {
                url: "OIP-C (2).jpg"
            },
            {
                url: "OIP-C (3).jpg"
            },
            {
                url: "OIP-C.jpg"
            },
            {
                url: "OIP-C (4).jpg"
            },
            {
                url: "OIP-C (5).jpg"
            },
            {
                url: "OIP-C (6).jpg"
            },
            {
                url: "tiger1.jpg"
            },
            {
                url: "u=594033505,3380474084&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "u=1669704037,1424149186&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "OIP-C (7).jpg"
            },
            {
                url: "OIP-C (8).jpg"
            },
            {
                url: "OIP-C (9).jpg"
            },
            {
                url: "OIP-C (10).jpg"
            },
            {
                url: "OIP-C (11).jpg"
            },
            {
                url: "OIP-C (12).jpg"
            },
            {
                url: "OIP-C (13).jpg"
            },
            {
                url: "OIP-C (14).jpg"
            },
            {
                url: "OIP-C (15).jpg"
            },
            {
                url: "OIP-C (16).jpg"
            },
            {
                url: "OIP-C (17).jpg"
            },
            {
                url: "OIP-C (18).jpg"
            },
            {
                url: "OIP-C (19).jpg"
            },
            {
                url: "OIP-C (20).jpg"
            },
            {
                url: "OIP-C (21).jpg"
            },
            {
                url: "tiger1.jpg"
            },
            {
                url: "OIP-C.jpg"
            },
        ]

        var arr2 = [
            {
                url: "tiger1.jpg"
            },
            {
                url: "u=594033505,3380474084&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "u=1669704037,1424149186&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "OIP-C (1).jpg"
            },
            {
                url: "OIP-C (2).jpg"
            },
            {
                url: "OIP-C (3).jpg"
            },
            {
                url: "OIP-C.jpg"
            },
            {
                url: "OIP-C (4).jpg"
            },
            {
                url: "OIP-C (5).jpg"
            },
            {
                url: "OIP-C (6).jpg"
            },
            {
                url: "tiger1.jpg"
            },
            {
                url: "u=594033505,3380474084&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "u=1669704037,1424149186&fm=253&fmt=auto&app=138&f=JPEG.webp"
            },
            {
                url: "OIP-C (7).jpg"
            },
            {
                url: "OIP-C (8).jpg"
            },
            {
                url: "OIP-C (9).jpg"
            },
            {
                url: "OIP-C (10).jpg"
            },
            {
                url: "OIP-C (11).jpg"
            },
            {
                url: "OIP-C (12).jpg"
            },
            {
                url: "OIP-C (13).jpg"
            },
            {
                url: "OIP-C (14).jpg"
            },
            {
                url: "OIP-C (15).jpg"
            },
            {
                url: "OIP-C (16).jpg"
            },
            {
                url: "OIP-C (17).jpg"
            },
            {
                url: "OIP-C (18).jpg"
            },
            {
                url: "OIP-C (19).jpg"
            },
            {
                url: "OIP-C (20).jpg"
            },
            {
                url: "OIP-C (21).jpg"
            },
            {
                url: "tiger1.jpg"
            },
            {
                url: "OIP-C.jpg"
            },
        ]
        // renderHTML(arr1)

        function renderHTML(arr){
            box.innerHTML += arr.map(function(item){
                return `<box class="box2">
                    <img src="${item.url}">
                </box>
                `
            }).join("")
        }
        renderHTML(arr1)

        isloading=false
        window.onscroll = function(){
            var listHeight = box.offsetHeight
            var listTop = box.offsetTop
            console.log(listHeight,listTop)
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            var windowHeight = document.documentElement.clientHeight

            console.log(Math.round(windowHeight+scrollTop))
            // Math.round(windowHeight+scrollTop)==(box.offsetHeight+box.offsetTop)
            // if(isloading) return
            if(Math.round(windowHeight+scrollTop+1)==(listHeight+listTop)
            ){
            // console.log("到底了")
            // isloading=true
            renderHTML(arr2)
            }
        }
        
    </script>
</body>
</html>

具体写法我先是将图片全部以对象的形式插入数组中，然后通过映射方法将整个模板插入到页面中去，最后就是懒加载的滚动条触底判断。 当滚动条距顶部的距离等于元素偏移高度时则执行下一步的页面渲染。

效果如下：

屏幕录制 2023-11-05 165912

题四：

要求：

设计思路：

首先是计时器的设计，首先设置一个间隔计时器，间隔为1秒，然后先给一个变量赋值为60，然后在计时器中设置n--，就实现了一分钟的倒计时效果，当n==0时就用渲染将按钮文字改为重新发送，并将该函数绑定到按钮点击上，其次就是发送按钮禁用效果，我这里用的是笨方法，就是display的运用。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送验证码</title>
    <style>
        .box{
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" placeholder="请输入你的验证码" id="btn3">
        <button id="btn">发送验证码</button>
        <button id="btn1" style="width: 260px;" disabled>提交</button>
        <button id="btn2" style="width: 260px; display: none;">提交</button>
    </div>
    <script>
        var btn =document.getElementById("btn")
        var btn2 =document.getElementById("btn2")
        
        btn.onclick = function(){
            var time = 60;
		    var timer = setInterval(function() {
			    time--;
			    document.querySelector("#btn").innerHTML = time + "秒";
			    if(time == 0) {
				    document.querySelector("#btn").innerHTML = "重新发送";
                    clearInterval(timer)
			    }
		    },1000);

            if(btn.onclick){
                document.getElementById("btn1").style.display="none";//隐藏
                document.getElementById("btn2").style.display="block";//显示
	        }else{
		        document.getElementById("btn1").style.display="block";//显示
                document.getElementById("btn2").style.display="none";//隐藏
	        }
        }
        
        btn2.onclick = function(){

            var key = document.getElementById("btn3").value
            if(key=="0505"){
                alert("验证成功！")
            }else if(key==0){
                alert("请输入验证码")
            }else{
                alert("验证码错误！")
            }
        }
    </script>
</body>
</html>

 效果：

屏幕录制 2023-11-26 225948

 题五：

要求：

设计思路：

我这里主要是对随机数的运用，先将要滚动的内容以数组的形式存放起来，然后通过var index = parseInt(Math.random() * arr.length);方法来随机生成一个数，再调取数组中的该序数来将对应内容渲染到页面中去。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        .box1{
            width: 390px;
            height: 300px;
            margin: auto;
            background-image: url(aa1.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }
        .box2{
            width: 200px;
            height: 20px;
            margin: auto;
            background-color: antiquewhite;
        }
        .box3{
            width: 170px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">会是谁呢</div>
    </div>
    <div class="box3">
        <button id="btn" value="开始滚动" >开始滚动</button>
        <button id="btn1" value="停止滚动" >停止滚动</button>
    </div>
    <script>
        var btn =document.getElementById("btn")
        var btn1 =document.getElementById("btn1")
        var box2 =document.getElementsByClassName("box2")[0];
        
        btn.onclick = function(){
            // if(this.value === "开始滚动"){
                function time1(){
                    var arr = ["软开基地公众号","01010105谭耀","01010104廖孔瑞","02010107李炫宇","000301011狄珂宇","000301015曾煜晴","000301016宁雅轩","000301020姜宏瑞","000301024杨辰曦","000301052张译","000301056曹健翔","000301057胡海浩","000301059杨智","000301060杨秭佳","000301061裴昊悦","000301064赵思彤","000301067王璐璐","000301068赵家璞","000301069吴楚越","000301076吴彦洁","000301079陈俊文","000301084张宸伟","000301087曾宇豪","000301088周心悦","000301091朱晨奕","000301121谢幸烨","000301151夏祺","000301160强薇","01000001吴昌平","02010102李奥","02010104方海英","02010105李建民","000301058王维康"];

                    var index = parseInt(Math.random() * arr.length);
                    box2.innerHTML = arr[index];
                }
                    time2 = setInterval(time1, 1);
            // }
        }
        btn1.onclick = function(){
            // if(this.value = "停止滚动"){
                clearInterval(time2);
            // }
        }
        
    </script>
</body>
</html>

 效果：

屏幕录制 2023-11-26 230056

题六：

要求：

设计思路：首先标题和内容各自设置四个盒子

然后通过循环给每个标题盒子加上自定义名，并加上点击事件，通过for循环先将所有装着内容的盒子的状态设置为none，然后再给点击的标题对应的内容盒子加上block，就成功复原了。 

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            width: 500px;
            height: 50px;
            display: flex;
            background-color: aqua;
            margin: auto;
        }
        #box li{
            flex: 1;
            border: 1px solid blue;
            text-align: center;
            line-height: 50px;
        }
        #box1{
            width: 500px;
            height: 280px;
            background-color: aqua;
            margin: auto;
        }
        #box1 li{
            display: none;
            width: 500px;
            height: 280px;
            color: rgba(178, 8, 8, 0.5);
            
        }
        #box .choose{
            color: rgb(249, 18, 18);
            background-color: blanchedalmond;
            
        }
        #box1 .choose{
            display: block;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li class="choose">英雄联盟</li>
        <li>DOTA</li>
        <li>风暴英雄</li>
        <li>300英雄</li>
    </ul>
    <ul id="box1">
        <li class="choose" style="background-image: url(a1.webp); background-repeat: no-repeat; background-size: contain;">
            《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。
        </li>
        <li style="background-image: url(a2.webp); background-repeat: no-repeat; background-size: contain; color: rgb(253, 253, 9, 0.7);">
            《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。
        </li>
        <li style="background-image: url(a3.webp); background-repeat: no-repeat; background-size: contain; color: rgba(58, 9, 253, 0.6);">
            《风暴英雄》 是由暴雪娱乐公司开发的一款运行在Windows和Mac OS上的在线多人竞技PC游戏。
            游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》。它是一款道具收费的游戏，与《星际争霸Ⅱ》基于同一引擎开发。
        </li>
        <li style="background-image: url(a5.webp); background-repeat: no-repeat; background-size: contain;">
            <div style=" color: rgba(93, 10, 247, 0.6) ;width: 200px; margin-left: 300px;">《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
            </div>
        </li>
    </ul>
    <script>
        var obox = document.querySelectorAll("#box li")
        var obox1 = document.querySelectorAll("#box1 li")
        // console.log(document.querySelectorAll("#box li")) 
        for(i=0;i<obox.length;i++){
            obox[i].dataset.index = i
            obox[i].onclick = handle
        }
        
        function handle(){
            for(var m = 0;m<obox1.length; m++){
                obox[m].classList.remove("choose")
                obox1[m].classList.remove("choose")
                var index1 = this.dataset.index
            }
            obox[index1].classList.add("choose")
            obox1[index1].classList.add("choose")
        }
    </script>
</body>
</html>

效果：

屏幕录制 2023-11-26 230130

题七：

要求：

设计思路：

 首先设置三类数组，一类是省级的，一类是市级的，一类是区级的，，每个数组中都放入对应的对象和元素，然后通过映射的方法动态的添加option到菜单栏里面，接下来就是设置函数并用if语句，根据点击的选项序数来进行想要的下一级选项显示具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级菜单联动</title>
</head>
<body>
    <form>
        <select id="country" onclick="inn()">
            <option>请选择所在国家</option>
        </select>
        <select id="province" onclick="func1()">
            <option>请选择所在省市</option>
        </select>
        <select id="city">
            <option>请选择所在城市</option>
        </select>
    </form>
    <script>
        var countrysa = [
            {
                countrys : "中国"
            },
            {
                countrys : "美国"
            },
        ]
        var provincesa = [
            [
                {
                    provinces : "江西"
                },
                {
                    provinces : "江苏"
                },
            ],
            [
                {
                    provinces : "佛罗里达州"
                },
                {
                    provinces : "阿拉斯加州"
                },
            ]
        ]
        var citysa = [
            [
                {
                    citys : "南昌"
                },
                {
                    citys : "上饶"
                },
            ],
            [
                {
                    citys : "扬州"
                },
                {
                    citys : "南通"
                },
            ],
            [
                {
                    citys : "迈阿密"
                },
                {
                    citys : "圣彼德斯堡"
                },
            ],
            [
                {
                    citys : "朱诺市"
                },
                {
                    citys : "费尔班克斯"
                },
            ]
        ]

        var country = document.getElementById("country");

        var province = document.querySelectorAll("#province");

        var city = document.getElementById("city");
        
        function renderHTML1(arr){
            country.innerHTML += arr.map(function(item){
            return `<select id="country">
            <option>${item.countrys}</option>
        </select>`
        }).join("")
    }
    renderHTML1(countrysa)
        
        function inn(){

			var index = country.selectedIndex;
            console.log(index)

            function renderHTML(arr){
                province[0].innerHTML = arr.map(function(item){
                return `<select id="province">
                <option>${item.provinces}</option>
            </select>`
            }).join("")
        }
            if(index==1){

                renderHTML(provincesa[0])
                    
            }else if(index==2){
                renderHTML(provincesa[1])
                    
            }
		}
    function func1() {
        
            var indexs = province[0].selectedIndex;
            console.log(indexs)

            var selectElement = document.getElementById('province');

            var selectedOption = selectElement.options[selectElement.selectedIndex]

            var optionText = selectedOption.text;

            function renderHTML1(arr1){
                city.innerHTML = arr1.map(function(item){
                return `<select id="city">
                <option>${item.citys}</option>
            </select>`
            }).join("")
        }
            if(indexs==0&&optionText=="江西"){

                renderHTML1(citysa[0])
                    
            }else if(indexs==1&&optionText=="江苏"){
                renderHTML1(citysa[1])
                    
            }
            function renderHTML2(arr){
                city.innerHTML = arr.map(function(items){
                return `<select id="city">
                <option>${items.citys}</option>
            </select>`
            }).join("")
            }
            if(indexs==0&&optionText=="佛罗里达州"){

                renderHTML2(citysa[2])
                    
            }else if(indexs==1&&optionText=="阿拉斯加州"){
                renderHTML2(citysa[3])
                    
            }
            
    }
    </script>
</body>
</html>

效果：

屏幕录制 2023-11-26 230209

 题八：

要求：

设计思路：

首先我设置了一个初始的数组，里面装了十条个人信息，然后通过对象的遍历方法，将他们全部动态插入到表单中，然后就是颜色判断函数的设置，通过if语句的i除二余一就是黑色，其它的则是白色的方法将其设置成黑白相间的形式，然后是删除函数的设置，先通过对块级作用域的运用精确的将函数绑定在每个点击对象上，然后通过remove属性删除节点，之后再调用一遍颜色函数，保证删除后的表单依旧符合要求的黑白间变色。最后就是创建函数的设置，这里我是直接调用 prompt输入框进行输入，然后将输入的数据加入一个对象中，再将该对象插入之前的数组中去，最后就是渲染到页面中去，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table {
            width: 812px;
            border: 1px solid black;
            border-color: black;
            text-align: center;
        }
        #box1{
            width: 815px;
            background-color: aqua;
            margin: 100px auto;
            height: 800px;
        }
        tr{
            width: 812px;
        }
        #box3{
            width: 812px;
            border: 1px solid black;
            border-color: black;
            text-align: center;
            font-size: 12px;
        }
        th,td{
            width: 812px;
        }
    </style>
</head>
<body>
    <div id="box1">
        <table cellspacing="1px">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>二级学院</th>
                    <th>班级</th>
                    <th>专业</th>
                    <th>辅导员</th>
                    <th>
                        <button id="box4" onclick="handle3();handle2()">添加信息</button>
                    </th>
                </tr>
            </thead>
            <tbody id="box3">
				
			</tbody>   
        </table>
        
    </div>
    <script>
        var arr = [
            {
                xuehao:"1号",
                name:"张一",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李一"
            }
            ,
            {
                xuehao:"2号",
                name:"张二",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李二"
            }
            ,
            {
                xuehao:"3号",
                name:"张三",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李三"
            }
            ,
            {
                xuehao:"4号",
                name:"张四",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李四"
            }
            ,
            {
                xuehao:"5号",
                name:"张五",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李五"
            }
            ,
            {
                xuehao:"6号",
                name:"张六",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李六"
            }
            ,
            {
                xuehao:"7号",
                name:"张七",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李七"
            }
            ,
            {
                xuehao:"8号",
                name:"张八",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李八"
            }
            ,
            {
                xuehao:"9号",
                name:"张九",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李九"
            }
            ,
            {
                xuehao:"10号",
                name:"张十",
                xingbie:"男",
                erjixuanyuan:"计算机工程学院",
                banji:"七班",
                zhuanye:"软件工程",
                fudaoyuan:"李十"
            }
        ]
        
        for(var i=0;i<arr.length;i++){

        var oli = document.createElement("tr")
        //创建三个li标签
        var oli1 = document.createElement("button")
        // box3.appendChild(oli1)
        box3.appendChild(oli)
        
        for (var a in arr[i]) {    //创建列的
                var tds = document.createElement('td');
                oli.appendChild(tds);
                oli.appendChild(oli1)
                tds.innerHTML = arr[i][a];
            }
            
            oli1.innerHTML = "删除"

            oli1.onclick = handler
            
            //这里应由其注意的是在原先没有创建目标标签并在script中创建了目标标签时，想要给其赋上想要的自定义属性，必须等其创建号之后再去赋予其新属性，即自定义属性的赋予应放在创建步骤的后面。
            
        }
        function handler8(){
            for(var i=0;i<=box3.children.length-1;i++){
                var allbutton = document.querySelectorAll("tr button")

                var allli = document.querySelectorAll("#box3 tr")
            }
        }
        
        var x = 9
        
        function handle3(){
            x++
            var res1 = prompt("请输入你的学号")
            var res2 = prompt("请输入你的姓名")
            var res3 = prompt("请输入你的性别")
            var res4 = prompt("请输入你的二级学院")
            var res5 = prompt("请输入你的班级")
            var res6 = prompt("请输入你的专业")
            var res7 = prompt("请输入你的辅导员")

            var obj = new Object()
            
                obj.xuehao= res1
                obj.name=res2
                obj.xingbie=res3
                obj.erjixuanyuan=res4
                obj.banji=res5
                obj.zhuanye=res6
                obj.fudaoyuan=res7

                arr.push(obj)
                
            console.log(obj,arr)
            var oli = document.createElement("tr")
            //创建三个li标签
            var oli1 = document.createElement("button")

            // var res8 = arr8
            box3.appendChild(oli)
            
            for (var b in arr[x]) {
                var tds = document.createElement('td');
                    oli.appendChild(tds);
                    oli.appendChild(oli1)
                    tds.innerHTML = arr[x][b];
                    }

                oli1.innerHTML = "删除"
                oli1.onclick = handler
        }

        function handler(){
            for(var i=0;i<box3.children.length-1;i++){
                var allbutton = document.querySelectorAll("tr button")

                var allli = document.querySelectorAll("#box3 tr")

                var thisindex = i
            }
            
            var b = confirm("你确定删除吗")
            if(b==true){
            allli[thisindex].remove(allli[thisindex])

            handler8()

            handle2()
            console.log(box3.children.length-2)
            }else{
            alert("你已取消删除")
            }
        
        }
        
        handle2()
        function handle2(){
        var trs = box3.children
        console.log(trs.length,trs)
        for (let i = 0; i < trs.length; i++) {

            // 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{
            if (i % 2 == 1) {

                // 给奇数这一行的颜色设置为粉色pink
                trs[i].style.backgroundColor = "black";
                trs[i].style.color = "white";
                
            } else {
                // }else{
                // 否则设置为白色的
                trs[i].style.backgroundColor = "white";
                trs[i].style.color = "black";
            }
        }
    }
    
    </script>
</body>
</html>

效果：

屏幕录制 2023-11-26 230327

题九：

要求：

设计思路，

首先将要求的输入框给写出来，然后我给每个input框都设置了一个输入内容的最小和最大值并且搭配上正则表达式，输入内容符合提交按钮就有用，如果不符合则变为禁用只读效果，当然每个判断函数中都加了判断提示，最后就是验证码的生成。具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-image: url(aaaa.jpg);
            width: 595px;
            height: 520px;
            margin: auto;
            background-size: contain;
            background-repeat: no-repeat;
            border: 1px solid black;
            padding: 20px;
            color: rgb(8, 254, 90)
        }
        .box2{
            width: 130px;
            font-size: 26px;
            margin: auto;
            letter-spacing: 2px;
        }
        input:focus::placeholder{
            opacity: 0;
        }

    </style>
</head>
<body>
    <div id="box1">
        <div class="box2">
            注册表单
        </div>
        <div style="margin-top: 30px;">
            <span style="padding-right: 11px;">
                昵称：
            </span>
            <input type="text" id="btn5" placeholder="请输入你的昵称,不超过10个">
        </div>
        <div>
            <span style="padding-right: 11px;">
                姓名：
            </span>
            <input type="text" id="btn6" placeholder="请输入你的姓名">
        </div>
        <div >
            <span style="padding-right: 24px;">
                Q&nbsp;Q:
            </span> 
            <input type="number"  id="btn7" placeholder="请输入你的QQ">
        </div>
        <div>
            手机号：<input type="number" id="btn11" placeholder="请输入你的手机号">
        </div>
        <div>
            <span style="padding-right: 11px;">
                邮箱：
            </span>
            <input type="email" name="email" id="btn8" placeholder="请输入你的邮箱地址">
        </div>
        <div>
            <span style="padding-right: 11px;">
                密码：
            </span>
            <input type="text" id="btn9" placeholder="请输入你的密码">
        </div>
        <div>
            <span>
                确认密码：
            </span>
            <input type="text" id="btn10" placeholder="请再次确认你的密码">
        </div>
        <div>
            <input type="text" placeholder="请输入验证码" id="btn4">
            <button id="btn3" onclick="fn3()">点击获取验证码</button>
        </div>
        <div>
            <button id="btn1" style="width: 200px; float: left;" disabled>提交</button>
            <button id="btn100" style="width: 200px; display: none; float: left;">提交</button>
            <button id="btn2" onclick="fn2()" style="float: left;">重置</button>
        </div>
    </div>

    <script>
        var btn1 = document.getElementById("btn1")
        console.log(btn1)
        function fn2(){
            var b = confirm("请确认重置")//想要在控制台同步得到输入的值就以此模板来写。
            if(b==true){
                alert("重置成功")
            }else{
                alert("取消成功")
            }
            var btn2 = document.getElementById("btn2")
            var btn3 = document.getElementById("btn3")
            var btn4 = document.getElementById("btn4")
            var btn5 = document.getElementById("btn5")
            var btn6 = document.getElementById("btn6")
            var btn7 = document.getElementById("btn7")
            var btn8 = document.getElementById("btn8")
            var btn9 = document.getElementById("btn9")
            var btn10 = document.getElementById("btn10")
            var btn11 = document.getElementById("btn11")
            btn2.value=""
            btn3.value=""
            btn4.value=""
            btn5.value=""
            btn6.value=""
            btn7.value=""
            btn8.value=""
            btn9.value=""
            btn10.value=""
            btn11.value=""
        }
        var btn3 = document.getElementById("btn3")
        var btn9 = document.getElementById("btn9")
        var btn10 = document.getElementById("btn10")

        btn5.onfocus = function(){
            console.log(btn5.value)
        }
        btn5.onblur = function(){
            const maxlength1 = 10
            // console.log(btn5.value,reg1.exec(btn5.value),reg1.test(btn5.value))
            if(btn5.value.length<maxlength1){
                alert("昵称正确")
                document.getElementById("btn1").style.display="none";//隐藏
                document.getElementById("btn100").style.display="block";//显示
            }else{
                alert("昵称错误")
                document.getElementById("btn1").style.display="block";//显示
                document.getElementById("btn100").style.display="none";//隐藏
            }
        }
        
        
        btn6.onfocus = function(){
            console.log(btn6.value)
        }
        btn6.onblur = function(){
            const maxlength2 = 4
            // console.log(btn5.value,reg1.exec(btn5.value),reg1.test(btn5.value))
            if(btn6.value.length<=maxlength2){
                alert("名字正确")
                document.getElementById("btn1").style.display="none";//隐藏
                document.getElementById("btn100").style.display="block";//显示
            }else{
                alert("名字错误")
                document.getElementById("btn1").style.display="block";//显示
                document.getElementById("btn100").style.display="none";//隐藏
            }
        }

        btn7.onfocus = function(){
            console.log(btn7.value)
        }
        btn7.onblur = function(){
            const maxlength3 = 10
            const minlength1 = 5
            // console.log(btn5.value,reg1.exec(btn5.value),reg1.test(btn5.value))
            if(btn7.value.length<=maxlength3&&btn7.value.length>=minlength1){
                alert("QQ号正确")
                document.getElementById("btn1").style.display="none";//隐藏
                document.getElementById("btn100").style.display="block";//显示
            }else{
                alert("QQ号错误")
                document.getElementById("btn1").style.display="block";//显示
                document.getElementById("btn100").style.display="none";//隐藏
            }
        }

        btn11.onfocus = function(){
            console.log(btn11.value)
        }
        btn11.onblur = function(){
            const maxlength4 = 11
            // console.log(btn5.value,reg1.exec(btn5.value),reg1.test(btn5.value))
            if(btn11.value.length=maxlength4){
                alert("手机号正确")
                document.getElementById("btn1").style.display="none";//隐藏
                document.getElementById("btn100").style.display="block";//显示
            }else{
                alert("手机号错误")
                document.getElementById("btn1").style.display="block";//显示
                document.getElementById("btn100").style.display="none";//隐藏
            }
        }


        var reg = /[a-z]/g
        var reg1 = /\d/g

        btn9.onfocus = function(){
            console.log(btn9.value)
        }
        btn9.onblur = function(){
            const maxlength5 = 16
            const minlength2 = 8
            if(btn9.value.length<=maxlength5&&btn9.value.length>=minlength2&&reg.test(btn9.value)&&reg1.test(btn9.value)){
                alert("密码正确")
                document.getElementById("btn1").style.display="none";//隐藏
                document.getElementById("btn100").style.display="block";//显示
            }else{
                alert("密码错误")
                document.getElementById("btn1").style.display="block";//显示
                document.getElementById("btn100").style.display="none";//隐藏
            }
        }

        function fn3(){
            var index = parseInt(Math.random() * 10000);
            var arr = []
            arr.push(index)
            console.log(arr)
            btn3.innerHTML = index

        btn100.onclick = function(){
            var key = document.getElementById("btn4").value
            var a = confirm("请确认提交")//想要在控制台同步得到输入的值就以此模板来写。
            if(a==true&&key==index&&btn9.value==btn10.value){
                alert("提交成功")
            }else if(a==true&&key==index&&btn9!=btn10){
                alert("密码确认有误")
                fn3()
            }else if(a==true&&key!=index){
                alert("验证码错误")
                fn3()
            }else if(a==false){
                alert("取消成功")
            }
        }
        }
        fn3()
    </script>
</body>
</html>

效果：

屏幕录制 2023-11-26 230641

题十：

要求：

设计思路：

这里主要是对this指向和鼠标事件的运用，首先先设置一张待放大的图片，然后通过传入参数，将放大镜图片的大小和相对原图的位置进行实时调整。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题十</title>
    <style>
        
        *{
            margin: 0;
            padding: 0;
        }
        
        
        #box1{
            width: 200px;
            height: 180px;
            margin: auto;
            position: relative;
            margin: 100px;
            background-image: url("aaaa.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            background-color: yellow;
        }
        img{
            width: 500px;
            height: 500px;
            
            position: absolute;
        }
        #box2{
            width: 200px;
            height: 180px;
            overflow: hidden;
            left: 200px;
            top: 200px;
            display: none;
            pointer-events: none;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"><img src="aaaa.jpg" alt=""></div>
    </div>
    <script>
        box1.onmouseover = function(){
            // console.log(this.firstElementChild)
            this.firstElementChild.style.display = "block"
        }
        box1.onmouseout = function(){
            this.firstElementChild.style.display = "none"
        }

        box1.onmousemove = function(event){
            console.log(event.offsetX,event.offsetY)

            this.firstElementChild.style.left = event.offsetX + "px"
            this.firstElementChild.style.top = event.offsetY + "px"
            this.firstElementChild.firstElementChild.style.left = -event.offsetX*3 + "px"
            this.firstElementChild.firstElementChild.style.top = -event.offsetY*3 + "px"
            this.firstElementChild.firstElementChild.style.width = 600+"px"
            this.firstElementChild.firstElementChild.style.hight = 600+"px"
        }
   </script>
</body>
</html>

效果：

屏幕录制 2023-11-26 230731

题十一：

要求：

设计思路：

这里主要是对随机数的运用：如颜色随机，类似模板如下var n1 = parseInt(Math.random() * 255 + 1); 通过随机数的取整和设置，让文字大小随机，位置随机，前提是给装着文字的标签设置绝对定位，然后通过间隔计时器通过left++的方法，是弹幕向右移动，最后就是弹幕的触底清除，当弹幕右移的长度等于可视窗口宽度就将其清除：具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题11</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #bottom{
            width: 100%;
            height: 100px;
            padding-top: 20px;
            background-color: rgb(106, 106, 203);
            opacity: 0.5;
            position: fixed;
            bottom: 0;
        }
        #box1{
            width: 400px;
            height: 50px;
            margin: auto;
        }
        #box2{
            width: 50px;
            height: 50px;
            position: absolute;
            right: 0;
            top: 700px;
        }
        #bigbox{
            width: 100%;
            height: 100%;

        }
        span {
            width: 300px;
            height: 100px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
            }
        body{
            background-color: aqua;
        }
        .box4{
            display: none;
        }
    </style>
</head>
<body>
    <div id="bigbox">
        <div id="bottom">
            <div id="box1">
                <input type="text" style="width: 300px; height: 40px;" id="input">
                <button style="width: 80px; height: 40px;" id="btn">发送弹幕</button>
            </div>
        </div>
        <div id="box2">
            <button style="width: 50px; height: 50px; background-color: aqua; border-radius: 0.4;" id="box3" onclick="fn1()">
                收起
            </button>
        </div>
    </div>
    
    <script>
        window.onload = function (){
            btn.onclick=function(){
           
            var span = document.createElement("span")

            span.innerHTML = input.value; 

            bigbox.appendChild(span)

            //随机颜色设置
            var n1 = parseInt(Math.random() * 255 + 1);
            var n2 = parseInt(Math.random() * 255 + 1);
            var n3 = parseInt(Math.random() * 255 + 1);
            span.style.color = "rgb(" + n1 + "," + n2 + "," + n3 + ")"

            //随机字体大小设置
            span.style.fontSize = (parseInt(Math.random() * 50)) + 'px';

            //设置所在行
            span.style.top = (parseInt(Math.random() * 500)) + 'px';

            var body = document.body.clientWidth;  
 			 span.style.right = document.body.clientWidth+ 'px';//初始值为页面可见区域的值，此时不能再页面中显示
             var num = body;
            var timer = setInterval(function(){
                num--
                if(num < 0){
                    bigbox.removeChild(span)
                    clearInterval(timer);
 			    }
                span.style.right = num + 'px';
 			 
            },5)
        }
    }
    x=0
    function fn1(){
        var box3 = document.getElementById("box3")
        if(x==0){
            box3.innerHTML="弹出"
            document.getElementById("bottom").style.display="none";//隐藏
            x++
        }else{
            document.getElementById("bottom").style.display="block";//显示
            box3.innerHTML="收起"
            x=0
        }
    }
    </script>
</body>
</html>

效果：

屏幕录制 2023-11-26 230816

题十二：

要求：

设计思路：

这里主要是指针的旋转角度设置和旋转中心的设置，通过相关时间方法的调用，再将数据和角度的运算处理，得到每一秒，每一分指针的转动角度，从而实现刻度时针的编写，然后是电子时钟直接用new date就完事了。

具体代码如下：

<!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>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }

    .time-clock{
        width: 600px;
        height: 600px;
        border: 4px solid #000;
        border-radius: 50%;
        margin: 100px auto;

    }
    .time-clock ul{
        width: 100%;
        height: 100%;
        position: relative;
    }

    .time-clock ul li{
        width: 2px;
        height: 8px;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 0;
        transform-origin: center 300px;
    }

    #hour{
        width: 6px;
        height: 130px;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin:-130px 0 0 -3px;
        transform-origin:center bottom ;
    }
    #minu{
        width: 4px;
        height: 180px;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin:-180px 0 0 -2px;
        transform-origin:center bottom ;
    }
    #second{
        width: 2px;
        height: 230px;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -230px 0 0 0;
        transform-origin:center bottom ;
    }
    #ball{
        width: 20px;
        height: 20px;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        transform: translate(-50%,-50%);
    }
    #dianzijishiqi{
        width: 405px;
        height: 50px;
        margin: auto;
        background-color: aqua;
    }
    </style>
</head>
<body>
     <div class="time-clock"> 
        <ul>
         <div id="hour"></div>
         <div id="minu"></div>
         <div id="second"></div>
         <div id="ball"></div>
        </ul>
    </div>
    <div id="dianzijishiqi"></div>

    <script>
        var ul = document.querySelector("ul");
        var hour = document.querySelector("#hour");
        var minu = document.querySelector("#minu");
        var second = document.querySelector("#second");

        for(var i=0;i<60;i++){
            var li = document.createElement("li");
            li.style.transform = "rotate(" + i*6 + "deg)"; 
            if(i%5==0){
                li.style.height = "18px";
            }
            ul.appendChild(li);
        }

        function run(){ 
            var date = new Date();
            console.log(date)
            var hours = date.getHours();    
            var minutes = date.getMinutes(); 
            var Seconds = date.getSeconds(); 

            hour.style.transform = "rotate(" + (hours*30 + minutes/2) + "deg)";
            minu.style.transform = "rotate(" + minutes*6 + "deg)";
            second.style.transform = "rotate(" + Seconds*6 + "deg)";
        }
        run();

        setInterval(run,1000);
        
        var dianzijishiqi = document.getElementById("dianzijishiqi")
        
        function fn1(){
            setInterval(function(){
                var date1 = new Date()
                dianzijishiqi.innerHTML=date1
            },1000)
        }
        fn1()
    </script>
</body>
</html>

 效果：

屏幕录制 2023-11-26 230850

wo_shi_xiao_cai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript解析_使用JavaScript解析数学表达式
07-11 1728
javascript解析by Shalvah 由Shalvah 使用JavaScript解析数学表达式 (Parsing math expressions with JavaScript) A while ago, I wrote about tokenizing a math expression, with Javascript as the language of choice. The...
JavaScript Promise解析一个例子就够了
weixin_44182128的博客
04-22 1725
文章目录前言一、Promise构造函数二、一个例子三、总结 前言 Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。 一个例子即可让你逐步运用熟悉！ ` 一、Promise构造函数 es5写法 new Promise(function (resolve, reject) { // 要做的事情... }); es6写法 new Promise( (resolve, reject)=>{ // 要做的事情... }); Promise
彻底弄懂 JavaScript 异步任务处理原理
weixin_42125732的博客
06-13 4323
异步
深层理解JavaScript事件循环/微任务宏任务
wangteng4154的博客
12-07 630
JavaScript 在单个线程上执行所有操作，但您是否觉得它通过使用一些复杂的数据结构给人一种多线程的错觉？
新生代总结 JavaScript 运行机制解析
小丞同学
08-22 3343
新生代总结 JavaScript 运行机制解析 大家好，我是小丞同学，一名准大二的前端爱好者 这篇文章将带你一起学习理解 JavaScript 运行机制 愿你忠于自己，热爱生活 引言 在一些面试中，我们或许会被问到这样的问题 简述一下 JavaScript 的运行机制？ 你还有可能会被问这样简单的代码 setTimeout(function () { console.log('定时器开始啦') }); new Promise(function (r
JavaScript引擎工作原理解析
单眼皮丶儿的博客
01-05 1219
JavaScript引擎是什么 想知道JavaScript引擎是什么，首先要知道JavaScript（简称js）是什么，相信对于屏幕前的你来说，js是干什么的已经不用再多说，但还是有必要介绍下JavaScript的语言性质。 首先计算机不能直接理解高级语言，只能直接理解机器语言，所以必须要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。 高级语言有两种执行方式：一个是编译，一个是解释，与之对应的就是编译型语言和解释性语言，两种方式只是翻译的时间不同。 编译型语言写的程序执行之前，需要一个
深入理解JavaScript- JavaScript代码加载、解析、执行流程
javaThinker的专栏
03-10 749
对象可以拥有属性和方法。我们debug代码时，还没有执行到f时，JavaScript引擎已经为f生成了一个对象。也就是说，JavaScript引擎在编译阶段，已经为全局作用域的函数生成了函数对象放入了堆内存。⚠️注意：对于函数表达式，函数对象通常在执行到表达式时才创建。如果函数是在执行阶段动态创建的（例如，通过new Function()构造函数），那么它会在调用时创建并执行。
【JavaScript脚本宇宙】数据解析利器：JavaScript库全面解析
记录我的学习历程
07-14 733
本文将重点介绍六个流行的JavaScript库，分别是js-yaml、xml-js、csv-parse、ini、fast-csv和xlsx。每个库都包含了简介、安装与配置以及API概览。核心功能涵盖了对不同数据格式的解析和编码操作，并针对各自的使用场景给出了适当的示例。
Javascript闭包解析
cppp1111的博客
03-09 584
Javascript闭包 经典面试例子 下面展示一些 经典代码。 for(var i = 0; i < 5; i++){ setTimeout(function(){ console.log(i++); },4000); } console.log(i); // 输出结果 5 //等待4s,这里从5开始输出是因为setTimeout延迟了4s， //但是只延迟一次，等待4s到达时间后，会一次性将任务队列里的 i++ 运行出来 5 6 7 8 9 ...
《现代Javascript高级教程》JavaScript引擎的工作原理：代码解析与执行
linwu的博客
07-04 567
JavaScript引擎是一种解释和执行JavaScript代码的软件或硬件组件。它负责将JavaScript代码转换为可执行的指令，并在计算机或设备上执行这些指令。每个浏览器都有自己的JavaScript引擎，用于在浏览器中执行JavaScript代码。V8引擎：由Google开发，用于Google Chrome浏览器和Node.js服务器环境。SpiderMonkey引擎：由Mozilla开发，用于Mozilla Firefox浏览器。JavaScriptCore引擎。
JavaScript单线程和任务队列原理解析
10-15
当主线程的执行栈为空时，JavaScript引擎会检查任务队列，将其中的异步任务取出，按照一定的规则（宏任务和微任务的区别）放入执行栈进行执行。 任务队列分为多个类型，包括宏任务（macrotask）和微任务（microtask...
JavaScript事件循环及宏任务微任务原理解析
10-14
在JavaScript中，任务分为两类：同步任务和异步任务。同步任务是按顺序执行的，而异步任务分为宏任务（MacroTask）和微任务（MicroTask）。 宏任务主要包括：整个脚本、setTimeout、setInterval等。这些任务会在...
Acorn一个基于JavaScript的小型快速的JavaScript解析器
08-14
Acorn是一个轻量级且高效的JavaScript解析器，主要用于解析JavaScript源代码。它是开源的，完全用JavaScript编写，因此可以在浏览器环境中或Node.js服务器端运行。这个解析器的主要优点是其小巧的体积和快速的性能，...
网站基本布局CSS
m0_46608027的博客
07-24 769
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
Web安全:Web体系架构存在的安全问题和解决方室
程序员-张师傅
07-24 1476
Web体系架构在提供丰富功能和高效服务的同时，也面临着诸多安全问题。这些问题可能涉及数据泄露、服务中断、系统被控制等多个方面，对企业和个人造成不可估量的损失。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 781
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 330
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 327
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 254
【代码】TS如何处理js模块的类型？
《网页开发手记》：486个JavaScript特效解析
"网页开发手记——486个JavaScript网页特效详解" 本书是针对网页开发者的实用指南，尤其适合JavaScript初学者和有一定经验的Web开发人员。它详细讲解了JavaScript在网页特效和交互功能实现中的应用，总计包含了486...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值