IFE第二十到第二十一天：让你和页面对话

今天药忘吃喽~ 2022-05-16 11:13 197阅读 0赞

### test1 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">    
            <title>IFE ECMAScript</title>
        </head>
    
        <body onkeydown="_key()">
            <input id="name" type="text">    
            <button id="submit-btn">Submit</button>
            <script>            
                var btn = document.getElementById("submit-btn");
                function output() {
                    console.log(document.getElementById("name").value);
                }
                // 当点击按钮 submit-btn 时，在console中输出 name 中的内容
                btn.onclick = output;
                function _key() {
                    // 在输入过程中，如果按回车键，则同样执行上一条的需求
                    if (event.keyCode == 13) {
                        output();
                    }
                    // 在输入过程中，如果按 ESC 键，则把输入框中的内容清空
                    if (event.keyCode == 27) {
                        document.getElementById("name").value = "";
                    }
                }
            </script>
        </body>
    </html>

### test2 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">    
        <title>IFE ECMAScript</title>
        <style>
            select {
                display: none;
            }
            .select {
                display: block;
            }
            .non-select {
                display: none;
            }
        </style>
    </head>
    <body>            
        <label>
            <input id="school" name="status" type="radio">
            School
        </label>
        <label>
            <input id="company" name="status" type="radio">
            Company
        </label>
    
        <select id="school-select">        
            <option>北京邮电大学</option>
            <option>黑龙江大学</option>
            <option>华中科技大学</option>
        </select>
    
        <select id="company-select">        
            <option>百度</option>
            <option>爱奇艺</option>        
        </select>
    
        <script>
            var input1 = document.getElementById("school");
            var input2 = document.getElementById("company");
            // 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
            input1.onclick = function() {
                document.getElementById("school-select").className = "select";
                document.getElementById("company-select").className = "non-select";
            }
            // 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
            input2.onclick = function() {
                document.getElementById("company-select").className = "select";
                document.getElementById("school-select").className = "non-select";
            }
        </script>
    </body>
    </html>

### test3 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
        <style>
            .palette {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            .palette li {
                width: 40px;
                height: 40px;
                border: 1px solid #000;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <ul class="palette">
            <li style="background-color:crimson"></li>
            <li style="background-color:bisque"></li>
            <li style="background-color:blueviolet"></li>
            <li style="background-color:coral"></li>
            <li style="background-color:chartreuse"></li>
            <li style="background-color:darkolivegreen"></li>
            <li style="background-color:cyan"></li>
            <li style="background-color:#194738"></li>
        </ul>
    
        <p class="color-picker"></p>
    
        <script>
            // 点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
            var list = document.querySelectorAll("li");
            for (var i = 0, len = list.length; i < len; i++) {
                list[i].onclick = function (e) {
                    var c = e.target.style.backgroundColor;
                    var p = document.getElementsByClassName("color-picker")[0];
                    p.innerHTML = c;
                    p.style.color = c;
                }
            }
        </script>
    </body>
    
    </html>

### test4 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
        <style>
            .palette {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            .palette li {
                width: 40px;
                height: 40px;
                border: 1px solid #000;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <ul class="palette">
            <li style="background-color:crimson"></li>
            <li style="background-color:bisque"></li>
            <li style="background-color:blueviolet"></li>
            <li style="background-color:coral"></li>
            <li style="background-color:chartreuse"></li>
            <li style="background-color:darkolivegreen"></li>
            <li style="background-color:cyan"></li>
            <li style="background-color:#194738"></li>
        </ul>
    
        <p class="color-picker"></p>
    
        <script>
            // 点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
            // 事件代理方式
            window.onload = function () {
                var ul = document.getElementsByClassName("palette")[0];
                ul.onclick = function (e) {
                    var ev = e || window.event;
                    var target = ev.target || ev.srcElement;
                    if (target.nodeName.toLowerCase() == "li") {
                        document.getElementsByClassName("color-picker")[0].innerHTML = target.style.backgroundColor;
                        document.getElementsByClassName("color-picker")[0].style.color = target.style.backgroundColor;
                    }
                }
            }
        </script>
    </body>
    
    </html>

### test5 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
    </head>
    
    <body>
        <div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
        <button id="fade-btn">淡出</button>
    
        <script>
            var obj = document.getElementById("fade-obj");
            var btn = document.getElementById("fade-btn");
            var i = 1;
    
            function fadeout() {
                obj.style.opacity = i;
                i -= 0.1;
                btn.disabled = true;
                if (i > 0) {
                    setTimeout(fadeout, 100);
                    console.log(i);
                } else if (i <= 0) {
                    btn.innerHTML = "淡入";
                    btn.disabled = false;
                    btn.addEventListener("click", fadein);
                }
            }
    
            function fadein() {
                obj.style.opacity = i;
                i += 0.1;
                btn.disabled = true;
                if (i < 1) {
                    setTimeout(fadein, 100);
                    console.log(i);
                } else if (i >= 1) {
                    btn.innerHTML = "淡出";
                    btn.disabled = false;
                    btn.addEventListener("click", fadeout);
                }
            }
    
            btn.addEventListener("click", fadeout);
        </script>
    </body>
    
    </html>

### test6 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>IFE ECMAScript</title>
    </head>
    
    <body>
        <div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
        <button id="fade-btn">淡出</button>
    
        <script>
            var btn = document.getElementById("fade-btn");
            var obj = document.getElementById("fade-obj");
            var i = 1;
            var flag = null;
            var flag1 = null;
    
            function fadeout() {
                obj.style.opacity = i;
                i -= 0.1;
                btn.disabled = true;
                if (i <= 0) {
                    clearInterval(flag);
                    btn.innerText = '淡入';
                    btn.disabled = false;
                    btn.addEventListener('click', function () {
                        flag1 = setInterval(fadein, 100);
                    });
                }
            }
    
            function fadein() {
                obj.style.opacity = i;
                i += 0.1;
                btn.disabled = true;
                if (i >= 1) {
                    clearInterval(flag1);
                    btn.innerText = '淡出';
                    btn.disabled = false;
                    btn.addEventListener('click', function () {
                        flag = setInterval(fadeout, 100);
                    });
                }
            }
    
            function start() {
                flag = setInterval(fadeout, 100);
            }
    
            btn.addEventListener('click', start);
        </script>
    </body>
    
    </html>

### test7 ###

<!DOCTYPE HTML>
    <html>
    
    <head>
        <style>
            div {
                width: 480px;
                height: 480px;
                background: url("erik.jpg");
            }
        </style>
    </head>
    
    <body>
        <div id="ani"></div>
        <script>
            window.onload = function () {
                var ani = document.getElementById("ani");
                var Y = 480;
    
                function gif() {
                    ani.style.backgroundPositionY = '-' + Y + 'px';
                    Y > 8160 ? Y = 480 : Y += 480;
                }
                setInterval(gif, 100);
            }
        </script>
    </body>
    
    </html>