• 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>
    
    
  • 相关阅读:
    Linux 查看本地ip
    php 利用debug_backtrace方法跟踪代码调用
    开源镜像站,vmware下载
    robots.txt 让搜索引擎不再收录网站
    PHP 面向对象 final类与final方法
    开源代码
    PHPStorm设置Ctrl+滚轮调整字体大小
    PHP array_chunk() 妙用
    第九节 JavaScript提取行间事件
    第八节 JavaScript函数的定义和执行
  • 原文地址:https://www.cnblogs.com/hellosiyu/p/12489969.html
Copyright © 2020-2023  润新知