码迷,mamicode.com
首页 > 编程语言 > 详细

Web-Lesson08-JS的数组和json

时间:2018-01-26 00:29:47      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:数组   post   one   复数   输入框   不能   a标签   relative   [1]   

一、字符串

  1.String字符串

    索引,下标,偏移量——从0开始。

    str[index];——通过索引取字符串。

    str.length;——获取长度。

    str.toString;——转换字符串。

    str.substring();——截取字符串,会比较字符串的大小,小的参数在前边,复数变为0。

    str.slice();

    str.split();

    str.indexof();——查询第str中字符第一次出现的下标,不存在则返回-1;

     技术分享图片

 

  2.Array数组 

    以创建对象的形式创建数组:

 

    var arr = new Array();

    var arr = [];

    arr[0] = "zero";

    arr[1]= "one";

    arr[3]= "two";

 

    arr.join();——拼接字符串。

    arr.push();——数组后面追加,可以追加1个或者多个。

    arr.unshift();——往数组前面追加。

    arr.pop();——删除数组的最后一位。

    arr.shift();——删除数组的第0位。

    arr.splice(n);——保留前n位,删除后面的。

    arr.splice(n,m);——从第n位开始,去掉后面m位。

    arr.splice(n,m,"str")——从第n位开始,去掉后面m位,并添加str。

    技术分享图片

    技术分享图片

    arr.sort();——从小到大排序。

    arr.reverse();——从大到小排序。 (只排正值)

    技术分享图片

    var arr = [-6,17,4,9,4]

    arr.sort(function(a,b){

      retuen a-b;  //从小到大;

      return b-a;  //从大到小;

      return 1;  //return 一个大于0的数字,倒序;

      return -1  //return一个小于0的数字,原来的顺序;

    })  

     技术分享图片

    二维数组

    var arr = [[1,2,3],5,6];

    技术分享图片

 

  3.时间对象

    var data = new Date();

    var year = data.getFullYear();  //获取年份。

    var month = data.getMonth()+1;  //获取月份 取值0~11之间的整数,所以结果要+1才是真正月份。

    var date = data.getDate();  //获取日数,取1~31之间的整数。

    var hour = data.getHours();  //获取小时数。

    var min = data.getMinutes();  //获取分钟数,取0~59之间的整数。

    var sec = data.getSeconds();  //获取秒数,取0~59之间的整数。

    var day = data.getDay() + 1;  //获取周几,取值为0~6之间的整数。

    document.body.innerHTML = year + “-” + month + "-" + date + "  " + hour + ":" + min + ":" + sec + "  " + "星期" + day;

     技术分享图片

四、定时器

  1.定时器

    setTimeout(fn, 2000);   //2000毫秒后执行fn函数;

 

    setInterval(fn, 2000);  //每过2000毫秒执行一次;

    另一种写法:

    setInterval(function(){

      alert("haha");

    }, 2000);

  2.清除定时器

    cleanInterval();

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div.box{
            width: 580px;
            height: 363px;
            border: 4px solid #eee;
            position: relative;
            margin: 100px auto;
        }

    p{
        width: 200px;
        height: 100px;
        margin: 50px auto;
        text-align: center;
        line-height: 100px;
    }

    span{
        color: red;
        font-size:18px;
    }

    </style>
</head>
<body>
    <div class = "box">
    <p>距离结束还有<span id = "timer">5s</span></p>
    </div>

    <script>
    var timer = document.getElementById("timer");
    var num = 5;
    var time;
    time = setInterval(function(){
        num --;
        timer.innerHTML = num + "s";
        if(num == 1){
        clearInterval(time);
        window.location.href = "http://www.baidu.com";
        }

    }, 1000);

    

    </script>




</body>
</html>

 

    结果:运行五秒后清楚定时器,并跳转到百度。

 

    

五、form表单

  1.input标签

    1)Type

      type = “text” 文本输入格式

      type = “password” 密码输入格式

 

    2)submit提交

      placeholder属性——输入框提示,hint

      action属性  提交的地址链接

      required属性  提交时候,如果该输入框为空,不能提交,并提示

      get  提交数据直接显示在网址之后

      post  提交数据查看浏览器network—>doc

    3)reset重置

      点击重置输入内容和选项

    4)button(给js操作)

      onlick = “function” 在js里操作点击事件

    5)name属性

      name 属性规定 input 元素的名称。

      name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

      <form name = "myform" action="" method="get">
        <input type="text" placeholder = "请输入要查询的内容" name = "mysearch">

      </form>

      这种情况可以直接通过name获取到输入的值  var a = myform.mysearch.value;

    6)单选框 

      单选框:
      <input type="radio" name="gender" value="nan">男
      <input type="radio" name="gender" value="nv">女
      <input type="radio" name="gender" disabled>保密<br/>

      结果:技术分享图片

 

    7)多选框

          多选框:
          <input type="checkbox" id="sing" name="hobby">
          <label for="sing" name="hobby">唱歌</label>
          <input type="checkbox" name="hobby" checked>跳舞
          <input type="checkbox" name="hobby">看书
          <input type="checkbox" name="hobby" disabled>逛街<br/>            

      结果:技术分享图片

      label标签,通过for属性关联唱歌两个字,name要和关联的input中name相同,使得数遍点击唱歌也可以勾选到框框,单选框同样适用。

      disable,使得该选项不能选中,单选框同样适用。

      checked,默认选中该选项,,单选框同样适用。

 

  2.select标签

      select 为下拉列表菜单标签

        onchange="fun()" ——选中事件

        size="2" ——显示几行       

       selected 规定在select里面默认展示第那一项

      option为下拉列表数据标签
      value 为option的数据值(用于数据的传值)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <form action="" method="get"> 
    <label>2、跳转的下拉列表菜单</label> 
    <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu(‘parent‘,this,0)"> 
        <option value="http://www.DIVCSS5.com/">DIVCSS5</option> 
        <option value="http://www.divcss5.com/">DIVCSS5</option> 
    </select> 


    下拉框:
        <select name="aa" id="aa" size="2" onchange="fun()">
            <!--size规定下拉列表中可见选项的数目-->
            <!--selected 规定在select里面默认展示第几项-->
            <option value="1">长沙</option>
            <option value="2">北京</option>
            <option value="3" selected>成都</option>
            <option value="4">上海</option>
        </select><br/>
    </form> 

    <script type="text/javascript"> 

    function MM_jumpMenu(targ,selObj,restore){ //v3.0 
        eval(targ+".location=‘"+selObj.options[selObj.selectedIndex].value+""); 
            if (restore) selObj.selectedIndex=0; 
    } 
    
    function fun(){
            alert("111");
    }
 
   </script> 

</body>
</html>

 

 

    结果:技术分享图片

 

  3.textarea标签 

    文本框:默认可以垂直水平拉伸。

      resize: none;  //不拉伸
      resize: vertical;  //只允许垂直拉伸
      resize: horizontal;  //只允许水平拉伸

 

 

    <!DOCTYPE html>
      <html lang="en">
    <head>
    <meta charset="UTF-8">
      <title>Title</title>       <style> * { margin: 0; padding: 0; }         textarea{           width: 200px;           height: 100px;           //resize: none;           //resize: vertical;           //resize: horizontal;         }       </style>     </head>     <body>       <form action="" method="get">         文本框:         <textarea name="qq" id="qq">         </textarea><br/>        </form>
    </body>     </html>

    结果:技术分享图片

 

 

 

 

 

 

 

 

 

 

 

    

Web-Lesson08-JS的数组和json

标签:数组   post   one   复数   输入框   不能   a标签   relative   [1]   

原文地址:https://www.cnblogs.com/bear905695019/p/8343916.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!