【JavaScript】setlntval函数和内置类..

去除前后空白trim

<script type="text/javascript">
  window.onload=function(){
    document.getElementById("btn").onclick=function(){
     var value=document.getElementById("username").value;  
     var newValue=value.trim();
      alert("--->"+newValue+"<----")
    }
  
  }

</script>
 <input type="text" id="username">
<input type="button" id="btn" value="按钮">

效果：

在IE8不支持trim，所以可以使用prototype扩展这个函数。如

//给String扩展trim
<script type="text/java">
  String.prototype.trim=function(){
    alert("调用自己写的trim");
//正则对象:/.../
   //return this.replace(/^\s+/,"").replace(/\s+$/,"");
   return this.replace(/^\s+|\s+$/g,"");
  }

</script>

小test

表单验证:
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成，不能含有其它符号(正则表达式)
(4)密码和确认密码一致，邮箱址址合法。
(5)统一失去焦点验证
(6)错误提示信息统一在span标签中提示，并且要求字体12号，红色。
(7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
(8)最终表单中所有项均合法方可提交

复选框的全选和取消全选

   <script type="text/javascript">
        window.onload =function(){
            //给每个复选框绑onclick事件
            var firstChk =document.getElementById("firstChk");
            firstChk.onclick =function(){
            //根据name获得那个值
            var aihaos = document.getElementsByName("aihao");
            // 
                for(var i =0; i<aihaos.length; i++){
                    aihaos[i].checked =firstChk.checked;
            
                }
            }
            var all=aihaos.length;
            for(var i = 0; i < aihaos.length; i++){
                aihaos[i].onclick =function(){
                var checkedCount =0;
                //  总数量和选中的数量相等的时候，第一个复选框选中
                    for(var i = 0; i<aihaos.length; i++){
                            if(aihaos[i].checked){
                            checkedCount++;
                        }
                    }
                        firstChk.checked =(all== checkedCount);
                        /*
                        if(all ==checkedCount){
                        firstChk.checked =true;
                        } else{
                        firstChk.checked =false;}*/
                   
                 }
           }
       }
   </script>
     <input type="checkbox" id="firstChk"/><br>
      <input type="checkbox" name="aihao" value="smoke"/>抽烟<br>
      <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
        <input type="checkbox" name="aihao" value="tt"/>烫头<br> 

获取系统当前时间

js中的内置支持类Date,可以用来获取时间/日期

<script type="text/javascript">
//创建Date对象
  var nowTime=new Date();
//输出，这个的等价于java中的sout
document.write(nowTime);
</script>

运行结果：

我们发现这个格式不太对头，可以用转换成具有本地语言的日期格式

var nowTime=new Date();
nowTime=nowTime.toLocaleString();
//输出
document.write(nowTime);

运行结果：

js中的换行，在script中不能直接写br。

document.write("<br>")

获取毫秒数

重点：获取的毫秒数是从(1970年1月1日 00:00:00 000毫秒到到当前系统时间的总毫秒数)

<script type="text/javascript">
var t=new Date();
var times=t.getTime();//一般会使用当前毫秒数当做时间戳
document.write(times);
//document.write(new Date().getTime);//简约一句
</script>

运行结果：

周期函数setInterval

    <script type= text/javascript>
      function displayTime(){
        var time = new Date();
        var strTime =time.toLocaleString();
        document.getElementById("timeDiv").innerHTML=strTime;
    }
      //每隔1秒调用displayTime()函数 
      function start(){
          //从这行代码执行结束开始,则会不间断的，每隔1000毫秒调用一次displayTime()函数。
         //它的返回值可以传递给clearInterval从而取消code周期执行的值
         v=window.setInterval("displayTime()",1000);
      }
         //让时间停下
      function stop() {
        window.clearInterval(v);
        
      }
      </script>
      <br><br>
      <input type="button" value="显示系统时间" onclick="start();"/>
      <input type="button" value="系统时间停止" onclick="stop();"/>
      <div id="timeDiv"></div>

内置支持类Array

创建数组

//创建长度为0的数组
var arr=[];
//求数组长度
arr.length

数组数组类型没有限制

var arr2=[1,false,true,"kongchao",null];

遍历数组,输出在网页上

for(var i=0;i<arr.length;i++){
   document.write(arr[i]+"<br>");
}

数组不会越界

如arr中长度有5，直接arr[7]=true;则会

var arr=[1,false,true,"kongchao",null];
arr[7]=true;
for(var i=0;i<arr.length;i++){
   document.write(arr[i]+"<br>");
}

** 另一种创建数组的方式**

var arr =new Array();//创建数组长度为0

var arr =new Array(5);//创建数组长度为5

var arr =new Array(1,2);//创建数组长度为2,表示其中有两个值1,2

join方法链接

**join方法将变成字符串，用参数链接起来 **

var a = [1,2,3,9];
var str =a.join("-");
 alert(str);//"1-2-3-9"

//在数组的末尾添加一个元素(数组长度+1)
var a = [1,2,3,9];
 a.push(10);
 alert(a.join("-"));
//将数组末尾的元素弹出 
var endElt =a.pop();
 alert(endElt);

js中数组可以模拟栈的数据结构，先进后出原则

push();压栈

pop();弹栈

反转数组：reverse()

//反转数组
var a = [1,2,3,9];
 a.reverse();
var str =a.join("-");
 alert(str);

BOM编程

window中open和close方法

<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com')"

//新窗口开启
<input type="button" value="开启百度" onclick="window.open('http://www.baidu.com',_blank)"
//父窗口开启
<input type="button" value="父窗口开启百度" onclick="window.open('http://www.baidu.com',_parent)";
//顶级窗口
<input type="button" value="顶级窗口开启百度" onclick="window.open('http://www.baidu.com',_top)"

打开1-open.html文件

<input type="button" value="打开表单验证" onclick="window.open('1-open.html')")>

关闭当前窗口

<input type="button" value="关闭当前窗口" onclick="window.close();">

消息框弹出（alert、confirm）

confirm有返回值，确认框中点确定返回true，点取消返回false

window.confirm();//弹出消息确认框
window.alert();

示例：

 <script text/javasctipt>
    function again(){
      if(window.confirm("你确定要删除这数据？？")){
        alert("delete date..") 
      }
   }
   </script>

history和location对象

history

//后退
<input type="button" value="后退" onclick="window.history.back()">
//后退
<input type="button" value="后退" onclick="window.history.go(-1)">
//前进
<input type="button" value="后退" onclick="window.history.go(1)">

location

location获取地址栏

  <script type="text/javascript">
    function goBaidu(){
    // var location0bj=window.location;//写法1
    // locationObj.href="http://www.baidu.com";
    
      window .location.href ="http://www.jd.com";//写法2
      //window.location="http://www.126.com";
      

      //  document.location.href ="http://www.sina.com.cn"; //写法3
      // document.location="http://www.tmall.com";
    }
    </script>
    <input type="button" value="百度" onclick="goBaidu();"/>