JavaScript18

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

    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);

你可能感兴趣的:(JavaScript18)