码迷,mamicode.com
首页 > Web开发 > 详细

js练习

时间:2020-03-14 00:49:22      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:button   white   bottom   input   move   ring   res   ansi   position   

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练习

标签:button   white   bottom   input   move   ring   res   ansi   position   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!