js练习

1:编码实现图片的功能

代码块def func(arg1): def inner(arg2): print(arg1*arg2) return 'hello,world' return innerfoo=func(8)print(foo(8))print(foo(-1))结果如下:64hello,world-8hello,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>

相关文章