【第22期】观点:IT 行业加班,到底有没有价值?

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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

js常用方法整理

数组操作 concat();//连接两个或更多的数组哦 join('_');//把数组的所有元素放在一个字符串中 pop();//删除并返回数组的最后一个元素 push();//向数组的末尾添加一个元...

常用js语句

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

js中常用方法总结

JS选取DOM元素的方法 注意:原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2、通过CLA...

JS-常用互动方法

1 JavaScript-输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。 第一种:输出内...

js常用方法总结

string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位置不包含结束位置的字符,只写一个参数表示从开始位置截取到最后 ? ...

JS常用方法

Array.prototype.slice() slice()方法从数组中由开始到结束(不含结束)选择一部分拷贝到一个新的数组并返回。原数组不会被修改。 语法: arr.slice()...

js常用函数

1、js获取url中的参数(注意修改截取起始位置和你要查找的参数),该操作仅适用于传统的url var public_obj1 = window.location.href.split('?'); ...

JQuery基本用法总结

最近在学习前端,经常会遇到需要用到js的时候,但是原生js自己写好麻烦,所以决定先学一下Jquery,在此总结一下JQuery的基本用法 1.CSS选择器        -$(documnet).cs...

【JavaScript】常用JS

帐号不能含有中文js 日期:2006-1-3 21:50:36 function start(){ MM_preloadImages('images/bmail_index_22_02_ove...
  • csdou
  • csdou
  • 2011-11-13 16:25
  • 1176

JS中&&和||用法技巧

逻辑与&&和逻辑或||操作符可以应用于任何类型的操作数,而不仅仅是布尔值。   几乎所有语言中||和&&都遵循“短路”原理, 如&&中第一个表达式为假就不会去处理第二个表达式,而||正好相反。js同...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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