基础项目实用案例

文章目录

    • 倒计时
    • 动态生成表格
    • 发布留言
    • 密码框验证
    • 模态框拖拽

倒计时

  function countDown(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000;
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-3-19 21:00:00'));
        var date = new Date();
        console.log(date
        );

动态生成表格

 <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    style>
head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名th>
                <th>科目th>
                <th>成绩th>
                <th>姓名th>
                <th>姓名th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>1td>
                <td>1td>
                <td>1td>
                <td>1td>
            tr>
        tbody>
    table>
    //先准备好数据
        var datas = [{
            name: '小王',
            subject: 'JavaScript',
            score: 100,
            scor: 100
        }, {
            name: '小张',
            subject: 'JavaScript',
            score: 98,
            scor: 100
        }, {
            name: '小赵',
            subject: 'JavaScript',
            score: 99,
            scor: 100
        }];
        //往tbody里创建行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //行里面创建单元格
            for (var k in datas[i]) {
                //创建单元格
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);

            }
            //创建有删除的单元格
            var td = document.createElement('td');
            td.innerHTML = '删除';
            tr.appendChild(td);
        }
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

发布留言

 <style>
        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id="">123</textarea>
    <button>发布</button>
    <ul>
        <li>
            123
        </li>
    </ul>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function () {
            //创建元素
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                var li = document.createElement('li');
                //添加元素
                li.innerHTML = text.value + "删除";
                ul.insertBefore(li, ul.children[0]);
                //删除元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }
                }

            }
        }

密码框验证

 <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images\Snipaste_2023-03-19_11-22-17.png) no-repeat left center;
            padding-left: 20px;
        }

        .wrong {
            color: red;
            background-image: url(images\Snipaste_2023-03-19_11-22-17.png);
        }

        .right {
            color: green;
            background-image: url(images\Snipaste_2023-03-19_11-22-17.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        //获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //注册事件,失去焦点
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';  //改变类名
                message.innerHTML = '您输入的位数不对';
            } else {
                message.className = 'message right';  //改变类名
                message.innerHTML = '正确输入';
            }

        }

模态框拖拽

 <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
         
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
         
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
         
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
         
        .login-input-content {
            margin-top: 20px;
        }
         
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
         
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
         
        a {
            text-decoration: none;
            color: #000000;
        }
         
        .login-button a {
            display: block;
        }
         
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
         
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
         
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
         
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>
 
<body>
    <div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名:</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码:</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)
 
            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起,就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>

你可能感兴趣的:(javascript,开发语言,ecmascript)