JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 非常容易学。
阅读本教程，您需要有以下基础：
HTML 教程CSS 教程PS ：JavaScript 一直在升级，请等待
01、电灯的开关
<img id="light" src="img/off.gif"> <script> /* 1、获取图片对象 2、绑定点击事件 3、切换图片 使用flag标注状态 * */ var element = document.getElementById("light"); var flag = false;//关闭状态 element.onclick = function (ev) { if(flag){//如果灯开着 element.src = "img/off.gif"; flag = false; }else{ element.src = "img/on.gif"; flag = true; } } </script>02、设置时间弹出链接 <p> <span id="time">5</span>之后跳转 </p> <script> var data = 5; function fun(){ data--; if(data<=0){ location.href="https://www.sina.cn"; } time.innerHTML = data; } setInterval(fun,1000); </script> 03、轮播图 <img src="img/img/banner_1.jpg" id="img" width="100%" /> <script> var number =1; function fun(){ number++; if(number>3){ number=1; } var img =document.getElementById("img"); img.src="img/img/banner_"+number+".jpg"; } setInterval(fun,3000); </script>04.多级联动 <select id="pro"> <option value="sc">四川</option> <option value="cq">重庆</option> <option value="gd">广东</option> </select><select id="city"> <option>成都</option> <option>德阳</option> <option>绵阳</option> </select> <script> var pro = document.getElementById("pro"); var city = document.getElementById("city"); function choice() { var _pro = pro.value switch (_pro) { case "sc": city.innerHTML = "<option>成都</option>\n" + " <option>德阳</option>\n" + " <option>绵阳</option>" break; case "cq": city.innerHTML = "<option>重庆</option>"; break; case "gd": city.innerHTML = "<option>广州</option>\n" + " <option>深圳</option>\n" + " <option>东莞</option>" break; } } </script>05.动态表格<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table { border: 1px solid; margin: auto; width: 500px; } td, th { text-align: center; border: 1px solid; } div { text-align: center; margin: 50px; } </style></head> <body><div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"></div><table cellspacing="0" cellpadding="0"> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <script> /* // 1、获取按钮 document.getElementById("btn_add").onclick =function () { //2、获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3、创建td，赋值td的标签体 //id的td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name的td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender的td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0)"); ele_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); var tr = document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); document.getElementsByTagName("table")[0].appendChild(tr); }*/ // 1、获取按钮 document.getElementById("btn_add").onclick = function () { //2、获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3、 获取table var table = document.getElementsByTagName("table")[0]; // 4、追加一行 table.innerHTML+="<tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" + " </tr>"; } // 删除方法 function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script></table></body> </html>06.表格全选<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; width: 500px; margin-left: 30%; } td,th{ text-align: center; border: 1px solid; } div{ margin-top: 10px; margin-left: 30%; } .out{ background-color: white; } .over{ background-color: pink; } </style> <script> /* 1.全选： 获取所有的checkbox 遍历cb，设置每一个cb的状态为选中 checked 2.全不选 获取所有的checkbox 遍历cb，设置每一个cb的状态为选不中 3．反选 获取所有的checkbox 遍历cb，设置每一个cb的状态取反 */ window.οnlοad=function(){ document.getElementById("selectAll").οnclick=function(){ var cbs=document.getElementsByName("cb"); for(var i=0;i<cbs.length;i++){ cbs.checked=true; } }; document.getElementById("unSelectAll").οnclick=function(){ var cbs=document.getElementsByName("cb"); for(var i=0;i<cbs.length;i++){ cbs.checked=false; } }; document.getElementById("selectRev").οnclick=function(){ var cbs=document.getElementsByName("cb"); for(var i=0;i<cbs.length;i++){ cbs.checked=!cbs.checked; } }; } </script> </head> <body> <table> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cb" id="firstCb"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb" ></td> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </table> <!--<input type="checkbox" name="cb" id="firstCb" /> <input type="checkbox" name="cb" id="SecondCb" /> <input type="checkbox" name="cb" id="ThirdCb" />--> <div> <input type="button" id="selectAll" value="全选" /> <input type="button" id="unSelectAll" value="全不选" /> <input type="button" id="selectRev" value="反选" /> <script> var selectAll =document.getElementById("selectAll"); var cbs =document.getElementsByName("cb"); selectAll.οnclick=function(){ for (var i=0;i<cbs.length;i++) { cbs.checked = true; } } var unSelectAll =document.getElementById("unSelectAll"); var cbs =document.getElementsByName("cb"); unSelectAll.οnclick=function(){ for (var i=0;i<cbs.length;i++) { cbs.checked = false; } } var selectRev=document.getElementById("selectRev"); var cbs =document.getElementsByName("cb"); selectRev.οnclick=function(){ for (var i=0;i<cbs.length;i++) { cbs.checked = !cbs.checked; } } </script> </div> </body> </html>07.输出时间 <script> var myDate =new Date(); var year =myDate.getFullYear(); var month =myDate.getMonth()+1; var day =myDate.getDate(); var hour =myDate.getHours(); var min =myDate.getMinutes(); var second = myDate.getSeconds(); //如果为单数时，在前面补0 year = year < 10 ? "0" :year; month =month <10 ? "0" :month; day =day < 10 ? "0" :day; hour = hour <10 ? "0" :hour; min =min <10 ? "0" :min; second = second <10 ? "0" :second; //输出时间 document.write(year+"-"+month +"-"+day+"-"+hour+"-"+min+"-"+second); </script>08.根据输入的行和列，创建表格 <div> 请输入你想创建的表格： 行：<input type="text" id="row">列：<input type="text" id="col"> <input type="button" id="creat" value="创建"> </div> <div id="div1"> </div> <script> function creat() { var row = document.getElementById("row").value; var col = document.getElementById("col").value; var div1 = document.getElementById("div1"); var tab = "<table border=‘1‘ cellpadding=‘0‘ cellspacing=‘0‘ style=‘margin: 50px auto‘>"; for (var i = 1; i <= row; i++) { tab += "<tr>"; for (var j = 1; j <= col; j++) { tab += "<td style=‘width: 50px;height: 30px;‘>aa</td>"; } tab += "</tr>"; } tab += "</table>"; div1.innerHTML = tab; } </script>09.表单验证 <form id="form"> 用户名：<input type="text" id="username" name="name"> <span id="sp_name"></span> <br> <input type="submit"> </form><script> window.onload = function (ev) { document.getElementById("form").onsubmit = function (ev1) { return checkName(); } } function checkName() { var useranme = document.getElementById("username").value; var sp_name= document.getElementById("sp_name"); var regExp = new RegExp("^.{3,20}$"); if(regExp.test(useranme)){ sp_name.innerHTML = "可以注册"; sp_name.style.color = "green"; return true; }else{ sp_name.innerHTML = "用户名格式有误"; sp_name.style.color = "red"; return false; } } </script>
