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

最新推荐文章于 2020-06-23 15:36:32 发布

爷爷我回来了

最新推荐文章于 2020-06-23 15:36:32 发布

阅读量394

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 百度前端技术学院 IFE

本文链接：https://blog.csdn.net/sinat_34074514/article/details/81869848

版权

JavaScript 专栏收录该内容

16 篇文章 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>

爷爷我回来了

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
IFE第二十到第二十一天：让你和页面对话

test1&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;IFE ECMAScript&lt;/title&gt; &lt;/head&gt; &lt;body onk
复制链接

扫一扫