• JS案例


    模态框

    <!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;
                 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;
                 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;
                 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 {
                 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;
                 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 {
                 480px;
                height: 200px;
                border: 1px solid red;
                margin: 0 auto;
            }
    
            ul li {
                list-style: none;
                 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;
                 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 {
                 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;
                 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 {
                 512px;
                height: 400px;
                border: 3px solid #808080;
                position: relative;
                overflow: hidden;
                margin: 100px auto;
            }
    
            .wrap span {
                 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 {
                 600px;
                height: 700px;
                margin: 50px auto;
                overflow: hidden;
                position: relative;
                border: 1px solid #000;
            }
    
            ul li {
                float: left;
            }
    
            .box ul {
                 500%;
                position: absolute;
                top: 0;
                left: 0;
    
            }
            img {
                 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>
    
  • 相关阅读:
    第15章-输入/输出 --- 字节流和字符流
    第15章-输入/输出 --- 理解Java的IO流
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/ChiRou/p/14526001.html
Copyright © 2020-2023  润新知