美文网首页
JavaScript18

JavaScript18

作者: Polaris_L | 来源:发表于2018-08-02 21:27 被阅读0次

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

    相关文章

      网友评论

          本文标题:JavaScript18

          本文链接:https://www.haomeiwen.com/subject/dmxevftx.html