Js常用用法样例

原创 2016年08月30日 20:52:06

利用JS实现随机生成图片

<script>
            document.write("<center><h2>随机生成图片</h2></center>");
            var i = Math.round(Math.random()*8+1);
            document.write("<center><img src='../img/"+i+".jpg'/> </center>");
</script>

doucument.write()将内容写到网页上,网页然后解析。
Math.random()生成0-1的随机数





当鼠标移入移除时图片切换,主要是用到onmouseover和onmouseout
图片路径自己替换

<body>
        <img src="dog1.jpg" align="center" onmouseover="src='dog2.jpg'" onmouseout="src='dog1.jpg'"/>
    </body>



实现漂浮的图片效果
在给left和top赋值时要注意加上px。

<head>
        <meta charset="utf-8">
        <title>漂浮的广告</title>
        <script>
            function fun(){
                document.getElementById("div").style.left=(Math.random()*1000)+"px";
                document.getElementById("div").style.top=(Math.random()*1000)+"px";

                setTimeout("fun()",600);
            }
        </script>
    </head>
    <body onload="fun()">
    <div id="div" style="position: absolute; left: 20px; top: 30px; width: 150px; height: 110px; z-index: 1;">
        <img src="../js/piaofu.jpg" width="150px" height="100px" />
    </div>
    </body>

获得焦点

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            input{
                font-size: 20px;
                background-color: #55FFFF;
                border: 1px solid;
            }
        </style>
        <script type="text/javascript">
            function myFocus(){
                var ss = document.getElementById("tt").value;
                if(ss=="注意格式:10xxxxx")
                document.getElementById("tt").value="";
            }
            function checkCard(){
                var card = document.getElementById("tt").value;
                if(card.substr(0,2)!="10")
                {
                    alert("格式错误");
                    document.getElementById("tt").focus();
                }
            }
        </script>
    </head>
    <body>
        <h2>
            卡号:<input id="tt" type="text" value="注意格式:10xxxxx" onfocus="myFocus()" onblur="checkCard()"/>
        </h2>

    </body>

Js数组

<script type="text/javascript">
            var arr = new Array(3);//数组长度可以自动增长
            arr[0] = 66;
            arr[1] = true;
            arr[2] = "hello";
            arr[3] = false;

            for(var i = 0;i<arr.length;i++){
                document.write(arr[i]+"<br/>")
            }
            var arr2 = new Array(2,"hehe",88,5.6);
//          alert(arr.length);

            var arr3 = [45,23,"das",true,4.5,false];
            for (var i =0;i<arr3.length;i++) {
                alert(arr3[i])
            }
        </script>

Js生成验证码并判断

getCodes生成验证码,并返回验证码字符串
checkCodes验证用户输入的字符串是否跟生成的验证码相同

<head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
        var ma;
            function setCodes(){
                ma = getCodes(4);
                document.getElementById("dv").innerHTML=ma;
            }
            function getCodes(num){
                var arr = ["啦","$",4,"E","T","#"];
                var codes = "";
                for (var i=0;i<num;i++) {
                    var m = Math.floor(Math.random()*arr.length);
                    codes = codes+arr[m];
                }
                return codes;
            }
            function checkCodes(){
                var codes = document.getElementById("txt").value;
                if(ma!=codes)
                {
                    alert("验证码不正确");
                    document.getElementById("txt").value="";
                    document.getElementById("txt").focus();
                    setCodes();
                }
            }
        </script>
    </head>
    <body onload="setCodes()">
        验证码<input id="txt" type="text" />
        <div id="dv" style="display: inline;border: 1px solid;" onclick="setCodes()"></div><br />
        <input type="button" value="确定" onclick="checkCodes()" />
    </body>



统计文本域输入字符的个数,以及实时显示字符的个数

<head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">

            function fun(){
                var ss = document.getElementById("area").value;
                var a=b=c=0;
                for (var i=0;i<ss.length;i++) {
                    var ch = ss.charAt(i);
                    if(ch>='a'&&ch<='z')
                        a++;
                    else if(ch>='A'&&ch<='Z')
                        b++;
                    else if(ch>='0'&&ch<='9')
                        c++;
                }
                document.getElementById("dv").innerHTML = "小写字母个数为:"+a+"个,大写字母个数为"
                +b+"个,数字个数 为:"+c+"个,其他字符个数为"+(ss.length-a-b-c);
            }
            function count(){
                if(document.getElementById("area").value.length>100){
                    document.getElementById("area").value = document.getElementById("area").value.substr(0,100); 
                }
                var num = document.getElementById("area").value.length;
                var sheng = 100-num;

                document.getElementById("span").innerHTML = "还剩("+sheng+")个字符";
                if(sheng==0)
                document.getElementById("span").style.color = "red";
                else document.getElementById("span").style.color = "blue";
            }
        </script>
    </head>
    <body>
        <textarea id="area" rows="5" cols="20" onkeyup="count()"></textarea>
        <span id="span" style="color: blue; font-size: 20px;">还剩(100)个字符</span>
        <input type="button" value="统计" onclick="fun()" />
        <div id="dv"></div>
    </body>



用Js计算某一时刻的距离此时的时间

<head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var start = new Date("2016/8/30");
            setInterval("ff()",1000);
            function ff(){
                var end = new Date();
                var total = end-start;//单位是毫秒

                var hour = parseInt(total/1000/60/60);
                var minute = parseInt(total/1000%3600/60);
                var second = parseInt(total/1000)%60;
                document.getElementById("dv").innerHTML=hour+"小时"+minute+"分"+second+"秒";
            }
        </script>
    </head>
    <body onload="ff()">
    统计某一时刻到此时的时间<div id="dv"></div>
    </body>

我们还可以使用已经比较成熟的日历的Js文件
DatePicker文件去我的下载里下载

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>显示日历</title>
<script src="DatePicker.js"></script>
<script type="text/javascript">
     //把用户选择的日期转成了  Date 类型
    function ff()
    {   //2016/2/9
        var birthday = document.getElementById("bir").value;
        var arr = birthday.split("-");
        var str ="";
        for(var i=0;i<arr.length;i++)
        {
            str = str+arr[i]+"/";
        }
        var d = new Date(str);
        alert(d);
    }
</script>
</head>
<body>
  <input id="bir" type="text" value="选择生日" onclick="setday(this)"><br/>
  <input type="button" onclick="ff()" value="显示">
</body>



在Js里触发按钮

<script type="text/javascript">
    //当页面全部加载完成时执行函数
    window.onload=function(){
        var btn =document.getElementById("btn");
        btn.onclick=function(){
            alert("hello");
        }
    }
</script>

这里引用的外部Js工具类

<title>工具类的使用</title>
<script src="Tools.js"></script>
<script type="text/javascript">
     window.onload=function(){
         var btn1 = document.getElementById("btn1");
         var btn2 = document.getElementById("btn2");

         btn1.onclick=function(){
             Util.test();
         }
         btn2.onclick=function(){
             var boo = Util.isLeapYear(2016);
             alert(boo);
         }
     }
</script>
</head>
<body>
    <!-- 元素节点,属性节点,文本节点 -->
    <input id="btn1" type="button" value="点击" ><br/>
    <input id="btn2" type="button" value="判断是否是闰年" >
</body>


Tools工具类
var Util={

    test:function(){
        alert("hello!!");
    },
    isLeapYear:function(year){
        if(year%4==0&&year%100!=0 || year%400==0)
            return true;
        else
            return false;
    }
}

head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOM</title>
<script type="text/javascript">
   //地址---location
   window.onload=function(){
       var btn1 = document.getElementById("btn1");
       var btn2 = document.getElementById("btn2");

       btn1.onclick=function(){
           location.reload();//重新加载当前页面
       }
       btn2.onclick=function(){
           location.href="js1.html";
           //location="js1.html";
           //location.replace("js1.html");//不能回退到上一个页面
       }
   }
</script>
</head>

<body>
     <input id="btn1" type="button" value="重新加载当前页面" ><br/>
     <input id="btn2" type="button" value="转到其它页面" >
</body>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Chart用法样例

  • 2012-07-27 20:52
  • 5.00MB
  • 下载

JFram中的JTabbedPane和JMenuBar的用法(基础样例)

记录一个使用JTabbedPane和JMenuBar的方法,样例如下: 代码如下: package com.jeremy.ui; import javax.swing.*; import j...

【STL】C++ string 类基本用法样例

#define _CRT_SECURE_NO_DEPRECATE #include // 使用 string 类时须包含这个文件 #include using namespace std...

Android中的PopupWindow用法样例:

public void showPopWindow(){ View view=LayoutInflater.from(this).inflate(R.layout.acvitity_p...

c++ string 类基本用法样例

#include // 使用 string 类时须包含这个文件 #include using namespace std; int main() { string str1; ...

MySQL常用DDL、DML、DCL语言整理(附样例)

在介绍这些SQL语言之前,先罗列一下mysql的常用数据类型和数据类型修饰,供查询参考 后面的带数字表示此类型的字段长度 原文地址:http://www.linuxidc.com/Linu...

常用STL算法样例

// vector.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include #include #include using namespace...

jQuery Ajax()常用方法和参数的使用样例

jQuery Ajax()方法本身具有多个参数可供选择。$.ajax({ type:"POST", //String 默认为GET timeout...

好记性不如烂笔头9-HttpServletRequest常用方法和样例

HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象提供的方法,可以获得客户端请求的所有信息。 H...
  • ffm83
  • ffm83
  • 2015-01-28 13:46
  • 807

数据库_MySQL_常用DDL、DML、DCL语言整理(附样例)

在介绍这些SQL语言之前,先罗列一下mysql的常用数据类型和数据类型修饰,供查询参考 后面的带数字表示此类型的字段长度   数值型: TINYINT 1 ,SMALLINT ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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