Javascript小知识点_js没有fori快捷键-CSDN博客

if关键字

 1   var d = new Date();
 2         var hour = d.getHours();
 3         if(hour<8){
 4             document.write("早上好")
 5         }else if(hour<12){
 6             document.write("上午好")
 7         }else if(hour<18){
 8             document.write("下午好")
 9         }else{
10             document.write("晚上好")
11         }

函数的基本使用

不带参数
示例代码

1 <script>
2      function showMsg(){
3         alert(m);
4      }
5 </script>
6

带参数的函数
不需要定义参数类型,写入占位符

示例代码

1 <script>
2      function showMsg(m){
3         alert(m);
4     }
5 </script>
6

for循环产生日期 -->快捷键：fori

1  <select name="year">
2         <script>
3             for (var i = 1930; i < 2016; i++) {
4                 document.write("<option value='" + i + "'>" + i + "</option>")
5             }
6         </script>
7  </select>

异常处理 -->tryc

 1  <script>
 2         document.write("<p>起床</p>");
 3         document.write("<p>做饭</p>");
 4         document.write("<p>吃饭</p>");
 5         try{
 6             bianmi
 7         }catch(e){
 8             alert("something is wrong")
 9         }
10 
11         document.write("<p>上课</p>");
12  </script>

自定义错误

 1 <script>
 2 function myFunction()
 3 {
 4 try
 5   {
 6   var x=document.getElementById("demo").value;
 7   if(x=="")throw "empty";
 8   if(isNaN(x)) throw "not a number";
 9   if(x>10) throw "too high";
10   if(x<5)  throw "too low";
11   }
12 catch(err)
13   {
14   var y=document.getElementById("mess");
15   y.innerHTML="Error: " + err + ".";
16   }
17 }
18 </script>
19 <p>Please input a number between 5 and 10:</p>
20 <input id="demo" type="text">
21 <button type="button" οnclick="myFunction()">Test Input</button>
22 <p id="mess"></p>

获取浏览器类型

1 alert(navigator.appName)

倒计时

 1 <body>
 2 
 3     <script>
 4         //1.要执行的操作
 5         //2.倒计时时间,单位是毫秒
 6         //setTimeout("alert('haha')", 5000);
 7 
 8         function showTime() {
 9             document.getElementById("time").innerHTML = new Date();
10             setTimeout("showTime()", 1000);
11         }
12     </script>
13     <button οnclick="showTime()">显示时间</button>
14     <p id="time"></p>
15 </body>

定时器小案例

<body>
    <script>
        var i = 1;

        function repeat() {
            document.getElementById("id_text").src = "img/" + i + ".png"
            i++;
            var timer = setTimeout("repeat()", 500)
            if (i == 10) {
                //停止动画
                clearTimeout(timer)
            }
        }
    </script>
    <img id="id_text" />
    <button οnclick="repeat()">Click</button>
</body>

获取字符串长度

  document.getElementById("in_email").value.length;

字符串的替换

<script>
        var s="this is jack"
        var t=s.replace("jack","rose")
        document.write(t)
</script>

案例3,待办事项列表

 1  <head>
 2 <meta charset="utf-8">
 3 <title></title>
 4 <script>
 5  function addTodo() {
 6  //取出用户输入的内容
 7  var content = document.getElementById("id_input").value;
 8   //创建一个新的标签                      
 9  var li = document.createElement("li");
10   //赋值
11   li.innerHTML = content;
12   //取出父元素
13    var list = document.getElementById("id_list");
14     //将新内容放到父元素中
15      list.appendChild(li);
16        }
17        </script>
18     </head>
19 
20  <body>
21     <font>Pls input what you will do</font>
22      <br />
23      <input type="text" id="id_input" />
24     <br />
25       <button οnclick="addTodo()">Add</button>
26      <br />
27      <ul id="id_list">
28           <li>eat</li>
29            <li>sleep</li>
30        </ul>
31     </body>

html5本地存储

 1 <head>
 2     <meta charset="utf-8">
 3     <title></title>
 4 
 5     <style>
 6         .diary {
 7             padding: 15px;
 8             margin: 15px;
 9             width: 150px;
10             height: 150px;
11             background-color: greenyellow;
12             position: relative;
13             float: left;
14         }
15     </style>
16     <script>
17         var i = 0;
18 
19         function add() {
20             var usr_input = document.getElementById("input").value
21             var new_div = document.createElement("div");
22             //设置div的CSS属性
23             new_div.setAttribute("class", "diary")
24             new_div.innerHTML = usr_input;
25             document.getElementById("container").appendChild(new_div)
26             //参数一：自定义的key
27             //参数二：要存储的内容
28             localStorage.setItem("item" + i, usr_input)
29             i++;
30             //存放总共写了多少篇日记
31             localStorage.setItem("total", i)
32         }
33     </script>
34 </head>
35 
36 <body>
37     <font>请输入日记内容</font>
38     <br />
39     <input id="input" type="text" />
40     <br />
41     <button onclick="add()">添加</button>
42     <div id="container"></div>
43 
44     <script>
45         var totalNum = localStorage.getItem("total")
46         for (var i = 0; i < totalNum; i++) {
47             var new_div = document.createElement("div");
48             //设置div的CSS属性
49             new_div.setAttribute("class", "diary")
50 
51             new_div.innerHTML = localStorage.getItem("item" + i);
52             document.getElementById("container").appendChild(new_div)
53         }
54     </script>
55 </body>

JQuery的网络请求

 模版代码

        <script>
            //通过一个ajax的get请求把服务器的数据获取下来
            $.get("url",function(data,status){
                // 把一个字符串转换成合适的对象
                eval()
            });
        </script>
        * $ :　代表js框架
        * get : 代表获取一个数据
        * url : 代表数据源地址
        * data：请求回来的所有数据
        * status：请求的结果

示例代码

        <head>
            <meta charset="utf-8">
            <title></title>
            <!--指定js框架-->
            <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>

        <body>
            <script>
                $.get("detail.txt", function(data, status) {
                    var arr = eval(data);
                    for (var i = 0; i < arr.length; i++) {
                        var img = arr[i].img;
                        var desc = arr[i].desc;
                        var imgg = document.createElement("img");
                        imgg.src=img
                        document.getElementById("container").appendChild(imgg)
                        var pp=document.createElement("p")
                        pp.innerHTML=desc;
                        document.getElementById("container").appendChild(pp)
                    }
                });
            </script>

            <div id="container"></div>
        </body>