JS案例

2022-02-05 14:40:36

目录

模态框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        #bg {
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        #content {
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: red;
            background-color: white;
            margin: 0 auto;

        }

        #cancel {
            position: absolute;
            top: 0;
            right: 0;
            color: white;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="button" value="弹出模态框" id="btn">
<script>
    var oBtn = document.getElementById(‘btn‘);
    var oDiv = document.createElement(‘div‘);
    var oP = document.createElement(‘p‘);
    var oSpan = document.createElement(‘span‘);

    oDiv.id = ‘bg‘;
    oP.id = ‘content‘;
    oSpan.id = ‘cancel‘;

    oP.innerHTML = ‘弹出模态框‘;
    oSpan.innerHTML = ‘X‘;

    oDiv.appendChild(oP);
    oP.appendChild(oSpan);


    oBtn.onclick = function () {
        this.parentNode.replaceChild(oDiv, this);
    };

    oSpan.onclick =function () {
        oDiv.parentNode.replaceChild(oBtn,oDiv);
    }

</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
        }

        #bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            display: none;
        }
        #content {
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -150px;
            background-color: white;
            width: 300px;
            height: 200px;

        }
        #content p:nth-child(3) {
            position: absolute;
            top: 100px;
        }


    </style>
</head>
<body>
<input type="button" value="弹出" id="btn">
<div id="bg">
    <div id="content">
        <p>
            <label for="inp-username">用户名: </label><input type="text" name="username" id="inp-username">
        </p>
        <p>
            <label for="inp-password">密码: </label><input type="text" name="username" id="inp-password">
        </p>
        <p>
            <input type="button" value="提交" >
            <input type="button" value="取消" id="cancel">
        </p>
    </div>
</div>

<script>
        var oBtn = document.getElementById(‘btn‘);
        var oBg = document.getElementById(‘bg‘);
        var oInpUsername=document.getElementById(‘inp-username‘);
        var oInpPwd=document.getElementById(‘inp-password‘);

        var oInp=document.getElementById(‘cancel‘);
        oBtn.onclick=function () {
            oBg.style.display=‘block‘;
        }

        oInp.onclick=function () {
            oInpUsername.value=‘‘;
            oInpPwd.value=‘‘;
            oBg.style.display=‘none‘
        }

</script>

</body>
</html>

点击有惊喜

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background: red;
            text-align: center;
            color: white;
            line-height: 200px;
            font-size: 23px;
            font-weight: bold;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="box">点击有惊喜！！！</div>
<script>
    var oBox = document.getElementsByClassName(‘box‘)[0];

    //初始化点击的次数。通过次数的增加来改变DOM的样式
    var a = 0;
    oBox.onclick = function () {
        a++;
        console.log(a % 4);
        if (a % 4 === 1) {
            this.style.background = ‘green‘;
            this.innerText = ‘继续点击哦！！！‘;
        } else if (a % 4 == 2) {
            this.style.background = ‘blue‘;
            this.innerText = ‘骗你的,傻逼‘;
        } else if (a % 4 == 3) {
            this.style.background = ‘transparent‘;
            this.innerText = ‘‘;
        } else {
            this.style.background = ‘red‘;
            this.innerText = ‘点击有惊喜！！！‘;
        }

    }
</script>
</body>
</html>

简易评论板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #comment {
            background-color: #b0b0b0;
            width: 500px;
        }

        #comment ul li {
            list-style: none;
            background-color: wheat;
            border: 1px dashed #000;
            margin: 0px 10px 10px;
            word-break: break-all;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<div id="comment">
    <p>评论内容：</p>
</div>
<div id="box">
    <p>留言内容：</p>
    <textarea name="" id="content" cols="30" rows="10"></textarea>
    <p>
        <input type="button" value="提交" id="btn">
        <input type="button" value="统计" id="calculate">
    </p>
</div>
<script>
    var comment = document.getElementById(‘comment‘);
    var box = document.getElementById(‘box‘);
    var submit = document.getElementById(‘submit‘);
    var content = document.getElementById(‘content‘);
    var btn = document.getElementById(‘btn‘);
    var calculate=document.getElementById(‘calculate‘);

    var ul = document.createElement(‘ul‘);
    comment.appendChild(ul);

    var count=0;
    btn.onclick = function () {
        var val = content.value;
        if (val.length != 0) {
            var date = new Date();
            var subTime = date.toLocaleString();

            var li = document.createElement(‘li‘);
            var p1 = document.createElement(‘h3‘);
            var p2 = document.createElement(‘p‘);

            var spans = document.getElementsByClassName(‘del‘);
            count=spans.length+1;

            p1.innerHTML = ‘#‘+‘<span class="num">‘+count+‘</span>‘+‘楼‘+‘    ‘+subTime + ‘<span class="del">    删除</span>‘;
            p2.innerHTML = val;
            li.appendChild(p1);
            li.appendChild(p2);

            ul.appendChild(li);
            content.value = ‘‘;
        }

        function aa() {
            var spans = document.getElementsByClassName(‘del‘);
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick=function (currentIndex) {
                    function bb() {
                        ul.removeChild(this.parentNode.parentNode);
                        count--;
                        var ss=document.getElementsByClassName(‘num‘);
                        for (var j=currentIndex;j<ss.length;j++){
                            ss[j].innerHTML=parseInt(ss[j].innerHTML)-1;
                        }
                        aa();
                    }
                    return bb;

                }(i);
            }
        }
        aa()

    };

    calculate.onclick = function () {
        alert(‘一共发布了‘+count+‘条评论‘);
    }
</script>

</body>
</html>

选项卡

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .tab {
            width: 480px;
            height: 200px;
            border: 1px solid red;
            margin: 0 auto;
        }

        ul li {
            list-style: none;
            width: 160px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #b0b0b0;
            float: left;
        }

        li.active {
            background-color: #55BBBB;
        }
        p {
            display: none;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: white;
        }
        p.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul>
        <li class="active">首页</li>
        <li>新闻</li>
        <li>图片</li>
    </ul>
    <p class="active">首页内容</p>
    <p>新闻内容</p>
    <p>图片内容</p>
</div>
<script>
    var aLi=document.getElementsByTagName(‘li‘);
    var aP=document.getElementsByTagName(‘p‘);
    for (var i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onclick=function () {
            for (var j=0;j<aLi.length;j++){
                aLi[j].className=‘‘;
                aP[j].className=‘‘;
            }
            this.className=‘active‘;
            aP[this.index].className=‘active‘;
        }
    }
</script>
</body>
</html>

仿淘宝搜索框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #search {
            position: relative;
        }

        input {
            outline: none;
            display: block;
            border: 2px solid #f2a83c;
            border-radius: 10px;
            width: 490px;
            height: 50px;
            margin-top: 20px;
        }

        label {
            position: absolute;
            top: 20px;
            left: 10px;
            font-size: 8px;
            color: gray;
        }
    </style>
</head>
<body>
<div id="search">
    <input type="text" id="text">
    <label for="text" id="msg">输入商品</label>
</div>

<script>
    var txt = document.getElementById(‘text‘);
    var msg = document.getElementById(‘msg‘);

    //检测用户表单输入的时候
    txt.oninput = function () {
        //控制元素显示隐藏
        if (this.value == ‘‘) {
            msg.style.display = ‘block‘;
        } else {
            msg.style.display = ‘none‘;
        }
    }
</script>
</body>
</html>

获取当前时间

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>


<script>
    setInterval(function () {

        var date = new Date();

        var y = date.getFullYear();
        var m = date.getMonth();
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();

        //今天是2018年2月23日 8:23:09


        document.body.innerHTML = "今天是" + y + ‘年‘ + num(m + 1) + "月" + num(d) + "日" + num(h) + ":" + num(min) + ":" + num(s)

    }, 1000)

    function num(n) {
        if (n < 10) {
            return "0" + n;

        }
        return n
    }
</script>
</body>
</html>

匀速运动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #FF0000;
            position: absolute;
            top: 50px;
            left: 0px;
        }
    </style>
</head>
<body>
<div id="wrap">

    <button id="btn1">前进</button>
    <button id="btn2">后退</button>
    <div class="box" id="box1">

    </div>

</div>

<script>
    var btn1 = document.getElementById(‘btn1‘);
    var btn2 = document.getElementById(‘btn2‘);

    var box1 = document.getElementById(‘box1‘)

    var count = 0;
    var time1 = null;
    var time2 = null;

    btn1.onclick = function () {
        clearInterval(time2);

        time1 = setInterval(function () {
            count += 10;
            if (count > 1000) {
                box1.style.left = ‘1000px‘;
                box1.style.borderRadius = ‘50%‘;

                clearInterval(time1);
            } else {
                box1.style.left = count + ‘px‘;
                box1.style.borderRadius = count / 2000 * 100 + ‘%‘;
            }

        }, 10)

    };
    btn2.onclick = function () {
        clearInterval(time1);
        time2 = setInterval(function () {
            count -= 10;
            if (count <= 0) {
                box1.style.left = ‘0px‘;
                box1.style.borderRadius = ‘‘;

                clearInterval(time2);
            } else {
                box1.style.left = count + ‘px‘;
                box1.style.borderRadius = count / 2000 * 100 + ‘%‘;
                ;

            }

        }, 10)

    }

</script>
</body>
</html>

5s后关闭广告

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            position: fixed;
            width: 300px;
        }

        ul {
            list-style: none;
        }

        #left {
            left: 0;
        }

        #right {
            right: 0;
        }

        ul li {
            font-size: 25px;
        }
    </style>
</head>
<body>
<img src="images/1.jpg" id="left">
<img src="images/1.jpg" id="right">
<ul>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>
    <li>屠龙宝刀，点击就送</li>

</ul>

<script>
    window.onload = function () {
        var left = document.getElementById(‘left‘);
        var right = document.getElementById(‘right‘);

        setTimeout(function () {
            left.style.display = ‘none‘;
            right.style.display = ‘none‘;


        }, 5000)
    }

</script>
</body>
</html>

小米滚动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 512px;
            height: 400px;
            border: 3px solid #808080;
            position: relative;
            overflow: hidden;
            margin: 100px auto;
        }

        .wrap span {
            width: 100%;
            height: 200px;
            position: absolute;
            background-color: transparent;
            border: 1px solid #000;
        }

        .up {
            top: 0;
        }

        .down {
            bottom: 0;
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="box" class="wrap">
    <img src="images/mi.png" id="xiaomi">

    <span class="up" id="picUp">11111</span>

    <span class="down" id="picDown">22222</span>

</div>

<script>
    var up = document.getElementById(‘picUp‘);
    var down = document.getElementById(‘picDown‘);

    var img = document.getElementById(‘xiaomi‘);

    var count = 0;
    var time = null;
    //鼠标移入的时候吧
    up.onmouseover = function () {

        //不管怎样 上来先清定时器
        clearInterval(time);
        time = setInterval(function () {
            count -= 3;

            count >= -1070 ? img.style.top = count + ‘px‘ : clearInterval(time);


        }, 30)
    };
    down.onmouseover = function () {
        clearInterval(time);

        time = setInterval(function () {
            count += 1;

            count < 0 ? img.style.top = count + ‘px‘ : clearInterval(time);


        }, 30)
    }

</script>
</body>
</html>

无缝轮播

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 700px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
            border: 1px solid #000;
        }

        ul li {
            float: left;
        }

        .box ul {
            width: 500%;
            position: absolute;
            top: 0;
            left: 0;

        }
        img {
            width: 600px;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225724530-539090864.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225751362-1832630751.jpg"/></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg"/></li>

    </ul>

</div>

<script>
    var box = document.getElementsByClassName(‘box‘)[0];

    var ul = box.children[0];
   
    var num = 0;
    var timer = null;

    timer = setInterval(autoPlay, 3);

    //函数的声明
    function autoPlay() {
        num--;

        num <= -2400? num = 0: num;
        ul.style.left = num + ‘px‘

    }

    //鼠标移动上去
    box.onmouseover = function () {
        clearInterval(timer)
    };
    box.onmouseout = function () {
        timer = setInterval(autoPlay, 3);
    }
</script>
</body>
</html>

用户名和密码校验

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            background-color: red;
        }

    </style>
</head>
<body>
<form>
    <p>
        <input type="text" name="username">
        <span></span>
    </p>

    <p>
        <input type="password" name="password">
        <span></span>

    </p>

    <p>
        <input type="button" value="提交" id="btn">
    </p>
</form>


<script>
    var isOk1=false
    var reg1=new RegExp(‘(?!^[0-9]+$)(?!^[a-zA-Z]+$)^[0-9A-Za-z]{4}$‘)
    var inp1 = document.getElementsByName("username")[0]

    inp1.onblur=function () {
        var res=reg1.test(this.value)
        this.style.border="1px solid red"

        if (!res) {
            this.nextElementSibling.innerText="用户名必须由4位字母和数字组成"
            setTimeout(function () {
                inp1.nextElementSibling.innerText=""
                inp1.value=""
            },3000)
        }else {
            this.style.border="1px solid green"
            isOk1=true
        }
    }


    var isOk2=false
    var reg2=new RegExp(‘(?!^[0-9]+$)(?!^[a-zA-Z]+$)^[0-9A-Za-z]{6}$‘)
    var inp2 = document.getElementsByName("password")[0]

    inp2.onblur=function () {
        var res=reg2.test(this.value)
        this.style.border="1px solid red"

        if (!res) {
            this.nextElementSibling.innerText="密码必须由6位字母和数字组成"
            setTimeout(function () {
                inp2.nextElementSibling.innerText=""
                inp2.value=""
            },3000)
        }else {
            this.style.border="1px solid green"
            isOk2=true
        }
    }

    var btn=document.getElementById("btn")
    btn.onclick=function () {
        if(isOk1 && isOk2) {
            alert("提交成功")
        }else {
            alert("请重新填写")
        }
    }
</script>
</body>
</html>

JS案例

上一篇：微信支付 chooseWXPay:fail


下一篇：*部门没组织机构代码、法人证书，怎么开通认证微信公众平台？