关闭

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

66人阅读 评论(0) 收藏 举报
分类:

今天主要是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>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7299次
    • 积分:518
    • 等级:
    • 排名:千里之外
    • 原创:46篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条