1.放學(xué)了倒計(jì)時(shí)
<h1>距離放學(xué)還有: <span></span></h1>
<button onclick='stop(this)'>||</button>
<script type="text/javascript">
? ? function task(){
? ? ? ? var now=new Date();
? ? ? ? var end=new Date('2018/5/25 18:00');
? ? ? ? var s=(end-now)/1000;
? ? ? ? if(s>0){
? ? ? ? ? ? var h=Math.floor(s/3600);
? ? ? ? ? ? var m=Math.floor(s%3600/60);
? ? ? ? ? ? s=Math.floor(s%60);
? ? ? ? ? ? document.querySelector('span').innerHTML=h+'小時(shí)'+m+'分鐘'+s+'秒';
? ? ? ? }else{
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? document.querySelector('span').innerHTML='放學(xué)了';
? ? ? ? }
? ? }
? ? ? ? task();
? ? ? ? var timer=setInterval(task,1000);
? ? ? ? function stop(btn){
? ? ? ? ? ? if(btn.innerHTML=="||"){
? ? ? ? ? ? ? ? clearInterval(timer)
? ? ? ? ? ? ? ? btn.innerHTML="|>";
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? timer=setInterval(task,1000);
? ? ? ? ? ? ? ? btn.innerHTML="||";
? ? ? ? ? ? }
? ? ? ? }? ?
</script>
2.隨機(jī)顯示小星星
更改網(wǎng)頁(yè)背景色
window.onload=function(){
document.body.bgColor="#000";
定時(shí)器 一秒鐘顯示一個(gè)星星 一秒鐘調(diào)用star一次
window.setInterval("star()",1000);
25 }
動(dòng)畫主函數(shù)
function star(){
? ? //創(chuàng)建圖片節(jié)點(diǎn)
? ? var imgObj = document.createElement("img");
? ? //添加src屬性
? ? imgObj.setAttribute("src","images/lele.jpg");
? ? //添加width屬性 getRandom()隨機(jī)數(shù)函數(shù)
? ? var width = getRandom(20,120);
? ? imgObj.setAttribute("width",width);
####添加層疊樣式表屬性(style屬性? 行內(nèi)樣式)
? ? var x = getRandom(0,window.innerWidth);
? ? var y = getRandom(0,window.innerHeight);
? ? ? ? //設(shè)置坐標(biāo) x y 為未知數(shù)
? ? ? ? imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
? ? ? ?
? ? ? ? //添加onclick事件屬性
? ? ? ? //this 代表當(dāng)前對(duì)象,this是一個(gè)對(duì)象,只能在函數(shù)內(nèi)使用
? ? ? ? imgObj.setAttribute("onclick","removeImg(this)");
? ? ? ? //將圖片節(jié)點(diǎn),掛載到<body>的父節(jié)點(diǎn)下
? ? ? ? document.body.appendChild(imgObj);
函數(shù):求隨機(jī)數(shù)函數(shù)
function getRandom(min,max){
? ? var random = Math.random()*(max-min)+min;
? ? //向下取整
? ? random = Math.floor(random);
? //返回結(jié)果
? ? return random;
}
函數(shù):刪除節(jié)點(diǎn)
function removeImg(obj){
? document.body.removeChild(obj);
}
3.動(dòng)態(tài)創(chuàng)建表格
var json='[{"ename":"Tom", "salary":10000, "age":25},{"ename":"John", "salary":11000, "age":28},{"ename":"Mary", "salary":12000, "age":25}]';
var emps=eval(json);
var table=document.createElement('table');
var thead=document.createElement('thead');
var tr=document.createElement('tr');
for(var key in emps[0]){
? ? var th=document.createElement('th');
? ? th.innerHTML=key;
? ? tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
//創(chuàng)建tbody
var tbody=document.createElement('tbody');
table.appendChild(tbody);
for(var i=0;i<emps.length;i++){
? ? var tr=document.createElement('tr');
? ? for(var key in emps[i]){
? ? ? ? var td=document.createElement('td');
? ? ? ? td.innerHTML=emps[i][key];
? ? ? ? tr.appendChild(td);
? ? }
? ? tbody.appendChild(tr);
}
? ? ? ? ? ? ? ? ?
? ? document.getElementById('data').appendChild(table);
