本人模板文件

萧寂173
76 阅读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>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <p></p>
    <p></p>
    <p></p>

    <script !src="">
        let p = document.querySelectorAll("p")
        let xs = p[0];
        let fz = p[1]
        let m = p[2]

        //初始值
        let s = 3;
        let f = 0;
        let i = 0;
        //第一种方法
        // var timer=setInterval(function (){
        //     if(i>0){
        //         i--
        //     }else if(i==0&&f>0){
        //         f--;i=59;
        //     }else if(i==0&&f==0&&s>0){
        //         s--;
        //         f=59;
        //         i=59;
        //     }else {
        //         clearInterval(timer)
        //     }
        //
        //     xs.innerHTML=s>9?s:"0"+s
        //     fz.innerHTML=f>9?f:"0"+f
        //     m.innerHTML=i>9?i:"0"+i
        // },1000)


        //第二种方法
        var ms = s * 60 * 60 + f * 60 + i
        var temer = setInterval(function () {
            if (ms > 0) {
                ms--
            } else {
                clearInterval(temer)
            }

            var s = parseInt(ms / (60 * 60));
            var f = parseInt((ms - s * 60 * 60) / 60);
            var i = ms - s * 60 * 60 - f * 60
            xs.innerHTML = s > 9 ? s : "0" + s
            fz.innerHTML = f > 9 ? f : "0" + f
            m.innerHTML = i > 9 ? i : "0" + i
        }, 100)
    </script>
</body>

</html>

轮播图显示隐藏带圆圈


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        section {
            width: 100%;
            height: 500px;
            position: relative;
        }

        main {
            width: 300px;
            height: 200px;
            border: 1px solid;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        div {
            width: 300px;
            height: 200px;
            position: absolute;
            top: 0;
            display: none;
        }

        .xs {
            display: block;
        }

        main>a:nth-child(1) {
            position: absolute;
            left: 0;
            top: 50%;
        }

        main>a:nth-child(2) {
            position: absolute;
            right: 0;
            top: 50%;
        }

        ul {
            display: flex;
            position: absolute;
            bottom: 0;
        }

        li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid;
            background-color: #ccc;
        }

        .red {
            background-color: red;
        }

        a {
            width: 20px;
            height: 20px;
            opacity: 0;
            color: white;
            z-index: 3;
        }

        div:nth-of-type(1) {
            background-color: khaki;
        }

        h2 {
            color: white;
        }

        div:nth-of-type(2) {
            background-color: deepskyblue;
        }

        div:nth-of-type(3) {
            background-color: blue;
        }

        div:nth-of-type(4) {
            background-color: yellow;
        }

        div:nth-of-type(5) {
            background-color: pink;
        }

        div:nth-of-type(6) {
            background-color: green;
        }

        div:nth-of-type(7) {
            background-color: orange;
        }

        div:nth-of-type(8) {
            background-color: darkviolet;
        }
    </style>
</head>

<body>
    <section>
        <main>
            <a href="javascript:;">&lt;</a>
            <a href="javascript:;">&gt;</a>
            <div class="xs">
                <h2>第一张图片信息</h2>
            </div>
            <div>
                <h2>第二张图片信息</h2>
            </div>
            <div>
                <h2>第三张图片信息</h2>
            </div>
            <div>
                <h2>第四张图片信息</h2>
            </div>
            <div>
                <h2>第五张图片信息</h2>
            </div>
            <div>
                <h2>第六张图片信息</h2>
            </div>
            <div>
                <h2>第七张图片信息</h2>
            </div>
            <div>
                <h2>第八张图片信息</h2>
            </div>
            <ul>
            </ul>
        </main>
    </section>
    <script>
        var zb = document.querySelector("main>a:nth-child(1)")
        var a = document.querySelectorAll("a")
        var yb = document.querySelector("main>a:nth-child(2)")
        var main = document.querySelector("main")
        var div = document.querySelectorAll("div")
        var ul = document.querySelector("ul")
        //index控制图片的索引号
        let index = 0;
        //xj控制小圆圈
        var xj = 0;

        //块元素显示隐藏的排他思想
        function tupian() {
            document.querySelector(".xs").classList.remove("xs")
            div[index].classList.add("xs")
        }

        // for循环动态创建小圆圈
        for (let i = 0; i < div.length; i++) {
            //新创建的li标签
            var li = document.createElement("li")
            //将新标签追加到ul里面
            ul.appendChild(li)
            //设置index自定义属性，属性值为块的索引号
            li.setAttribute('index', i);
            //给新创建的元素一个点击事件，(不用for循环，这里的li指每一个元素)
            li.addEventListener("click", function () {
                //通过for循环，进行排他思想，将其他元素的样式去掉
                for (var j = 0; j < ul.children.length; j++) {
                    //双引号必须有个空格
                    ul.children[j].className = " "
                }
                //给当前被点击的元素添加样式
                this.className = "red"
                //获取刚刚创建的自定义属性的值，将值赋给index块的索引
                index = this.getAttribute("index")
                //调用图片的排他思想函数，使点击小圆圈，图片能跟着变化
                xj = index
                tupian()
            })
        }
        //给第一个元素添加默认样式
        ul.children[0].className = "red"
        //左侧按钮
        zb.addEventListener("click", function () {
            //块索引变化，小圆圈索引也变化，两者一一对应长度相等，可以共用div.length
            index--;
            xj--;
            //当索引小于0时，让这两个元素索引改为最大索引
            if (index < 0) {
                index = div.length - 1
                xj = div.length - 1
            }
            for (var j = 0; j < ul.children.length; j++) {
                //还是小圆圈的排他思想，双引号必须有个空格，点击左右按钮时小圆圈也发生变化
                ul.children[j].className = " "
            }
            ul.children[xj].className = "red"
            //最后调用块变化的函数
            tupian()
        })
        //右侧按钮
        yb.addEventListener("click", function () {
            index++;
            xj++;
            //当索引大于于div.length-1时，让这两个元素索引改为最小索引
            if (index > div.length - 1) {
                index = 0;
                xj = 0
            }
            for (var j = 0; j < ul.children.length; j++) {
                //还是小圆圈的排他思想，双引号必须有个空格，点击左右按钮时小圆圈也发生变化
                ul.children[j].className = " "
            }
            ul.children[xj].className = "red"
            //最后调用块变化的函数
            tupian()
        })
        //用定时器调用右侧按钮的点击效果，每一秒动一次
        let temer = setInterval(function () {
            yb.click();
        }, 1000)
        //当悬浮到main标签上，定时器停止
        main.addEventListener("mouseover", function () {
            //鼠标移入，箭头出现
            zb.style.opacity = "1"
            yb.style.opacity = "1"
            clearInterval(temer)
        })
        //当离开到main标签，定时器继续打开
        main.addEventListener("mouseout", function () {
            //鼠标移出，箭头消失
            zb.style.opacity = "0"
            yb.style.opacity = "0"
            temer = setInterval(function () {
                yb.click()
            }, 1000)
        })
    </script>
</body>

</html>

三级联动(全部渲染)


<!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>
</head>
<style>

</style>

<body>
    <select name="" id="s1"></select>
    <select name="" id="s2"></select>
    <select name="" id="s3"></select>
</body>

<script src="./js/三级联动的数据.js"></script>
<script>
    let index=0;
    let index2=0;
    var selects = document.querySelectorAll("select");
    data.forEach(function (value) {
        var option = document.createElement('option');
        option.innerHTML= value.name
        selects[0].appendChild(option);
    })

    for (let i = 0; i < data[0].children.length; i++) {
        var option3 = document.createElement("option")
        option3.innerHTML = data[0].children[0].name;
        selects[1].appendChild(option3);
    }

    for (let i = 0; i < data[0].children[0].children.length; i++) {
        var option2 = document.createElement("option")
        option2.innerHTML = data[0].children[0].children[i].name;
        selects[2].appendChild(option2);
    }




    selects[0].addEventListener("change", function (e) {

        //遍历清除其他option，不清除就会滞留上个元素的option
        document.querySelectorAll("#s2>option").forEach(function (value) {
            value.remove();
        })

       

        //第二层联动   selectedIndex当前对象（select第一层）的索引值

        //获取select当前对象的索引
        index = this.selectedIndex;


        //创建option并加入下拉框
        data[index].children.forEach(function (value) {
            var option = document.createElement('option');
            option.innerText = value.name;
            selects[1].appendChild(option);
        })
        //第三层联动
        document.querySelectorAll("#s3>option").forEach(function (value) {
            value.remove();
        })
        data[index].children[0].children.forEach(function (value) {
            var option4 = document.createElement('option');
            option4.innerText = value.name;
            selects[2].appendChild(option4);
        })
    }
    )



    selects[1].addEventListener("change", function () {
        document.querySelectorAll("#s3>option").forEach(function (value) {
            value.remove();
        })

        index2 = this.selectedIndex;
        data[index].children[index2].children.forEach(function (value) {
            var option4 = document.createElement('option');
            option4.innerText = value.name;
            selects[2].appendChild(option4);
            // console.log(data[index].children[0].children);
        })
    })


</script>

</html>

三级联动（非全部渲染）


<!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;
        }

        .bigBox {
            margin-top: 5vh;
            height: 90vh;
        }

        .box {
            margin: 0 auto;
            border: 1px solid;
            height: 220px;
            width: 1250px;
            overflow: auto;
        }

        ul {
            width: 1250px;
            display: flex;
            justify-content: space-arounds;
            flex-wrap: wrap;
        }

        li {
            list-style: none;
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid;
        }
    </style>
    <script src="./data.js"></script>
</head>

<body>
    <div class="bigBox">
        <div class="no1 box">
            <ul></ul>
        </div>
        <div class="no2 box">
            <ul></ul>
        </div>
        <div class="no3 box">
            <ul></ul>
        </div>
    </div>
    <script>
        var no1Ul = document.querySelector(".no1>ul")
        var no2Ul = document.querySelector(".no2>ul")
        var no3Ul = document.querySelector(".no3>ul")
        function addLi(value, Ul) {
            for (let i = 0; i < value.length; i++) {
                var li = document.createElement("li")
                li.innerText = value[i].name
                Ul.appendChild(li)
            }
        }
        function removeLi(Ul) {
            Ul.innerHTML = ""
        }
        addLi(data, no1Ul);

        console.log(no1Ul.children);

        var no1Li = document.querySelectorAll(".no1>ul>li")
        for (let i = 0; i < no1Li.length; i++) {
            no1Li[i].onclick = function () {
                removeLi(no2Ul)
                removeLi(no3Ul)
                addLi(data[i].children, no2Ul)
                var no2Li = document.querySelectorAll(".no2>ul>li")
                console.log(no2Li);
                for (let j = 0; j < no2Li.length; j++) {
                    no2Li[j].onclick = function () {
                        removeLi(no3Ul)
                        addLi(data[i].children[j].children, no3Ul)
                    }
                }
            }
        }
    </script>
</body>

</html>

三级联动的js文件

这个网上找地区的json文件即可，定义初始值var data={}

放大镜


<!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>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        #__bs_notify__ {
            display: none !important;
        }

        /*上面的选择器不要删,否则内置预览会有个黑色的块,在下方写页面其他选择器*/
        nav {
            display: flex;
        }

        .xt {
            width: 400px;
            height: 400px;
            border: 1px solid;
            position: relative;
        }

        .xt>img {
            width: 190px;
            height: 257px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

        .datu {
            width: 400px;
            height: 400px;
            margin-left: 50px;
            border: 1px solid;
            position: relative;
            overflow: hidden;
            /* display: none; */
        }

        .datu>p {
            position: absolute;
            left: 0;
            top: 0;
            width: 700px;
            height: 700px;
            z-index: 3;
        }

        .datu>p>img {
            width: 380px;
            height: 514px;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
        }

        .mask {
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: pink;
            opacity: .5;
            display: none;
        }
    </style>
</head>

<body>
    <nav>
        <div class="xt">
            <img src="https://www.apple.com.cn/v/iphone/home/bk/images/overview/compare/compare_iphone_14_pro__cjmfbiggqhpy_large.jpg"
                alt="">
            <p class="mask"></p>
        </div>
        <div class="datu">
            <p>
                <img src="https://www.apple.com.cn/v/iphone/home/bk/images/overview/compare/compare_iphone_14_pro__cjmfbiggqhpy_large.jpg"
                    alt="">
            </p>
        </div>
    </nav>

    <script>
        //获取所有元素
        let mask = document.querySelector(".mask");
        let datu = document.querySelector(".datu");
        let xt = document.querySelector(".xt");
        let p = document.querySelector(".datu>p")
        let nav = document.querySelector("nav")
        //鼠标移入显示mask块和放大的块
        xt.addEventListener("mouseover", function () {
            mask.style.display = "block"
            datu.style.display = "block"
        })
         xt.addEventListener("mouseout", function () {
            mask.style.display = "none"
            datu.style.display = "none"
         })
        //鼠标移入隐藏mask块和放大的块
        xt.addEventListener("mousemove", function (e) {
            //获取鼠标在浏览器中的坐标e.pageX，e.pageY 
            //offsetLeft获取当前对象的左边距和上边距
            //两者相减就是鼠标在盒子中的坐标
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;

            //将鼠标光标移入到遮罩层mask的中央位置
            var maskx = x - mask.offsetWidth / 2
            var masky = y - mask.offsetHeight / 2

            //遮罩层父元素的宽-遮罩层的宽，剩余的就是可移动部分，即:max为最大可移动距离
            var max = xt.offsetWidth - mask.offsetWidth
            if (maskx <= 0) {
                maskx = 0
            } else if (maskx >= max) {
                maskx = max;
            }
            //y坐标同上方解释同理
            if (masky <= 0) {
                masky = 0
            } else if (masky >= max) {
                masky = max;
            }

            // 将判断完的mask的xy坐标赋值给mask的上左边距
            mask.style.left = maskx + "px"
            mask.style.top = masky + "px"


            //大图跟着滚动                                                                         
            //大图片最大可移动距离，解释同max的一样
            var imgs = datu.offsetWidth - p.offsetWidth
            // 由1/2=x/4可得x=1*4/2    所以大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
            var bigx = maskx * imgs / max
            var bigy = masky * imgs / max

            //得到大图片移动距离，然后赋值给p标签上，让p标签处于小图的移动事件内，在小图移动，大图片跟着动
            p.style.left = bigx + "px"
            p.style.top = bigy + "px"
        })
    </script>

</body>

</html>

随机验证码


<!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>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
    </style>
</head>

<body>
    <script>
        function createVerificationCode() {
            var code = "";
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', "b", "c", "d", "e", "f", 'g', 'h', 'i', 'j',
                'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
                'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
                'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
                'U', 'V', 'W', 'X', 'Y', 'Z'];
            for (var i = 0; i < 4; i++) {
                var result = parseInt(Math.random() * arr.length);
                code += arr[result];
            }
            return code;
        }
        console.log(createVerificationCode());
    </script>
</body>
</html>
avatar
文章
阅读
粉丝