关闭

JavaScript(2)

标签: javascript
289人阅读 评论(0) 收藏 举报
分类:

x.substring(start,end);含头不含尾

x.split(bystr);返回数组

x.repalce(regexp)可用这则表达式

x.match(regexp) 匹配,找到的话返回匹配字符串的数组
找不到的话返回null

search()==IndexOf();

var books= new Array(7);//初始7个,其实可以无限添加元素
var books= new Array(100,”a”,true);//不区分类型
var books= new Array([100]);//就一个元素:100
var books= new Array();

math.PI : 180度
Math.round(3.56)
n.toFixed(2):保留数字n的2位小数,四舍五入,小数没有补0

7)

js文件

function searchAndReplace(){
    //IPO
    //var txtObj = document.getElementById("txtString");//本行作用等同下一行
    var txtObj = document.querySelector("#txtString");
    var str=txtObj.value;

    //正则表达式,也可写原文。属性后缀g:全局替换。后缀i:忽略大小写
    var reg=/js/gi;
    /*var reg=/我(去|草)/gi;*/
    /*str.match(reg):找到的话,返回数组
                      找不到的话,返回null*/
    var strs=str.match(reg);
    if(strs!=null){
        console.log(strs.length);

        /*str.replace(正则表达式,替换值); */
        str=str.replace(reg,'**');
        /*结果写回文本框*/
        txtObj.value=str;
        alert('共替换'+strs.length+'处');
    }
}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>字符查询与过滤</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script src="index7.js"></script>
   </head>

   <body style="font-size:18px;font-weight:bold">

     <input style="width:300px" id="txtString" 
       value="我的第一个JS页面,js是个客户端脚本语言"/><br/>

     <input type="button" value="过滤特殊字符(js)" 
       onclick="searchAndReplace();"/>

   </body>
</html>

8)数组

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>数组</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script>
        //  Step0:初始化数组a为1,2,3,b为123,12,23
        /*JS只要看到中括号,就是数组*/
        var f=[];//js常用的创建方式
        /*JS中数组没有长度限制*/
        f[0]=1;
        f[1]=1;
        var a=[1,2,3];
        var b=[123,12,23];
        /*document.write:往网页的顶部写东西,
          开发中很少用,因为会改变页面布局*/
        document.write("<h1>初始化数组a为:"+
            a.toString()+"</h1>"
        );
        document.write("<h1>初始化数组b为:"+
            b.toString()+"</h1>"
        );
        //连接数组:一个数组.concat(另一数组);不会改变a和b的任一数组

        var c = a.concat(b);
        document.write("<h1>初始化数组c为:"+
            c.toString()+"</h1>");
        //c.slice(2,4)截取数组一部分,参数含头不含尾
        var d = c.slice(2,4);
        document.write("<h1>初始化数组d为:"+
            d.toString()+"</h1>");

        //数组排序,c.sort():按字符串排,
        //先比第一位的字符,相同的话比第2位,然后第3位。。。
        c.sort();
        document.write("<h1>数组c排序为:"+
            c.toString()+"</h1>");
        //比较器
        function compare(a,b){
            return a-b;
        }
        /*JS中方法定义正确有三种:*/
        //function compare(a,b){return a-b;}
        //var compare=function(a,b){return a-b;}
        //var compare= new Function('a','b','return a-b;');
        c.sort(compare);//compare就是对象,JS中一切都是对象
        document.write("<h1>数组c重新用比较器比较后排序为:"+
            c.toString()+"</h1>");

        function compareDesc(a,b){
            return b-a;
        }
        c.sort(compareDesc);
        document.write("<h1>数组c重新用比较器倒序比较后排序为:"+
            c.toString()+"</h1>");

        c.reverse();//数组中的顺序颠倒
        document.write("<h1>数组c顺序颠倒:"+
            c.toString()+"</h1>");
    </script>
   </head>

   <body style="font-size:18px;font-weight:bold">



   </body>
</html>

9)彩票

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>彩票算法</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>


   </head>

   <body style="font-size:18px;font-weight:bold">

        <script>
        var result=[];
        var i=0;
        while(i<7){
            var r = Math.floor(Math.random()*33+1);
            //1-33之间的随机整数

            //判断元素是否在数组中出现,indexOf用法和原理同String中
            if(result.indexOf(r)==-1){

            //result[i]=r;
            result.push(r);
            i++;
            }
        }
        //function sortFun(a,b){return a-b;}
        //result.sort(sortFun);

        result.sort(function(a,b){return a-b});
        alert(result.toString());
    </script>

   </body>
</html>

10)reg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>reg</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>


   </head>

   <body style="font-size:18px;font-weight:bold">

    <script>
    var reg=/(明明|静静)/g
    var str ="你:明明呵呵,呵呵静静,静静是谁,明明是谁?";

    //reg.exec(str): 检索字符串str中指定的值(明明、静静),每次只能找到第一个
    //返回找到的位置,并确定其位置。
    while(arr=reg.exec(str)){//arr其实就是接收了一个字符串
        //arr.index:当前找到的关键字的开始位置
        //reg.lastIndex:下次循环的开始位置。每次循环时自动从lastIndex开始执行
        document.write("关键字的前后位置:"+arr.index+"-"+(reg.lastIndex-1)+"<br/>");
    }

    </script>

   </body>
</html>

11)form

JS文件:function validateUserName(name){
//IPO
//^...$ : 全文匹配。
//^是说必须以reg开头,$是说必须以reg结尾
    var reg=/^[a-zA-Z0-9_]{1,10}$/;

    //reg.test测试name是否通过表达式
    //如果没通过:
    if(!reg.test(name)){
        alert("姓名格式不符");
    }
}


function validatePwd(pwd){
    var reg=/^\d{6}$/;

    //如果没通过:
    if(!reg.test(pwd))
        alert("密码格式不符");//以后对话框都是css+div,alert基本不用

}
---------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>form</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script src="index11form.js"></script>

   </head>

   <body>
        <form>
        <h2>增加管理员</h2>
        <table width="600px">
        <tr>
          <td width="80px" height="35px">姓名:<td>
          <td width="180px">
             <input type="text" name="userName" onblur="validateUserName(this.value)"/>
          <td>
          <td>10个字符以内,字母数字、数字、下划线的组合<td>
        <tr>
        <tr>
          <td width="80px" height="35px">密码:<td>
          <td width="180px">
             <input type="text" onblur="validatePwd(this.value)"/>
          <td>
          <td>6个数字<td>
        <tr>
        </table>
        </form>

   </body>
</html>

12)Date

JS文件:
/**
var reg1=/^\d{3,6}$/;

var reg2=new RegExp("^\\d{3,6}$");

编译正则表达式:
  reg.compile(x,[y])一般不用,浏览器自动编译

reg.exec(str)


var now = new Date();
自动获得客户端当前时间

W3C school(文档)

var nowd2 = new Date("2013/3/20 11:12") 

getDate(); getDay;getFullYear()
setDate(); setDay;setFullYear()
(1)每个分量都有一对get和set
    getHours()
    getMinutes()
    getSeconds()
(2)年月日星期是单数
    时分秒毫秒是复数

(3)怎么取出来,算完再放回去
   0是周日
*/
/****index12date.js*****/
/*凡是从页面上传入的内容,都是字符串类型*/
function calc(days){
    var n=parseInt(days);
    //获得当前七日
    var now=new Date();
    //怎么取出来,算完,怎么放回去
    var d=now.getDate();//--5

    /*数值计算,注意+/-1修正*/
    //d=d+20-1; //20天后的火车票
    d=d-n+1;//3
    /*setXXX方法会直接修改原对象
      返回值为毫秒数
    */
    //var end=now.setDate(d);

    var end=new Date();

    /*
      end.setDate(0)--上个月最后一天
      end.setDate(-1)--上个月倒数第二天
      end.setMonth(3)--设为3月
    */
    end.setDate(d);
    /*Locale:当地时间
      Date:只显示日期部分
      Time:只显示时间部分
    */
    alert("开始日期:"+end.toLocaleDateString()+"\n"
    +"截至日期"+now.toDateString());

    //alert("开始日期:"+end.toString()+"\n"
    //+"截至日期"+now.toString());



    //此处<br/>不好使
}
----------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>订单查询</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script src="index12date.js"></script>

   </head>

   <body>

        <h2>订单时段查询</h2>
        <!-- label:扩大点击区域-->
        <label><input type="radio" name="date" value="3" onclick="calc(this.value)"/>
         三天内
         </label>
         <label><input type="radio" name="date" value="7" onclick="calc(this.value)"/>
         一周内
         </label>


   </body>
</html>

13)方法重载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>重载</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>

    <script type="text/javascript">
        /**
          JS是解释执行,后面的方法把前面的覆盖了
        function myMethod(n,m){
          alert(n+m)
        }
        function myMethod(n){
          alert(n*n)
        }
        //var myMethod = function myMethod(n){alert(n*n)}
        //var myMethod = function myMethod(n,m){alert(n+m)}

        */

        /*
          变通实现重载
        */
        function myMethod(){
        /*每个方法中都有一个arguments数组,
          根据参数个数不同来执行不同的语句*/
          if(arguments.length==1){
            //平方
            var n = parseFloat(arguments[0]);
            alert(n*n);
          }

          if(arguments.length==2){
            //加法
            var a = parseFloat(arguments[0]);
            var b = parseFloat(arguments[1]);
            alert(a+b);
          }
        }

    </script>

   </head>

   <body>
    <input type="button"  value="计算平方" onclick="myMethod(12)"/>
    <input type="button"  value="计算加法" onclick="myMethod(10,13)"/>
   </body>
</html>

14)decodeURI/encodeURI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>decodeURI/encodeURI</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>
    <!--
    常用的全局函数有:
    parseInt()/parseFloat()
    isNaN()
    eval
    decodeURI/encodeURI  解码编码


    alert属于window
    -->

   </head>

   <body>
          <h1> var str="http://www.baidu.com?张三" </h1>   
    <script type="text/javascript">
        var str ="http://www.baidu.com/s?wd=张三";

        //编码:encodeURI
        str=encodeURI(str);//Java decode(str)
        document.write("<h1>encodeURI str="+str+"</h1>");

        //解码:decodeURI
        str=decodeURI("%E5%BC%A0%E4%B8%89");//Java encode(str)
        document.write("<h1>decode from server :str="+str+"</h1>");

    </script>
   </body>
</html>

15)eval计算器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>计算器</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>
    <script type="text/javascript">
        function calc(str){
            var taObj=document.querySelector('#txtData');
            //c,清空
            if(str=='C')taObj.value="";
            //=,计算
            else if(str=='='){
                if(taObj.value.length>0)
                /*如果传入表达式错误,eval会抛出异常*/
                try{
                    var r=eval(taObj.value);
                    taObj.value=r;
                }catch(err){
                    taObj.value=err;
                }
            }
            //否则,追加
            else taObj.value+=str;
        }

    </script>

   </head>

   <body>
   <div>
        <input type="button" value="1" onclick="calc(this.value)">
        <input type="button"  value="2" onclick="calc(this.value)">
        <input type="button" value="3" onclick="calc(this.value)">
        <input type="button"  value="4" onclick="calc(this.value)"><br/>
        <input type="button" value="C" onclick="calc(this.value)">
        <input type="button" value="+" onclick="calc(this.value)">
        <input type="button" value="-" onclick="calc(this.value)">
        <input type="button" value="=" onclick="calc(this.value)"><br/>

        <!--readonly表示文本框不可编辑
        <textarea  type="text" cols="25" rows="4"
            id="txtData" style="resize:none"
            readonly onclick="calc(this.value)
        > </textarea>-->
        <input type="text" id="txtData" style="font-size:15pt;border:1px solid gray;" />
    </div>
   </body>
</html>

16)删除确认(2个return)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>删除确认</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>
    <script type="text/javascript">
        function update(){
            /*确定:返回true;取消:返回false*/
            var r=confirm('是否继续提交?');
            //false取消提交事件
            /**重要:取消事件:需要2个return,常用在重要信息的提交时*/
            return r;//false--告诉浏览器
        }

    </script>

   </head>

   <body>
   <form>
        <input name="user""/>
        <!--需要注意的是,为按钮定义单击事件时,需要使用 return 关键字。-->
        <input type="submit" value="更新" onclick="return update()"/>
    </form>
   </body>
</html>

17)页面跳转

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>窗口跳转新页面等</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>
    <script type="text/javascript">

    </script>

   </head>

   <body>
        <!--页面跳转3种形式:
            1.替换当前页  <a href="url"></a>
            2.可重复打开新窗口
                <a href="url" target="_black"></a>
                js:window.open(url)
            3.重复链接,只能开一个新窗口
                js:window.open(url,'标识名')
                标识名的作用是同名的窗口只能打开一次

        -->
        <input type="button" value="可重复打开新窗口" onclick="window.open('http://www.baidu.com')"/>
        <input type="button" value="只能开一个新窗口" onclick="window.open('http://www.baidu.com','baidu')"/>
        <!--以超链接的形式代替按钮:(void(0)什么都不做。)
           a href="javascript:void(0)":将超链接变成死链接,不可用井号,因为会回到顶部
        -->
        <a href="javascript:void(0)" onclick="window.open('http://www.baidu.com','baidu')">不可重复打开新页面</a>
   </body>
</html>

18)动态时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>时间</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style></style>
    <script type="text/javascript">
        /*定时器:做什么事(function)
            何时做,何时停止

        */
        //定义全局变量,代表线程号
        var timer;

        /*倒计时:计算倒计时;页面记载后开始;点按钮时停止*/
        var calc=function(){

            var now = new Date();
            //假定18点整下课
            var hour = 17-now.getHours();
            var minutes = 59-now.getMinutes();
            var seconds = 59-now.getSeconds();
            if(hour<0) clearInterval(timer);
            else{
                //var h1=document.getElementById("time");
                var h1=document.querySelector("h1");

                /*innerHTML:开始标签到结束标签之间的所有文本*/
                h1.innerHTML=hour+"小时"+minutes+"分"+seconds+"秒";
            }

        }



        /*<!--onload事件会在页面或图像加载完成后立即发生。-->*/
        window.onload=function(){
            /*setInterval(做什么事,每隔多少毫秒执行一次),
              此时已经开辟了新线程执行calc
              这个方法会返回一个整数,唯一标识1个子线程
            */
            timer=setInterval(calc,1000);
        }
        function stopTimer(){
           //===专门用于比较undefined, ==会把undefined认为是null

            if(timer===undefined)

            //重新开始一个线程
            timer=setInterval(calc,1000);

            else
            //关闭一个线程
            timer=clearInterval(timer);
            //timer=undefined
        }
        /*一次性计时器:做什么事(function)何时做,何时停止*/
        var timer1;
        function myAlert(){
            alert("该起床了");
            //实现重复启动闹钟(alert之后,线程值设置为undefined)
            timer1=undefined;
        }
        function startAlert(){

            if(timer1===undefined)
            /*setTimeout(做什么事情,等待多少毫秒); */
            timer1=setTimeout(myAlert,5000);
            //5秒中之后执行myAlert方法,此5秒之内timer1有值


            else
            /*取消等待(线程启动后,timer1不是undefined,如果再次点击的话,中断线程)*/
            timer1=clearTimeout(timer1);
            //timer=undefined
            //如果线程timer1有值,那么中断此线程
        }
    </script>

   </head>

    <body>
        距离下课还有:
        <h1 id="time"></h1>
        <input type="button" value="停止倒计时" onclick="stopTimer(this)"/><br/>
        <input type="button" id="btnTimeOut" value="再睡5秒" onclick="startAlert(this)"/><br/>
    </body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39310次
    • 积分:485
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:77篇
    • 译文:0篇
    • 评论:1条
    文章分类