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").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>