js练习

1:编码实现图片的功能

微信截图_20190922144924.png

代码块
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 {
             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

image.png

代码块
<!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>

原文地址:https://www.cnblogs.com/hellosiyu/p/12489969.html