<!--内联式 CSS （层叠样式表） 编辑 层叠样式表(英文全称：Cascading Style Sheets) CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 就是网页的美化技术。 入门:如何在html里面使用css html里面的外观命名跟css外观命名会有所有不同。但效果一致 css属性: 属性1：值1;属性2：值2;属性3：值3;... 内联式:对每个元素都进行style进行样式添加. 内部式:在当前html的head的style标签里面添加 <head> <style> 查找元素{//css属性} </style> </head> 外部式:要求大家敲明白 <head> <link rel="stylesheet" type="text/css" href="css/out.css"/> 固定写法:rel="stylesheet" type="text/css" 前者是当作一个样式文件,后者是当作css代码 </head> --> <input type="text" value="内联式" style="background-color: yellow ;" /><br /> <input type="text" value="内联式" style="background-color: yellow ;" /> <div > 我是div </div> <div > 我是div </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*对每一个option进行外观设置*/ option{ min-width: 200px; } </style> </head> <body> <!--css能做到html做不到外观设置,可以更简洁高效--> <select size="3" > <option>小班</option> <option>中班</option> <option>大班</option> </select> </body> </html> 选择器最终目的就是为了拿到指定的元素对象. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*选择器就是一些选择html元素的符号*/ /*#id{//css属性}*/ #input1{ background-color: blue;} /*.class值{//css属性 }*/ .inp{background-color: yellow;} /*名称元素选择器:使用标签名,表示对当前页面的每个元素*/ div{background-color: red;} /*虽然有的元素名称一样,这时不要用名称选择器*/ /*元素[属性='值']{//css代码}*/ /*input[type='password']{background-color: green;}*/ /*扩展:分组选择器,包含选择器 外部元素选择器 内部元素选择器{//css代码}*/ div span{background-color: orange;} /*分组选择器是一种共用样式的写法 简化css代码 选择器1,选择器2...{//css代码}*/ /*input[type='text']{background-color: green;}*/ /*input[type='password'],input[type='text']{background-color: green;}*/ #pwd,#txt{background-color: green;} </style> </head> <body> <!--id 是元素的唯一编码 可以根据id查找出当前文档的html元素 一般是js里面使用的属性 根据class进行元素查找--> <input id="input1" value="id选择器"/><br /> <input class="inp" value="input选择器"/><br /> <input class="inp" value="input选择器"/><br /> <input class="inp" value="input选择器"/><br /> <input class="inp" value="input选择器"/><br /> <input class="inp" value="input选择器"/><br /> <div>我是div</div> <div>我是div</div> <div>我是div</div> <div>我是div</div> <div>我是div</div> <div>我是div</div> <input id="pwd" type="password" /><br /> <input id="txt" type="text" /><br /> <div> <span>我是div内部的span</span> </div> <span>我是div外部的span</span> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*对每一个div进行操作*/ div { /*设置字体颜色*/ color: red; /*设置字体大小*/ font-size: 20px; /*设置粗细*/ font-weight: 700; /*设置对齐*/ text-align: center; } a { /*设置删除 下划线 上划线*/ text-decoration: none; } </style> </head> <body> <!--<i><font color="red" size="6" face="黑体">我是王宝强</font></i> <i><font color="red" size="6" face="黑体">我是马蓉</font></i>--> <div>我是王宝强</div> <div>我是马蓉</div> <a href="#">我是宋jj</a> <a href="#">我是宋kk</a> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ background-color: gray; } #div1{ background-image: url(img/015.jpg); /*设置宽高*/ height: 400px; width: 400px; } </style> </head> <body> <div>我是div</div> <div>我是div</div> <div id="div1">我是div</div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; /*border:宽度 形状 颜色; solid实线 dotted虚线*/ /*border: 2px solid red;*/ border-top: 2px solid red; border-right: 2px dotted red; border-bottom: 5px dotted red; border-left: 5px dotted green; } </style> </head> <body> <div>我是div</div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span { border: 1px solid red; background-color: green; /*缩进(内边距):内容与边界的距离*/ /*padding: 10px;*/ /*上,右,下,左*/ /*使用空格隔开*/ padding: 10px 20px 30px 40px; /*外边距：边界与边界的距离*/ /*上,右,下,左*/ margin: 20px; } </style> </head> <body> <br /> <span>我是span</span> <span id="second">我是span</span> <span id="third">我是span</span> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*设置元素在界面的中的位置 摆放元素就是布局 标准流/普通流：默认的显示顺序,先上后下 先左后右 碰到div换行 float:浮动 不显示在标准上面,而有自己的一层，该层在标准流上面 left:向左浮动 right:向右浮动 clear:清除浮动:不让左边,右边，同时左右出现浮动 display*/ #div1 { width: 150px; height: 150px; background-color: red; float: right; } #div2 { width: 50px; height: 50px; background-color: green; float: right; } #div3 { width: 100px; height: 100px; background-color: blue; float: right; } #clear { width: 0px; height: 0px; background-color: orange; /*项目中使用both最多 当我们给clear为both设置宽高为0,0 当它与div一块使用可以替代table*/ clear: both; } </style> </head> <body> <div id="div1"></div> <div id="clear"></div> <div id="div2"></div> <div id="div3"></div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .grid{ width: 60px; height: 60px; border: 1px solid gray; float: left; } /*换行*/ #clear{ clear: both; width: 0px; height: 0px; } </style> </head> <body> <div class="grid">1</div> <div class="grid">2</div> <div class="grid">3</div> <div id="clear"></div> <div class="grid">4</div> <div class="grid">5</div> <div class="grid">6</div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; border: 1px solid red; /*将元素设置成内联元素/行内元素 此时宽高失效*/ display: inline; } span{ border: 1px solid red; /*将元素设置成块级元素*/ display: block; width: 100px; height: 100px; /*将元素隐藏*/ /*display: none;*/ /*应用场景:菜单*/ } </style> </head> <body> <div id="div1">我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .grid{ width: 60px; height: 60px; border: 1px solid gray; float: left; } /*换行*/ #clear{ clear: both; width: 0px; height: 0px; } </style> </head> <body> <div class="grid">1</div> <div class="grid">2</div> <div class="grid">3</div> <div id="clear"></div> <div class="grid">4</div> <div class="grid">5</div> <div class="grid">6</div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; border: 1px solid red; /*将元素设置成内联元素/行内元素 此时宽高失效*/ display: inline; } span{ border: 1px solid red; /*将元素设置成块级元素*/ display: block; width: 100px; height: 100px; /*将元素隐藏*/ /*display: none;*/ /*应用场景:菜单*/ } </style> </head> <body> <div id="div1">我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #outer{ border: 1px solid red; width: 100px; height: 100px; } #inner{ border: 1px solid grey; width: 50px; height: 50px; /*0设置上下 auto由外部计算居中的外边距*/ margin: 0 auto; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*每一个div设置宽 边框*/ div{ width: 100%; /*border: 1px solid gray;*/ float: left; } /*清除+宽高为00等于br*/ #clear{ height: 0px; width: 0px; clear: both; } /*第一行内的三个div,是包含关系*/ #head div{ width: 33%; text-align: center; height: 60px; } #head div a{ margin: 10px; text-decoration: none; } #head #head_div{ /*设置内边距*/ padding-top: 20px; } /*第二行开始*/ #menu{ height: 40px; background-color: black; padding-top: 10px; } #menu a{ color: white; text-decoration: none; font-size: 20px; margin-left: 10px; /*如果margin元效可以使用padding*/ } /*第三行开始*/ #register{ width: 100%; background-image: url(img/015.jpg); height: 700px; } #register #form_div{ background-color: white; border: 2px solid gray; width: 60%; height: 70%; /*上 右 下 左*/ margin: 5% 20% 0% 20%; } #register #form_div table{ margin: 0 auto; padding-top: 20px; } /*第四行*/ #footer { } #footer img{ width: 100%; } /*第五行*/ p { text-align: center; } </style> </head> <body> <!--联想 列点 *创建表格(div+float+clear) *css 操作元素外观 * 第一行 * 第二行 * 。。。。 实现--> <div id="head"> <!--1/3宽度的div--> <div > <img src="img/logo2.png" /> </div> <div > <img src="img/header.jpg" /> </div> <div id="head_div"> <a href="#">注册</a><a href="#">登录</a><a href="#">关于</a> </div> </div> <div id="clear"></div> <!--第二行 菜单--> <div id="menu"> <a href="#">首页</a> <a href="#">笔记</a> <a href="#">手机</a> </div> <div id="clear"></div> <!--第三行 注册部分--> <div id="register"> <div id="form_div"> <!--用户注册-start--> <!-- *表单:集合--> <form action="#" method="post"> <!--*表单元素--> <!--*使用table标签--> <table width="70%" border="0px"> <tr> <td align="right" > <font color="blue">会员注册</font> </td> <td align="left" colspan="2">USER REGISTER</td> </tr> <!--*text--> <tr> <td align="right"><b>用户名</b></font> </td> <td align="left" colspan="2"><input type="text" name="username" size="50" placeholder="用户名"/></td> </tr> <!--*password--> <tr> <td align="right"><b>密码</b></font> </td> <td align="left" colspan="2"><input type="password" name="password" size="50" /></td> </tr> <tr> <td align="right"><b>确认密码</b></font> </td> <td align="left" colspan="2"><input type="password" name="password2" size="50" /></td> </tr> <tr> <td align="right"><b>Email</b></font> </td> <td align="left" colspan="2"><input type="text" name="email" size="50" /></td> </tr> <tr> <td align="right"><b>姓名</b></font> </td> <td align="left" colspan="2"><input type="text" name="uname" size="50" /></td> </tr> <!--*radio--> <tr> <td align="right"><b>性别</b></font> </td> <td align="left" colspan="2"><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td> </tr> <!--*date--> <tr> <td align="right"><b>出生日期</b></font> </td> <td align="left" colspan="2"><input type="date" name="birthday" /></td> </tr> <!--*image--> <tr> <td align="right"><b>验证码</b></font> </td> <td align="left" width="33%"><input type="text" name="code" width="100" /></td> <td align="left" width="33%"><input type="image" src="img/015.jpg" width="60" height="40" /></td> </tr> <!--*submit--> <tr> <td colspan="3" align="center"> <input type="submit" value="注册" width="200px" /> </td> </tr> </table> </form> <!--用户注册-end--> </div> </div> <div id="clear"></div> <div id="footer" > <img src="img/footer.jpg" /> </div> <div id="clear"></div> <div> <p>联系我们 联系我们 联系我们 联系我们 联系我们 联系我们 </p> <p> Copyright © 2005-2016 传智商城 版权所有 </p> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--方式1:内联式 通过script标签--> <script> /*直接在标签体中编写js代码即可*/ // alert("hello js!"); </script> <!--方式2:外联式 a.首先编写外部的js代码 b.引入该js文件--> <script type="text/javascript" src="js/first.js" > alert("情绪是智慧不够的产物!"); </script> <!-- 注意事项: 加载顺序: 从上到下 从左到右 一个页面中可以出现多个script标签,可以放在任何位置(一般放在head标签中,注意正确嵌套) 外联式的script一旦是src属性,那么标签体失效. --> </head> <body> <script> /*直接在标签体中编写js代码即可*/ // alert("hello js11111!"); </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //变量声明 var age = 18; var name1 = "tom"; // alert(age); alert(name1); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var age = 18; //number age = "tom"; //string age = true; //boolean // alert(typeof age); var age1 = null; //object // alert(typeof age1); 弹出一个窗口(会停止程序的运行) var age2; //undefined alert(typeof age2); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //等性运算符 // == != 判断数值 // alert(18==18); //true // alert(18=="18"); //true //一个number类型的数值和一个非数值形式的字符串不能比较 // alert(66=="B"); //false // alert("B"=="B"); //true 比较ASCII // alert("A"=="B"); //false // === !== 判断数值和类型 // alert(18==="18"); //false // alert(18!=="18"); //true // alert("B"==="B"); //true //关系运算符 // > < >= <= // alert(18>19); //fasle // alert(18>"17"); //true //一个number类型的数值和一个非数值形式的字符串不能比较 // alert(67>"B"); //false // alert("B">"A"); //true 比较ASCII //逻辑运算符 //&& || ! //&& // alert(true&&false); //false // alert(false&&true); //fasle // alert(true&&true); //true //在&&运算中,如果两边都为true(对象转为的Boolean),那么运算结果为右边的值 // alert("abc"&&true); //true // alert(true&&"abc"); //abc //|| // alert(true||false); //true // alert(false||true); //true // alert(false||false); //false //在||运算中,如果两边都为true(对象转为的Boolean),那么运算结果为左边的值 // alert("abc"||false); //abc // alert(false||"abc"); //abc alert("abc"||true); //abc </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> // if(18>17){ // alert("18大于17"); // } for(var i=0;i<3;i++){ alert(i); } </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //编写普通函数 function add(){ alert(1+1); } //调用函数 // add(); //匿名函数(先编写后使用) var add1 = function(i,j){ alert(i+j); } // add1(4,4); //带有参数的函数 function add2(i,j){ alert(i+j); } // add2(3,3); //返回值 function add3(i,j){ return i+j; } var sum = add3(5,5); alert(sum); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn(){ alert("44944"); } </script> </head> <body> <!--方式1:绑定事件 通过标签的事件属性--> <input type="button" value="点我44" onclick="btn("111")" /> <!--方式2:派发事件 --> <input type="button" value="再点我44" id="btnId" /> </body> <script> //1.获取事件源(标签对象) var inpObj = document.getElementById("btnId"); //2.给事件源派发事件 inpObj.onclick = function(data){ alert(449444444); } </script> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //页面加载成功事件 等页面加载完毕后再来加载页面加载成功事件中的代码片段 onload = function(){ // alert("123"); //1.获取事件源(标签对象) var inpObj = document.getElementById("btnId"); //2.给事件源派发事件 inpObj.onclick = function(){ alert(449444444); } } </script> </head> <body> <!--方式2:派发事件 --> <input type="button" value="再点我44" id="btnId" /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> /* 步骤分析: 1.确定事件(表单提交事件) //checkForm函数必须要有返回值(Boolean) <form onsubmit="return checkForm()"></form> 2.编写函数(校验用户名和密码) a.获取用户名和密码的标签对象 var obj = document.getElementById("id"); b.获取用户名和密码的值(value属性) var userVal = obj.value; c.校验是否为空 if(userVal==""){ alert("用户名不可为空"); return false; } d.返回值 return true;*/ //必须要有返回值 function checkForm(){ //a.获取用户名和密码的标签对象 var userObj = document.getElementById("username"); var pwdObj = document.getElementById("password"); //b.获取用户名和密码的值(value属性) var userVal = userObj.value; var pwdVal = pwdObj.value; // alert(userVal+" "+pwdVal); //c.校验是否为空 if(userVal==""){ alert("用户名不可为空"); return false; } if(pwdVal==""){ alert("密码不可为空"); return false; } return true; } </script> <body> <form action="#" method="get" onsubmit="return checkForm()"> <table width="60%" height="60%" align="center" bgcolor="#ffffff"> <tr> <td colspan="3">会员注册USER REGISTER</td> </tr> <tr> <td width="20%">用户名:</td> <td width="40%"><input type="text" name="username" id="username"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" id="password"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" id="repassword"></td> <td><span id="repassword_msg"></span></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" id="email"></td> <td><span id="email_msg"></span></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday"> </td> </tr> <tr> <td>验证码</td> <td> <input type="text" name="checkcode"> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/lunbo.css" /> <script type="text/javascript"> /* 步骤分析: 1.确定事件(页面加载成功事件) onload = function(){ //设置周期执行的定时 setInterval(changeImg,2000); } 2.编写changeImg函数(改变图片) function changeImg(){ a.获取图片的标签对象 var imgObj = document.getElementById("id"); b.改变src属性的值 imgObj.src = "url"; }*/ onload = function(){ //设置周期执行的定时 setInterval(changeImg,2000); } var i = 1; function changeImg(){ i++; //a.获取图片的标签对象 var imgObj = document.getElementById("imgId"); //b.改变src属性的值 // alert(imgObj.src); imgObj.src = "../img/"+i+".jpg"; //判断是否是最后一张 if(i==3){ i=0; } } </script> </head> <body> <!-- 一个大div中放置8个div --> <div> <!--logo 嵌套三个div --> <div class="header"> <div> <img src="../img/logo2.png" height="40px" /> </div> <div> <img src="../img/header.jpg" /> </div> <div> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <div class="cle"></div> <!--菜单--> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </div> <!--轮播图--> <div class="lunbo"> <img id="imgId" src="../img/1.jpg"/> </div> <!--热门 将起划分成两个div 左边放图片 右边的放商品 --> <div class="hot"> <!--存放热门商品和一张图片--> <div> <h2 style="display: inline;">热门商品</h2> <img src="../img/title2.jpg" /> </div> <div> <!--存放左边的图片--> <div class="left"> <img src="../img/big01.jpg" /> </div> <!--存放商品图片--> <div class="right"> <div class="middle"> <img src="../img/middle01.jpg" /> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> </div> </div> </div> <div class="cle"></div> <!--广告--> <div class="ad1"> <img src="../img/ad.jpg"/> </div> <!--最新--> <div></div> <!--广告--> <div class="ad1"> <img src="../img/footer.jpg"/> </div> <!--版权foot--> <div class="foot"> <p> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> </p> <p> Copyright © 2005-2016 传智商城 版权所有 </p> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //周期执行定时器 // var interId = setInterval(fun,1000); // var interId = setInterval("fun()",1000); var i = 0; function fun(){ i++; alert(i); if(i==3){ //清除周期执行定时器 clearInterval(interId); } } //单次执行定时器 // var timeId = setTimeout(fun1,1000); var timeId = setTimeout("fun1()",1000); function fun1(){ i++; alert(i); } //清除单次执行定时器 //clearTimeout(timeId); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a{ text-decoration: none; } .cle{ clear: both; } /*logo 部分的div*/ .header{ width: 100%; } .header div{ float:left; width:33.33%; height: 60px; line-height: 50px; } .header a{ padding: 15px; } /*菜单部分*/ .menu{ width: 100%; background-color: #000; height: 50px; padding-top:1px } .menu ul li{ list-style-type: none; display: inline; } .menu a{ font-size: 25px; color: #fff; } /*轮播图*/ .lunbo{ width:100%; margin-top:10px; margin-bottom: 10px; } .lunbo img{ width:100%; } /*热门商品*/ /*.left,.right{ float:left; }*/ .left{ float:left; width: 16%; height: 500px; } .right{ float: left; width:84%; text-align: center; height: 500px; } .middle{ float:left; width: 50%; height: 250px; } .item{ float:left; width:16.66%; height: 250px; } /*给广告*/ .ad1{ width: 100%; } .ad1 img{ width: 100%; } /*版权*/ .foot{ width:100%; } .foot p{ text-align: center; } </style> <script> /* 步骤分析: 1.确定事件(页面加载成功事件) 0.设置周期执行定时器的id var interId; 0.设置计数器 var count = 0; onload = function(){ //设置周期执行的定时器 interId = setInterval(showAd,4000); } 2.编写showAd函数(展示广告) 0.计数 count++; a.获取div标签对象 var divObj = document.getElementById("divId"); b.展示广告(显示div) divObj.style.css属性 = "block"; c.设置单次执行定时器(用来计时) setTimeout(hideAd,2000); d.判断是否已经执行三次了 if(count==3){ clearInterval(interId); } 3.编写hideAd函数(隐藏div) a.获取div标签对象 var divObj = document.getElementById("divId"); b.展示广告(显示div) divObj.style.css属性 = "none";*/ var interId; var count = 0; onload = function(){ //设置周期执行的定时器 interId = setInterval(showAd,4000); } //2.编写showAd函数(展示广告) function showAd(){ //0.计数 count++; //a.获取div标签对象 var divObj = document.getElementById("ad"); //b.展示广告(显示div) divObj.style.display = "block"; //c.设置单次执行定时器(用来计时) setTimeout("hideAd()",2000); //d.判断是否已经执行三次了 if(count==3){ clearInterval(interId); } } function hideAd(){ //a.获取div标签对象 var divObj = document.getElementById("ad"); //b.展示广告(显示div) divObj.style.display = "none"; } </script> </head> <body> <div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div> <!-- 一个大div中放置8个div --> <div> <!--logo 嵌套三个div --> <div class="header"> <div> <img src="../img/logo2.png" height="40px" /> </div> <div> <img src="../img/header.jpg" /> </div> <div> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <div class="cle"></div> <!--菜单--> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </div> <!--轮播图--> <div class="lunbo"> <img src="../img/1.jpg"/> </div> <!--热门 将起划分成两个div 左边放图片 右边的放商品 --> <div class="hot"> <!--存放热门商品和一张图片--> <div> <h2 style="display: inline;">热门商品</h2> <img src="../img/title2.jpg" /> </div> <div> <!--存放左边的图片--> <div class="left"> <img src="../img/big01.jpg" /> </div> <!--存放商品图片--> <div class="right"> <div class="middle"> <img src="../img/middle01.jpg" /> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> <div class="item"> <img src="../img/small08.jpg" /> <p align="center"><a href="#">电饭煲</a></p> <p align="center">200</p> </div> </div> </div> </div> <div class="cle"></div> <!--广告--> <div class="ad1"> <img src="../img/ad.jpg"/> </div> <!--最新--> <div></div> <!--广告--> <div class="ad1"> <img src="../img/footer.jpg"/> </div> <!--版权foot--> <div class="foot"> <p> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> </p> <p> Copyright © 2005-2016 传智商城 版权所有 </p> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn1(){ // history.forward(); history.go(1); } </script> </head> <body> 我是a页面<br /> <a href="b.html">b.html</a><br> <input type="button" value="前进" onclick="btn1()"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn2(){ // history.back(); history.go(-1); } </script> </head> <body> 我是b页面<br /> <input type="button" value="后退" onclick="btn2()"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn3(){ alert(location.href); } function btn(){ location.href = "../案例3-弹出广告.html"; } </script> </head> <body> <input type="button" value="获取url" onclick="btn3()"> <input type="button" value="设置url" onclick="btn()"> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> onload = function(){ document.getElementById("inp").onclick = function(){ window.close(); } } </script> </head> <body> 我是a页面 <input type="button" value="close" id="inp"/> </body> <script> </script> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //打开a页面 function btn(){ window.open("a.html"); } </script> </head> <body> <input type="button" value="openA" onclick="btn()"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //对话框 // var mes = window.prompt("请输入你的姓名","tom"); // alert(mes); //确认框 var message = confirm("你确定付款吗"); alert(message); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //获取文本框的值 function getVal(){ //1.获取要操作的标签对象 var inpObj = document.getElementById("inp"); //2.获取value属性的值 alert(inpObj.value); } //设置value属性的值 function setVal(){ //1.获取要操作的标签对象 var inpObj = document.getElementById("inp"); //2.设置value的值 inpObj.value = "jerry"; } </script> </head> <body> <input type="text" name="username" value="tom" id="inp"/><br /> <input type="button" value="获取value的值" onclick="getVal()"/> <input type="button" value="设置value的值" onclick="setVal()"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //获取标签体的内容 function getVal(){ //1.获取要操作的标签对象 var spObj = document.getElementById("sp"); //2.获取标签体的内容 alert(spObj.innerHTML); } //设置标签体的内容 function setVal(){ //1.获取要操作的标签对象 var spObj = document.getElementById("sp"); //2.设置标签体的内容 spObj.innerHTML += "<font color='red'>如今的现在早已不是曾经说好的以后</font>"; } </script> </head> <body> <span id="sp">佑我中华</span><br /> <input type="button" value="获取标签体的内容" onclick="getVal()"/> <input type="button" value="设置标签体的内容" onclick="setVal()"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //校验 function checkInp(){ //0.获取要校验的值 var val = document.getElementById("inp").value; //校验 //1.编写正则表达式 var zz = /^[a-z0-9_-]{3,16}$/; //object var kzz = /^\s*$/; // alert(typeof zz); //2.校验值 // var flag = zz.test(val); // alert(flag); // alert(kzz.test(val)); if(kzz.test(val)){ alert("用户名不可为空"); }else if(!zz.test(val)){ alert("用户名不符合格式"); }else{ alert("满足格式...."); } } </script> </head> <body> <input type="text" id="inp" /><br /> <input type="button" value="校验输入的值" onclick="checkInp()"/> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //获得焦点的时候要触发的函数 function focusFun(){ document.getElementById("sp").innerHTML = "输入框获得焦点"; } //失去焦点的时候要触发的函数 function blurFun(){ document.getElementById("sp").innerHTML = "输入失去焦点了啊...."; } //内容改变的时候要触发的函数 function changeFun(){ alert("输入框的内容改变了..."); } </script> </head> <body> <input type="text" onfocus="focusFun()" onblur="blurFun()" onchange="changeFun()"/><br /> <span id="sp"></span><br /> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #e02, #e022 { border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript"> // 页面加载事件：当整个html页面加载成功调用 window.onload = function(){ // 文本框事件 var e01 = document.getElementById("e01"); e01.onfocus = function(){ html("textMsg","文本框获得焦点：focus"); } e01.onblur = function(){ html("textMsg","文本框失去焦点：blur"); } e01.onkeydown = function(){ html("textMsg","键盘按下：keydown；"); } e01.onkeypress = function(event){ var event = event || window.event; append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；"); } e01.onkeyup = function(){ append("textMsg","键盘弹起：keyup；"); } // 鼠标事件 var e02 = document.getElementById("e02"); e02.onmouseover = function(){ html("divMsg","鼠标移上：mouseover"); } e02.onmouseout = function(){ html("divMsg","鼠标移出：mouseout"); } var e022 = document.getElementById("e022"); e022.onmousedown = function(){ html("divMsg2","鼠标按下：mousedown"); } e022.onmouseup = function(){ html("divMsg2","鼠标弹起：mouseup"); } // 按钮事件 var e03 = document.getElementById("e03"); e03.onclick = function () { html("buttonMsg","单击：click"); }; e03.ondblclick= function () { html("buttonMsg","双击：dblclick"); }; }; /** * 指定位置显示指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function html(objId,text){ document.getElementById(objId).innerHTML = text; } /** * 指定位置追加指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function append(objId,text){ document.getElementById(objId).innerHTML += text; } </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <hr/> <div id="e02" >鼠标移上来试试</div><span id="divMsg"></span> <hr/> <div id="e022" >鼠标移上来点击试试</div><span id="divMsg2"></span> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn(){ /*通过id选择器获取文本框的值*/ var userObj = document.getElementById("usernameId"); // alert(userObj.value); /*获取所有span标签中的值*/ // var spanObjArr = document.getElementsByTagName("span"); // for(var i=0;i<spanObjArr.length;i++){ // alert(spanObjArr[i].innerHTML); // } /*获取所有class为spanClass的元素对象*/ // var spanObjArr1 = document.getElementsByClassName("spanClass"); // for(var i=0;i<spanObjArr1.length;i++){ // alert(spanObjArr1[i].innerHTML); // } /*获取name为hobby的元素对象*/ var hobbyObjArr = document.getElementsByName("hobby"); alert(hobbyObjArr.length); } </script> </head> <body> <input type="text" value="tom" id="usernameId" name="username"/><br /> <input type="checkbox" name="hobby" value="抽烟" />抽烟<br /> <input type="checkbox" name="hobby" value="喝酒" />喝酒<br /> <input type="checkbox" name="hobby" value="烫头" />烫头<br /> <span class="spanClass">佑我中华</span> <span class="spanClass">佑我中华1</span> <span>佑我中华2</span><br /> <input type="button" value="获取对象" onclick="btn()" /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn(){ // //创建一个标题元素节点,标题名称客,并将它加到div内部 <h1>客</h1> // //创建元素节点 // var ele = document.createElement("h1");//<h1></h1> // //创建文本节点 // var eleText = document.createTextNode("客");//客 // //将文本节点添加到指定的节点中 // ele.appendChild(eleText);//<h1>客</h1> // //获取div元素对象 // var divObj = document.getElementById("di"); // divObj.appendChild(ele); var divObj = document.getElementById("di"); divObj.innerHTML+="<h1>客</h1>"; } function btn1(){ //删除div元素中的子节点 var divObj = document.getElementById("di"); // divObj.removeChild(divObj.childNodes[0]); // divObj.innerHTML = ""; divObj.remove(); } </script> </head> <body> <div id="di"> </div> <input type="button" value="设置" onclick="btn()" /> <input type="button" value="删除" onclick="btn1()" /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btn(){ var inpObj = document.getElementById("inp"); /*给标签对象设置属性和值*/ // inpObj.setAttribute("value","jerry"); inpObj.value = "jerry"; } function btn1(){ var inpObj = document.getElementById("inp"); // var Val = inpObj.getAttribute("value"); // alert(Val); alert(inpObj.value); } function btn2(){ var inpObj = document.getElementById("inp"); inpObj.removeAttribute("value"); // inpObj.value = ""; } </script> </head> <body> <input id="inp" name="asd" value="tom"/><br /> <input type="button" value="给输入框设置默认值" onclick="btn()" /><br /> <input type="button" value="获取输入框的值" onclick="btn1()" /><br /> <input type="button" value="删除输入框的value属性" onclick="btn2()" /><br /> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var arr = new Array(); var arr1 = new Array(3); var arr2 = new Array(1,2,3); arr[0] = 11; arr[1] = "tom"; arr[2] = true; // alert(arr.length); // alert(arr.join("#"));//遍历数组,在数组每个元素之间加入# // alert(arr); // var ele = arr.shift(); // alert(ele); var l = arr.unshift(5,3); alert(arr); // alert(l); // alert(arr); // alert(arr.sort()); // alert(arr.reverse()); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //String var str = "[www.baidu.com]"; // alert(str.length); // alert(str.substring(1,str.length-1)); // alert(str.slice(1,-1)); //Boolean // alert(Boolean("abc")); //Math // alert(Math.PI); //Date // alert(new Date().toLocaleString()); var str = "188.8元"; // alert(parseInt(str)); // alert(parseFloat(str)); // alert(Number(str)); //NaN var str1 = "www.baidu.com/引用数据类型 .html"; var str2 = encodeURI(str1); document.write(str2+"<br/>"); var str3 = decodeURI(str2); document.write(str3); var str4 = "alert('hello js')"; eval(str4); </script> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> /* 步骤分析: 1.确定事件(表单提交事件) <form onsubmit="retrun checkForm()"></form> <form id="formId"></form> 2.编写checkForm函数 function checkForm(){ //0/设置全局开关 var flag = true; //a.获取用户名和密码输入框对象 var 对象 = document.getElementById("id"); //b.获取用户名和密码的值 var val = 对象.value; //c.编写正则表达式 //d.校验 if(zz.test(val)){ //校验不通过 给对应的span标签中填写提示信息 flag = false; }else{ //校验通过 给对应的span标签中填写提示信息 } //e.返回值 return flag; }*/ onload = function(){ document.getElementById("formId").onsubmit=function(){ //设置全局开关 var flag = true; //a.获取用户名和密码输入框对象 var userObj = document.getElementById("username"); var pwdObj = document.getElementById("password"); //b.获取用户名和密码的值 var userVal = userObj.value; var pwdVal = pwdObj.value; // alert(userVal+" "+pwdVal); //c.编写正则表达式 var zz = /^[a-z0-9_-]{3,16}$/; //object var kzz = /^\s*$/; //d.校验 //用户名 if(kzz.test(userVal)){ //校验不通过 //给对应的span标签中填写提示信息 //获取span标签对象 document.getElementById("username_msg").innerHTML = "用户名不可为空"; flag = false; }else if(!zz.test(userVal)){ //获取span标签对象 document.getElementById("username_msg").innerHTML = "用户名的格式不合法"; flag = false; }else{ //获取span标签对象 document.getElementById("username_msg").innerHTML = "✔"; } //密码 if(kzz.test(pwdVal)){ //校验不通过 //给对应的span标签中填写提示信息 //获取span标签对象 document.getElementById("password_msg").innerHTML = "<font color='#f00'>密码不可为空</font>"; flag = false; }else if(!zz.test(pwdVal)){ //获取span标签对象 document.getElementById("password_msg").innerHTML = "密码的格式不合法"; flag = false; }else{ document.getElementById("password_msg").innerHTML = "✔"; } return flag; } } </script> <body> <form action="#" method="get" id="formId"> <table width="60%" height="60%" align="center" bgcolor="#ffffff"> <tr> <td colspan="3">会员注册USER REGISTER</td> </tr> <tr> <td width="20%">用户名:</td> <td width="40%"><input type="text" name="username" id="username"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" id="password"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" id="repassword"></td> <td><span id="repassword_msg"></span></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" id="email"></td> <td><span id="email_msg"></span></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday"> </td> </tr> <tr> <td>验证码</td> <td> <input type="text" name="checkcode"> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* 步骤分析: 1.确定事件(页面加载成功事件) onload = function(){ } 2.编写匿名函数 a.获取当前页面所有行对象 var trObjArr = document.getElementsByTagName("tr"); b.遍历数组对象,给计数行和偶数行添加不同的背景颜色 for(var i=0;i<trObjArr.length;i++){ if(i%2==0){ trObjArr[i].style.backgroundColor = "颜色"; }else{ trObjArr[i].style.backgroundColor = "颜色"; } }*/ onload = function (){ //a.获取当前页面所有行对象 var trObjArr = document.getElementsByTagName("tr"); //b.遍历数组对象,给计数行和偶数行添加不同的背景颜色 for(var i=1;i<trObjArr.length;i++){ if(i%2==0){ trObjArr[i].style.backgroundColor = "#ff0"; }else{ trObjArr[i].style.backgroundColor = "#f0f"; } } } </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr style="background-color: #999999;"> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </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> </table> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* 步骤分析: 1.确定事件(单击事件) 给头部的复选框添加单击事件 2.编写函数 a.获取头部复选框状态 对象.checked; b.获取其他的复选框对象 c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性*/ function checkAll(flag){ // alert(flag); //a.获取头部复选框状态 // alert(obj.checked); //b.获取其他的复选框对象 var elseTrObjArr = document.getElementsByClassName("itemSelect"); //c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性 for(var i=0;i<elseTrObjArr.length;i++){ elseTrObjArr[i].checked = flag; } } </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr> <td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td> </tr> <tr> <!--this表示当前元素对象--> <th><input type="checkbox" onclick="checkAll(this.checked)"></th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> // 定义二维数组: var arr = new Array(4); arr[0] = new Array("石家庄","邯郸","保定","秦皇岛"); arr[1] = new Array("郑州市","洛阳市","安阳市","南阳市"); arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市"); arr[3] = new Array("长春市","吉林市","四平市","通化市"); </script> <script> /*步骤分析: 1.确定事件(改变事件) 给省份的下拉选添加改变事件 2.编写changePro函数 function changePro(){ a.获取选中省份所对应的市数组(value) var cityArr = arr[value]; b.获取市的下拉选对象 var cityObj = document.getElementById("cityId"); c.遍历市数组,将每一个市拼成option追加到市的下拉选中 cityObj.innerHTML += ""; }*/ function changePro(index){ // alert(index); // a.获取选中省份所对应的市数组(value) var cityArr = arr[index]; //b.获取市的下拉选对象 var cityObj = document.getElementById("city"); //初始化 cityObj.innerHTML = "<option>=请选择=</option>"; //c.遍历市数组,将每一个市拼成option追加到市的下拉选中 for(var i=0;i<cityArr.length;i++){ cityObj.innerHTML += "<option>"+cityArr[i]+"</option>"; } } </script> </head> <body> <form action="#" method="get"> <input type="hidden" name="id" value="007"/> 姓名:<input name="username" value="xuduoduo"/><br> 密码:<input type="password" name="password" value="123"><br> 性别:<input type="radio" name="sex" value="1" checked="checked">男 <input type="radio" name="sex" value="0">女 <br> 爱好:<input type="checkbox" name="hobby" value="eat">吃 <input type="checkbox" name="hobby" value="drink" checked="checked">喝 <input type="checkbox" name="hobby" value="sleep" checked="checked">睡 <br> 头像:<input type="file" name="photo"><br> 籍贯: <select name="pro" onchange="changePro(this.value)"> <option >--请选择--</option> <option value="0">河北</option> <option value="1">河南</option> <option value="2">辽宁</option> <option value="3">吉林</option> </select> <select id="city"> <option >-请选择-</option> </select> <br> 自我介绍: <textarea name="intr" cols="40" rows="4">good!</textarea> <br> <input type="submit" value="保存"/> <input type="reset" /> <input type="button" value="普通按钮"/> </form> </body> </html> <!-- --> 案例1-注册页面的简单校验 需求分析: 当表单提交的时候,对用户名和密码进行校验,校验是否为空,如果用户名和密码为空,则弹框提示并不允许表单提交.反之允许 技术分析: javaScript: ////////////// 步骤分析: 1.确定事件(表单提交事件) //checkForm函数必须要有返回值(Boolean) <form onsubmit="return checkForm()"></form> 2.编写函数(校验用户名和密码) a.获取用户名和密码的标签对象 var obj = document.getElementById("id"); b.获取用户名和密码的值(value属性) var userVal = obj.value; c.校验是否为空 if(userVal==""){ alert("用户名不可为空"); return false; } d.返回值 return true; 案例2-轮播图 需求分析: 页面加载成功后,每隔2秒切换一张图片 技术分析: javaScript: 定时器 /////////// 步骤分析: 1.确定事件(页面加载成功事件) onload = function(){ //设置周期执行的定时 setInterval(changeImg,2000); } 2.编写changeImg函数(改变图片) function changeImg(){ a.获取图片的标签对象 var imgObj = document.getElementById("id"); b.改变src属性的值 imgObj.src = "url"; } 案例3-弹出广告 需求分析: 页面加载成功后,每隔4秒展示一次广告,广告时间2秒钟,以此轮询3次 技术分析: 定时器 ///////////////////// 步骤分析: 1.确定事件(页面加载成功事件) 0.设置周期执行定时器的id var interId; 0.设置计数器 var count = 0; onload = function(){ //设置周期执行的定时器 interId = setInterval(showAd,4000); } 2.编写showAd函数(展示广告) 0.计数 count++; a.获取div标签对象 var divObj = document.getElementById("divId"); b.展示广告(显示div) divObj.style.css属性 = "block"; c.设置单次执行定时器(用来计时) setTimeout(hideAd,2000); d.判断是否已经执行三次了 if(count==3){ clearInterval(interId); } 3.编写hideAd函数(隐藏div) a.获取div标签对象 var divObj = document.getElementById("divId"); b.展示广告(显示div) divObj.style.css属性 = "none";
