|
web-day03使用JS完成图片轮播效果使用JS完成页面定时弹出广告使用JS完成表单的校验使用JS完成表格的隔行换色使用JS完成复选框的全选效果使用JS完成省市联动效果图片轮播<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /*function setTime(){ window.setInterval("alert('aaa')",3000); }*/ //匿名函数 window.onload=function(){ window.setInterval("change()",3000) } var i=1; function change(){ i++; if(i>3){ i=1; } var imge=document.getElementById("image") imge.src="../img/img/"+i+".jpg" } </script> </head> <body > //步骤一创建html文件 //步骤二页面加载使用onload事件 //步骤三出发函数setTime() //步骤四获得图片的控制权 //修改图片的src属性 <table> <tr> <td> <img id="image" src="../img/img/1.jpg"/> </td> </tr> <!--<tr> <td> <img src="../img/img/middle01.jpg"/> </td> </tr>--> </table> </body></html>页面定时弹出广告(无限循环)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> var time; window.onload=function(){ time=window.setInterval("show()",2000) } //显示图片 function show(){ var adDiv=document.getElementById("adDiv") adDiv.style.display="block" clearInterval(time) setInterval("hide()",2000) } //隐藏图片 function hide(){ var adDiv=document.getElementById("adDiv") adDiv.style.display="none" clearInterval(time) setInterval("show()",2000) } </script> </head> <body> <div id="adDiv" style="display: none;"> <img src="../img/img/ad.jpg"/> </div> <div> <img src="../img/img/1.jpg"/> </div> </body></html>表单校验(表单中的必要属性 type name id-----name是后台需要的 id是前台需要的 type是基本的属性类型)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function checkForm() { var username = document.getElementById("username").value if(username == "") { //alert("用户名不能为空"); var sp=document.getElementById("sp") sp.innerHTML="<font color='red'>用户名不能为空</font>" return false; } var password=document.getElementById("mima").value if(password==""){ return false; } return true; } </script> <script> function tips(){ var sp=document.getElementById("sp") sp.innerHTML="<font color='red'>用户名必须字母开头</font>" } </script> </head> <body> <table border="1px" width="90%"> <!--<tr> <td> <img src="../img/img/header.png"/> </td> </tr> <tr> <td> <img src="../img/img/2.jpg"/> </td> </tr>--> <tr> <td> <img src="../img/img/ad.jpg" /> </td> </tr> <tr> <td> <form action="../JS和CSS/定时弹出广告.html" method="get"> <table width="40%" align="center" height="500"> <tr> <td>用户名</td> <td> <input type="text" class="requide" name="aaa" id="username"/> <span id="sp"></span> </td> </tr> <tr> <td>密码</td> <td> <input type="password" class="requide" id="mima" /> </td> </tr> <tr> <td>邮箱</td> <td> <input type="email" class="requide" id="el" /> </td> </tr> <tr> <td>籍贯</td> <td> <select name="provice"> <option value="请选择">请选择</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="天津">天津</option> </select> <select name="city"> <option value="请选择">请选择</option> <option value="石家庄">石家庄</option> <option value="保定">保定</option> <option value="廊坊">廊坊</option> </select> </td> </tr> <tr> <td>性别</td> <td> <!--记得加上name属性,这样会同属一组,单选选项必须在同一组中--> <input type="radio" name="radio" value="男" checked="checked"/>男 <input type="radio"name="radio" />女 </td> </tr> <tr> <td>提交</td> <td> <input type="submit" value="提交" /> </td> </tr> <tr> <td>重置</td> <td> <input type="reset" value="重置" /> </td> </tr> </table> </form> </td> </tr> </table> </body></html>【步骤一】创建一个html文档【步骤二】在要去校验的文本框上添加事件.【步骤三】触发函数【步骤四】在函数中向文本框后的html的区域中写入一段提示的内容.1.4.3 代码实现: function tips(id,content){ document.getElementById(id+"Span").innerHTML = "<font color='red'>"+content+"</font>"; } function checkForm(){ // 判断用户名不能为空: var username = document.getElementById("username").value; if(username == ""){ document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>"; return false; } var password = document.getElementById("password").value; if(password == ""){ document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>"; return false; } }JS的事件的总结：* onload :* onclick :* onsubmit :* onfocus :* onblur :* onchange :下拉列表改变事件.* ondblclick:双击某个元素的事件.键盘操作事件:* onkeydown :* onkeyup :* onkeypress:鼠标操作事件：* onmousemove：* onmouseout：* onmouseover：* onmousedown* onmouseup隔行换色技术分析 var tab1=document.getElementById("tab1")//获得对象控制权 var len=tab1.rows.length//获得该表格的行数 其中,tab1.rows方法是获得一个表格的行数数组<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ var tab1=document.getElementById("tab1") var len=tab1.rows.length for(var i=0;i<len;i++){ if(i%2==0){ tab1.rows.style.backgroundColor="red" }else{ tab1.rows.style.backgroundColor="yellow" } } } </script> </head> <body> <!--1.5.2.2 步骤分析： 【步骤一】创建一个HTML页面：可以使用后台设计页面. 【步骤二】确定事件：onload事件. 【步骤三】触发一个函数.在这个函数中获得操作的表格. 【步骤四】获得表格中的所有的行数. 【步骤五】遍历表格的行数. 【步骤六】判断是否是奇数行还是偶数行 --> <!--插入表格 六行四列--> <table border="1px" align="center" width="50%" id="tab1"> <tr> <td align="center"><b>分类的ID</b></td> <td align="center"><b>分类的名称</b></td> <<td align="center"><b>分类的描述</b></td> <td align="center"><b>分类的操作</b></td> </tr> <tr> <td>1</td> <td>手机数码</td> <td>手机数码</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr> <td>2</td> <td>电脑办公</td> <td>电脑办公</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr> <td>3</td> <td>烟酒糖茶</td> <td>烟酒糖茶</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr> <td>4</td> <td>鞋靴箱包</td> <td>鞋靴箱包</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr> <td>5</td> <td>汽车用品</td> <td>汽车用品</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> </table> </body></html>表格复选框的全选和全不选1.6.2.2 步骤分析：【步骤一】创建一个HTML页面.【步骤二】确定事件：复选框的单击事件.【步骤三】触发一个函数【步骤四】在函数中,获得上面的复选框是否被选中.【步骤五】如果选中,下面的所有的复选框都被选中.【步骤六】如果不选中,下面的所有的复选框都不选中.function checkAll(){ // 获得上面的复选框 var selectAll = document.getElementById("selectAll"); // 判断这个复选框是否被选中. var ids = document.getElementsByName("ids"); if(selectAll.checked == true){ // 上面复选框被选中：获得下面所有的复选框,修改checked属性 for(var i = 0 ;i<ids.length;i++){ ids.checked = true; } }else{ // 上面复选框没有被选中：获得下面所有的复选框,修改checked属性 for(var i = 0 ;i<ids.length;i++){ ids.checked = false; } } }DOM的常用的操作】 获得元素：* document.getElementById(); -- 通过ID获得元素.* document.getElementsByName(); -- 通过name属性获得元素.* document.getElementsByTagName(); -- 通过标签名获得元素. 创建元素：* document.createElement(); -- 创建元素* document.createTextNode(); -- 创建文本 添加节点：* element.appendChild(); -- 在最后添加一个节点.* element.insertBefore(); -- 在某个元素之前插入. 删除节点：* element.removeChild(); -- 删除元素 省市联动 1.7.2.1 技术分析:【JS中创建数组】【JS的事件】下拉的列表的改变的事件.onchange.【JS的DOM的操作】创建元素：添加元素：1.7.2.2 步骤分析【步骤一】创建一个HTML文件.【步骤二】确定事件：onchange事件.【步骤三】触发函数,在函数中编写代码.【步骤四】获得到所选择的省份的信息.【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据.【步骤六】遍历数组中的市的信息.【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中.1.7.3 代码实现: // 定义数组：二维数组： var arrs = new Array(5); arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市"); arrs[1] = new Array("南京市","苏州市","扬州市","无锡市"); arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施"); arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市"); arrs[4] = new Array("长春市","吉林市","四平市","延边市"); function changeCity(value){ // 获得到选中的省份的信息. var city = document.getElementById("city"); // 清除第二个列表中的内容: for(var i=city.options.length;i>0;i--){ city.options = null; } // city.options.length = 0; // alert(value); for(var i= 0 ;i< arrs.length;i++){ if(value == i){ // 获得所有的市的信息. for(var j=0;j<arrs.length;j++){ // alert(arrs[j]); // 创建元素： var opEl = document.createElement("option");// <option></option> // 创建文本节点: var textNode = document.createTextNode(arrs[j]); // 将文本的内容添加到option元素中. opEl.appendChild(textNode); // 将option的元素添加到第二个列表中. city.appendChild(opEl); } } } }
|
|
收藏
淘帖
踩
