js练习

Posted 2020-11-26 黑面书生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习相关的知识，希望对你有一定的参考价值。

1：编码实现图片的功能

技术图片

代码块
def func(arg1):
    def inner(arg2):
        print(arg1*arg2)
        return 'hello,world'
    return inner

foo=func(8)
print(foo(8))
print(foo(-1))

结果如下：
64
hello,world
-8
hello,world

2 浮层弹出框

代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.4);
            z-index: 99;
        }
        .modal {
            width: 700px;
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -350px;
            margin-top: -200px;
            background-color: white;
            z-index: 100;
        }
        .close {
            float: right;
            margin-right: 15px;
            margin-top: 10px;
            font-size: 16px;
        }
       <!----> .hide {
            display: none;
        }
    </style>
</head>
<body>

<button id="b1">点我弹出</button>
<div class="cover hide"></div>
<div class="modal hide">
    <span class="close" id="s1">x</span>
</div>

<script>
    var b1Ele = document.getElementById("b1");
    b1Ele.onclick=function (ev) {
        document.getElementsByClassName("cover")[0].classList.remove("hide");
        document.getElementsByClassName("modal")[0].classList.remove("hide");
    };

    var s1Ele = document.getElementById("s1");
     s1Ele.onclick=function (ev) {
        document.getElementsByClassName("cover")[0].classList.add("hide");
        document.getElementsByClassName("modal")[0].classList.add("hide");
    }
</script>
</body>
</html>

3 window.onload标签加载完才执行js

技术图片

代码块
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <script>
        // 当页面的标签都加载完之后触发onload事件
        window.onload = function (ev) {
            // 1. 找到那个标签
            var d1Ele = document.getElementById("d1");
            console.log(d1Ele);
            // 2. 获取标签的文本内容
            var s = d1Ele.innerText;
            // 3. alert弹出
            alert(s)
        }
    </script>
</head>
<body>
<div id="d1">我是div</div>

</body>
</html>

4 计时器练习

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input type="text" id="t1">
<button id="b1">开始</button>
<button id="b2">暂停</button>

<script>

    var t;
    var res1=document.getElementById('t1');
    function f(){
        var time1=new Date();
        res1.value=time1.toLocaleString();
    }
    f();
    
    //开始
    var b1ele=document.getElementById('b1');
    b1ele.onclick=function(ev){
        if(!t){
            t=setInterval(f,1000);
            }
    
    }
    
    //暂停
    var b2ele=document.getElementById('b2');
    b2ele.onclick=function(ev){
    clearInterval(t);
    t=null;
    }
</script>

</body>
</html>

以上是关于js练习的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

Python练习册第 0013 题：用 Python 写一个爬图片的程序，爬这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段

js代码片段: utils/lcoalStorage/cookie

JS代码片段：一个日期离现在多久了

js常用代码片段(更新中)