js day18

1.放学了倒计时

距离放学还有:


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)");
        //将图片节点,挂载到的父节点下
        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

你可能感兴趣的:(js day18)