第26天，字符跳动，弹出层效果

19年9月

发布日期: 2019-09-09

阅读次数:

字符跳动:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <font id="show" size='6'></font>
</body>
<script>
    var mes = '1234567890';
    var i = 0;
    setInterval(function() {
        if (i >= mes.length) i = 0;
        document.getElementById("show").innerHTML = show(i, mes);
        i++;
    }, 100);

    function show(i, mes) {
        //substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
        var tt = mes.substr(0, i);
        tt += '<font size=7 color=red>' + mes[i] + '</font>'
        //表示从i+1位置到末尾
        tt += mes.substr(i + 1);
        return tt;
    }
</script>

</html>

弹出层效果（自己的，下方还有完整版）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹出层</title>
</head>
<style>
    #model {
        width: 400px;
        height: 400px;
        background-color: blue;
        /* fixed固定定位 */
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -220px;
        margin-top: -170px;
        color: #fff;
        padding: 20px;
        /* 让界面位于最上方 */
        z-index: 10001;
        display: none;
    }
    
    #model span {
        /* 鼠标变手 */
        cursor: pointer;
        font-size: 30px;
        position: absolute;
        right: 10px;
        top: 10px;
    }
</style>

<body>
    <button onclick="login()">登陆</button>
    <div id="model">
        <h3>登陆框</h3>
        <span onclick="lose()">X</span>
    </div>
    <script>
        function login() {
            //显示出隐藏页面
            model.style.display = 'block';
        }

        function lose() {
            //把页面隐藏
            model.style.display = 'none';
        }
    </script>
</body>

</html>

弹出框（所给版本）：

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

<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <script>
    </script>
    <style>
        .container {
            height: 3000px;
        }
        
        #modal {
            width: 400px;
            height: 300px;
            background-color: #369;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -220px;
            margin-top: -170px;
            color: #fff;
            padding: 20px;
            z-index: 10001;
            display: none;
        }
        
        #modal span {
            cursor: pointer;
            font-size: 30px;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        
        #opcity {
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            position: fixed;
            background: rgba(0, 0, 0, 0.6);
            display: none;
        }
    </style>
</head>

<body>
    <h1>弹出层效果</h1>
    <hr>
    <button onclick="login()">登录</button>
    <div class="container">
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </div>

    <div id="modal">
        <h3>登录框</h3>
        <span onclick="closeBox()">X</span>
    </div>

    <div id="opcity"></div>
    <script>
        function login() {
            modal.style.display = "block";
            opcity.style.display = "block";
        }

        function closeBox() {
            //alert('ok');
            modal.style.display = "none";
            opcity.style.display = "none";
        }

        opcity.onclick = function() {
            modal.style.display = "none";
            opcity.style.display = "none";
        }
    </script>


</body>

</html>