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

最新推荐文章于 2022-07-27 15:14:21 发布

qq_34734520

最新推荐文章于 2022-07-27 15:14:21 发布

阅读量363

点赞数

分类专栏： java-script直译式脚本语言

本文链接：https://blog.csdn.net/qq_34734520/article/details/51553264

版权

java-script直译式脚本语言专栏收录该内容

5 篇文章 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="放大" οnclick="big()">
        <input type="button" value="缩小" οnclick="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.οnlοad=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="停止" οnclick="stopit()">
   <input type="button" value="开始" οnclick="start()">
</body>
</html>

3.图片定时消失，出现

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>计时器</title>
    <script>
        window.οnlοad=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>

qq_34734520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java-script简单语法练习-第二天

今天主要是dom的操作，用的是web-storm编写1.对图片放大与缩小图片放大缩小 function big(){//图片放大的方法 var height=img1.height; var wi
复制链接

扫一扫

专栏目录