java-script简单语法练习-第二天

今天主要是dom的操作,用的是web-storm编写

1.对图片放大与缩小

<span style="color:#333333;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片放大缩小</title>
</head>
<body>
    <p align="center">
        <input type="button" value="放大" onclick="big()">
        <input type="button" value="缩小" onclick="smr()">
    </p>
    <div align="center">
        <input name="img1" type="image" id="img1" src="images/tu1.png"/>
    </div>
    <script language="JavaScript">
        function big(){//图片放大的方法
            var height=img1.height;
            var width=img1.width;
            if((height<=height*2)||(width<=width*2)){
                img1.height=img1.height+20;
                img1.width=img1.width+20;
            }
        }
        function smr(){//图片缩小的方法
            var height=img1.height;
            var width=img1.width;
            if((img1.width>100)||(img1.height>100)){
                img1.height=img1.height-20;
                img1.width=img1.width-20;
            }
        }
    </script>
</body>
</html></span>
2.计时器,包括停止开始

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计时器</title>
    <script>
        var s;
        window.onload=function(){//时间自动1秒更新一次
            s=window.setInterval("showtime()",1000);
        }
        function showtime(){//获取当前时间方法
            var sdom=document.getElementById("spantime");
            var now=new Date();//得到当前时间
            var stime=now.getFullYear()+"年"+now.getMonth()+"月"
                    +now.getDate()+"日"+now.getHours()+"时"
                    +now.getMinutes()+"分"+now.getSeconds()+"秒";
            sdom.innerHTML=stime;


        }
        function stopit(){
            window.clearInterval(s);//停止计时器
        }
        function start(){//开始计时器
            s=window.setInterval("showtime()",1000);
        }
    </script>
</head>
<body>
    <span id="spantime"></span>
    <input type="button" value="停止" onclick="stopit()">
   <input type="button" value="开始" onclick="start()">
</body>
</html>

3.图片定时消失,出现

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计时器</title>
    <script>
        window.onload=function(){
            window.setInterval("start()",1000);
        }
        function display(){
            var sdom=document.getElementById("img1");
            sdom.style.display="none";
            window.setTimeout("start()",3000);
        }
        function start(){
            var dom=document.getElementById("img1");
            dom.style.display="block";
            window.setTimeout("display()",3000);
        }
        function spantime(){
            var dates=new Date();
            var imgdate=document.getElementById("spantime");
            var date =dates.getFullYear()+"年"+dates.getMonth()+"月"+dates.getDate()+
                    "日"+dates.getHours()+"时"+dates.getMinutes()+"分"+dates.getSeconds()+"秒";
            imgdate.innerHTML=date;
        }
    </script>
</head>
<body>
<img src="images/tu1.png" id="img1">
    <span id="spantime"></span>
</body>
</html>



阅读更多
想对作者说点什么? 我来说一句

<em>java练习题</em>

2018年06月04日 0B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭