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

原创 2016年06月01日 08:39:01

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



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

运用web-storm开发 1.按钮倒计时提示框 var count=10; var s; window.onloa...
  • qq_34734520
  • qq_34734520
  • 2016年06月01日 18:06
  • 159

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

运用web-storm开发 1.登录简单登录页面的实现与设置 var ifEmail=false; var ifName=false...
  • qq_34734520
  • qq_34734520
  • 2016年06月02日 21:58
  • 123

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

运用web-storm开发 简单的加减乘除 function showResult(op){ var...
  • qq_34734520
  • qq_34734520
  • 2016年05月30日 18:43
  • 441

java-script简单语法练习Ajax程序-第五天

运用web-storm开发 1.Ajax程序,判断输入框内用户名在数据库有没有 #head1{ margin: 0px auto; ...
  • qq_34734520
  • qq_34734520
  • 2016年06月03日 16:59
  • 167

OC语法基础简单代码练习Demo

没有接触过OC,所以今天就来学习下简单的东西.把一些简单的代码记录下来.由于没有MAC机所以只要在线练习www.FenBy.com #import #include int main(int argc...
  • yirancpp
  • yirancpp
  • 2016年01月29日 15:40
  • 690

JavaScript简单的函数练习

若凌ljb 2017-05-26 08:44 练习 body{font-size: 12px;} #txt{ height: 400px; width: 600p...
  • u011277123
  • u011277123
  • 2017年05月27日 15:46
  • 548

正则表达式简单练习

DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> script typ...
  • Vivian_shuang
  • Vivian_shuang
  • 2016年07月16日 09:05
  • 880

JAVA语法基础Demo练习

ATM取款机Demo小程序 一周的JAVA基础语法结束,趁着周末把之前练习过的ATM小程序独立重新做了一遍,感觉在码这个小程序的过程中,好好的把之前学过的循环语句,选择判断语句,模块化编程思...
  • Harry_ZH_Wang
  • Harry_ZH_Wang
  • 2016年09月05日 00:45
  • 997

练习HTML——简单的网页设计

用了一天的时间学习孙鑫老师的HTML视频,(视频只有2个小时)主要内容就是关于编写HTML语言的标记符号,深知这些符号是记不住的,所以除了跟着老师练习实例以外,自己也编写了一个简单的网页设计,当然了,...
  • u010928470
  • u010928470
  • 2014年06月18日 17:56
  • 1838

Hadoop学习笔记之HBase Shell语法练习

下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如下: 名称 命令表达式 创建表 cre...
  • hugengyong
  • hugengyong
  • 2014年07月20日 19:00
  • 4552
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:java-script简单语法练习-第二天
举报原因:
原因补充:

(最多只允许输入30个字)