Js常用用法样例

来源：互联网发布：生死狙击小黑刷枪软件编辑：程序博客网时间：2024/05/23 22:49

利用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>

0 0