首页 > 代码库 > javascript-2
javascript-2
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style>*{ margin:0; padding:0; list-style:none;}body{ font-size:18px;}.time{ height:30px; padding:10px;}</style></head><body> <div class="time"> <span id="t_d">00天</span> <span id="t_h">00时</span> <span id="t_m">00分</span> <span id="t_s">00秒</span> </div><script> function GetRTime(){ var EndTime= new Date(‘2016/04/28 00:00:00‘); var NowTime = new Date();var t = NowTime.getTime()- EndTime.getTime(); var d=0; var h=0; var m=0; var s=0; if(t>=0){ d=Math.floor(t/1000/60/60/24); h=Math.floor(t/1000/60/60%24); m=Math.floor(t/1000/60%60); s=Math.floor(t/1000%60); } document.getElementById("t_d").innerHTML = d + "天"; document.getElementById("t_h").innerHTML = h + "时"; document.getElementById("t_m").innerHTML = m + "分"; document.getElementById("t_s").innerHTML = s + "秒"; } setInterval(GetRTime,0);</script></body></html>
这个一个从8月1号开始计时
单机事件，
<button type="button" id="btn"> 点我吧！ </button> <div class="img" id="img"></div> <script type="text/javascript"> // 1. 获取到页面内#btn的元素节点=>$btn // 2. 获取到页面内#img的元素节点=>$img // 3. 给$btn绑定鼠标点击事件（onclick） // 3.1. 当用户触发点击事件的时候，让$img显示 // +1. 定义按钮状态变量$status // 1. 获取到页面内#btn的元素节点=>$btn var $btn = document.querySelector("#btn"), // 2. 获取到页面内#img的元素节点=>$img $img = document.querySelector("#img"), // +1. 定义按钮状态变量$status $status = 0; // 3. 给$btn绑定鼠标点 击事件（onclick） // 3.1. 当用户触发点击事件的时候，让$img显示 $btn.onclick = function() { console.log("I am $btn onclick"); if( $status == 0 ){ $img.style.display = "block"; $status = 1; }else{ $img.style.display = "none"; $status = 0; } }; </script>
缓存图片
<img src=http://www.mamicode.com/"01443f564897a432f87512f6eed753.gif" alt="" id="load" width="50" style="border: 1px solid "/> <script type="text/javascript"> var img = document.querySelector("#load"); img.onload = function(){ console.log("Image is done"); img.setAttribute("src", "../../Archive Files/HWH1602-CSS-LESSON-03/Homework/第2节/zuoye2/bai.jpg"); } </script>
属性节点更改
<a href=http://www.mamicode.com/"" title="这里是a链接">这里是a链接</a> <a href=http://www.mamicode.com/"">这里是a链接</a> <a href=http://www.mamicode.com/"">这里是a链接</a> <a href=http://www.mamicode.com/"">这里是a链接</a> <a href=http://www.mamicode.com/"">这里是a链接</a> <a href=http://www.mamicode.com/"">这里是a链接</a> <script type="text/javascript"> // 1. 获取到页面内的所有a元素节点=>变量links // 2. 给所有links设置title属性的值为"这是a链接" // 1. 获取到页面内的所有a元素节点=>变量links var links = document.querySelectorAll("a"); // 2. 给所有links设置title属性的值为"这是a链接" for (var i = 0; i < links.length; i++) { links[i].setAttribute("title", "这是a链接"); } </script>
节点管理
<div class="progress-bar"> <div class="box" id="box">100%</div> </div> <script type="text/javascript"> // 1. 定义变量box // 2. 获取到页面内#box的元素节点=>box // 3. 在3秒以内将box的宽度从0增长到300像素的宽度 // 1. 定义变量box // 2. 获取到页面内#box的元素节点=>box var box = document.querySelector("#box"); // 3. 在3秒以内将box的宽度从0增长到300像素的宽度 var startWidth = 0; var clock = setInterval(function(){ console.log( ++startWidth ); box.style.width = startWidth + "px"; startWidth >= 300 ? clearInterval(clock) : null; }, 10); </script>
javascript-2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。