1.放学了倒计时
<h1>距离放学还有: <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+'小时'+m+'分钟'+s+'秒';
}else{
clearInterval(timer);
document.querySelector('span').innerHTML='放学了';
}
}
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.随机显示小星星
更改网页背景色
window.onload=function(){
document.body.bgColor="#000";
定时器 一秒钟显示一个星星 一秒钟调用star一次
window.setInterval("star()",1000);
25 }
动画主函数
function star(){
//创建图片节点
var imgObj = document.createElement("img");
//添加src属性
imgObj.setAttribute("src","images/lele.jpg");
//添加width属性 getRandom()随机数函数
var width = getRandom(20,120);
imgObj.setAttribute("width",width);
####添加层叠样式表属性(style属性 行内样式)
var x = getRandom(0,window.innerWidth);
var y = getRandom(0,window.innerHeight);
//设置坐标 x y 为未知数
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
//添加onclick事件属性
//this 代表当前对象,this是一个对象,只能在函数内使用
imgObj.setAttribute("onclick","removeImg(this)");
//将图片节点,挂载到<body>的父节点下
document.body.appendChild(imgObj);
函数:求随机数函数
function getRandom(min,max){
var random = Math.random()*(max-min)+min;
//向下取整
random = Math.floor(random);
//返回结果
return random;
}
函数:删除节点
function removeImg(obj){
document.body.removeChild(obj);
}
3.动态创建表格
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);
//创建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);
网友评论