Javascript小知识点

来源：互联网发布：网络打鱼赌钱游戏代理编辑：程序博客网时间：2024/06/06 17:16

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" onclick="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 onclick="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 onclick="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 onclick="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").value21             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             //参数一：自定义的key27             //参数二：要存储的内容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>

0 0