<!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>
时间： 2024-08-06 20:06:21