<!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="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="" title="这里是a链接">这里是a链接</a> <a href="">这里是a链接</a> <a href="">这里是a链接</a> <a href="">这里是a链接</a> <a href="">这里是a链接</a> <a href="">这里是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>