1、事件

某些组件被执行了某些操作后，触发某些代码的执行
组件：html中的元素：Web_JS基础！ - 图1，

，
等
某些操作：对组件的动作：鼠标单击，鼠标双击等
某些代码：具有的功能代码：比如单击图片更换为另一张图片的功能代码
事件的绑定：
时间的绑定就是将html中的元素如何进行跟某一些操作（事件）进行连接起来
鼠标单击事件：onclick事件
元素的获取：
let 变量名 = document.getElementById(“id值”);
绑定事件：

  1. 直接绑定在html标签上：
  2.     <body>
  3.     <button id="btn" onclick="btn()">按钮</button>
  4.     <script type="text/javascript">
  5.         function btn() {
  6.             alert("按钮被点击！");
  7.         }
  8.     </script>
  9. </body>
  10. 获取元素对象，使用匿名函数进行绑定：
  11. <body>
  12.     <button id="btn">按钮</button>
  13.     <script type="text/javascript">
  14.         document.getElementById("btn").onclick = function () {
  15.             alert("按钮被点击！");
  16.         }
  17.     </script>
  18. </body>

2、BOM

Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装起来组成对象
window：窗口对象（也是前端对象的始对象，所以使用Window的方法时可省略）
window.alert(“普通弹框，带确定按钮”)；
window.confirm(“可确定和取消弹框”)；
window.prompt(“可输入弹框”)；
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
History.go()：跳转到指定顺利的页面
History.back()：返回上一页
History.forword()：进入下一页
Location：地址栏对象
Location.href = “http://www.baidu.com"：进入指定页
定时器：
setTimeout（函数/表达式，毫秒值）：在指定的毫秒数后调用函数或者计算表达式，只执行一次，有返回值，用于取消定时器
clearTimeout（）：取消setTimeout（）方法
setInterval（函数/表达式，毫秒值）：按照指定的周期（毫秒值）来调用函数或这计算表达式
clearInterval（）：取消setInterval（）方法

  1. <body>
  3. <div align="center">
  4.     <div id="time"></div>
  5.     <button>暂停时间更新</button>
  6.     <button>恢复时间更新</button>
  7. </div>
  9. <script type="text/javascript">
  10.     var date = new Date();
  11.     var s = date.toLocaleString();  //2021/6/3上午11:35:34    年月日时分秒
  12.     var s1 = date.toLocaleTimeString(); //上午11:35:34    时分秒
  13.     var s2 = date.toLocaleDateString(); //2021/6/3      年月日
  14.     console.log(s);
  16.     setTimeout(getTime);
  17.     var interval = setInterval(getTime,1000);      //每一秒更新一次时间
  19.     function getTime(){
  20.         var timeText = document.getElementById("time");
  21.         timeText.innerHTML = new Date().toLocaleString() ;
  22.     }
  24.         var btn = document.getElementsByTagName("button")[0];
  25.         btn.onclick= function () {
  26.             clearInterval(interval);
  27.         }
  28.     var btn1 = document.getElementsByTagName("button")[1];
  29.         btn1.onclick = function () {
  30.             interval = setInterval(getTime,1000);
  31.         }
  32. </script>

Location对象：
reload（）：重新加载当前文档，刷新
href：色湖之或者返回完整的URL

  1. <body>
  2.     <button>获取本页的URL</button>
  3.     <button>刷新本页</button>
  4.     <button>跳转至百度</button>
  5.     <script>
  6.         var btns = document.getElementsByTagName("button");
  8.         btns[0].onclick = function () {
  9.             alert(location.href);
  10.         }
  11.         btns[1].onclick = function () {
  12.             location.reload();
  13.         }
  14.         btns[2].onclick = function () {
  15.             location.href = "http://www.baidu.com";
  16.         }
  17.     </script>
  18. </body>

3、DOM

Document Object Model ：文档对象模型
把所有页面标签抽象成为一个Document对象，我们可以使用js动态修改标签及属性内容

  1.  1、获取元素：  
  2.         ==es6之前获取方式==
  3.     document.getElementById()                        根据id属性值获取元素对象。id属性值一般唯一
  4.     document.getElementsByTagName()            根据元素名称获取元素对象们。返回值是一个数组
  5.     document.getElementsByClassName()        根据Class属性值获取元素对象们。返回值是一个数组
  6.     document.getElementsByName()                根据name属性值获取元素对象们。返回值是一个数组
  8.     ==es6获取方式==
  9.     document.querySelector(id选择器)            根据id选择器，获取元素
  10.     document.querySelectorAll(css选择器)    根据css选择器获取元素，返回是一个数组
  12. 2、操作内容：
  13.     element.innerText        获取或者修改元素的纯文本内容
  14.   element.innerHTML        获取或者修改元素的html内容
  15.   element.outerHTML        获取或者修改包含自身的html内容
  16. 总结：
  17.   1. innerText 获取的是纯文本 innerHTML获取的是所有html内容 
  18.   2. innerText 设置到页面中的是纯文本 innerHTML设置到页面中的html会展示出外观效果 
  19.   3. innerHTML不包含自身 outerHTML包含自身的html内容
  20. 3、操作属性：
  21.   setAttribute(属性名,属性值)            给元素设置自定义属性（了解）
  22.   getAttribute(属性名)                        获取元素的自定义属性值（了解）
  23.   removeAttribute(属性名)                移除元素的自定义属性（了解）
  24. 4、操作样式：
  25.     设置一个css样式
  26.           js对象.style.样式名 = '样式值';
  27.     批量设置css样式
  28.           js对象.style.cssText='css样式字符串'
  29.     通过class设置样式【这个灵活性较大】
  30.           js对象.className='class选择器名'
  31. 5、操作元素（标签）
  32.     document.createElement（标签名称）：创建一个标签对象
  33.     父标签对象.appendChild（子标签对象）：给父标签添加一个子标签

4、正则表达式

方式一：let rege = new RegExp（”正则表达式”）；
方式二：let rege = /正则表达式/；
相关方法：
正则对象.test（字符串）：符合正则规则就返回true，否则false
字符串对象.match（正则对象）：返回字符串那种符合正则规则的内容

  1. 单个字符：
  2.         [a](字符a)[ab][a-zA-Z0-9_]
  3. 元字符：
  4.     \d：单个数字字符[0-9]
  5.     \w：单个单词字符[a-zA-Z0-9_]
  6. 量词：
  7.     ？：表示出现0次或多次
  8.   *：表示出现0次或多此
  9.     +：出现一次或多次
  10.     {m,n}：表示最多有n个，最少有m个
  11.               如果m缺省：最多n次
  12.         如果n缺省：最少m次
  13.         {n}：正好n次
  14. 开始符号：^
  15. 结束符号：$
  16. 手机号的正则表达式：
  17.     regePhone = /^1[0-9]{10}$/
  18. 邮箱的正则表达式：
  19.     regeEmail    = /^[a-zA-Z0-9]{6,}@[a-zA-Z0-9]{2,}\.(com|cn|edu)$/
  20. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  21. <body>
  22.     <input type="text" name = "phone">
  23.     <input type="text" name = "email">
  24.     <button id="btn">按钮</button>
  25.     <script type="text/javascript">
  26.         var regePhone = /^1[0-9]{10}$/;
  27.         var regeEmail    = /^[a-zA-Z0-9]{6,}@[a-zA-Z0-9]{2,}\.(com|cn|edu) $/;
  28.         document.getElementById("btn").onclick = function () {
  29.             var phones = document.getElementsByTagName("input");
  30.             console.log(phones[0].value);
  31.             if (regePhone.test(phones[0].value)){
  32.                 alert("手机号合法！")
  33.             }else{
  34.                 alert("手机号不合法！")
  35.             }
  36.         }
  37.     </script>
  38. </body>
  39. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  40.           <body>
  41.     <input type="text" name = "phone">
  42.     <input type="text" name = "email">
  43.     <button id="btn">按钮</button>
  44.     <script type="text/javascript">
  45.         var regePhone = /^1[0-9]{10}$/;
  46.         var regeEmail    =  /^[0-9a-zA-Z]{6,}@[0-9a-zA-Z]{2,}\.(com|cn|edu)$/;
  47.         document.getElementById("btn").onclick = function () {
  48.             var phones = document.getElementsByTagName("input");
  49.             console.log(phones[1].value);
  50.             if (regeEmail.test(phones[1].value)){
  51.                 alert("邮箱合法！")
  52.             }else{
  53.                 alert("邮箱不合法！")
  54.             }
  55.         }
  56.     </script>
  57. </body>

5、时间监听机制

某些组件被执行了某些操作后，触发某些代码的执行
事件：某些操作，如：单击，双击。键盘按下，鼠标移动
事件源：组件：如按钮，文本输入框
监听器：代码
注册监听：将事件，事件源，监听器结合在一起，当事件源发生了某个事件，则触发执行某个监听器代码

点击事件：

onclick ：单击事件
ondbclick：双击事件

焦点事件：

onblur：失去焦点
onfocus：元素获得焦点

加载事件：

onload：页面加载完成后立即发生

鼠标事件：

onmousedown：鼠标按钮被按下
onmouseup：鼠标按键被松开
onmousemove：鼠标被移动
onmouseover：鼠标移到某个元素之上
onmouseout：鼠标从某个元素移开

键盘事件：

onkeydown：某个键盘按键被按下
onkeyup：某个键盘按键被松开
onokeypress：某个键盘按键被按下并松开

改变事件：

onchange：域的内容被改变

表单事件：

onsubmit：提交按钮被点击

6、一些Demo

隔行换色：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     .ji{
  9.         background-color: #cccccc;
  10.     }
  12.     .ou{
  13.         background-color: aliceblue;
  14.     }
  16.     .over{
  17.         background-color: beige;
  18.     }
  19. </style>
  20. <!--
  21.     隔行变色：
  22.             1. 表格奇偶行颜色不同
  23.             2. 鼠标移入颜色高亮
  24. -->
  25. <body>
  26. <table id="tab1" border="1" width="800" align="center" cellspacing="0" cellpadding="0">
  27.     <tr>
  28.         <th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
  29.         <th>分类ID</th>
  30.         <th>分类名称</th>
  31.         <th>分类描述</th>
  32.         <th>操作</th>
  33.     </tr>
  34.     <tr align="center">
  35.         <td><input type="checkbox" class="checkbox"></td>
  36.         <td>1</td>
  37.         <td>手机数码</td>
  38.         <td>手机数码类商品</td>
  39.         <td><a href="">修改</a>|<a href="">删除</a></td>
  40.     </tr>
  41.     <tr align="center">
  42.         <td><input type="checkbox" class="checkbox"></td>
  43.         <td>2</td>
  44.         <td>电脑办公</td>
  45.         <td>电脑办公类商品</td>
  46.         <td><a href="">修改</a>|<a href="">删除</a></td>
  47.     </tr>
  48.     <tr align="center">
  49.         <td><input type="checkbox" class="checkbox"></td>
  50.         <td>3</td>
  51.         <td>鞋靴箱包</td>
  52.         <td>鞋靴箱包类商品</td>
  53.         <td><a href="">修改</a>|<a href="">删除</a></td>
  54.     </tr>
  55.     <tr align="center">
  56.         <td><input type="checkbox" class="checkbox"></td>
  57.         <td>4</td>
  58.         <td>家居饰品</td>
  59.         <td>家居饰品类商品</td>
  60.         <td><a href="">修改</a>|<a href="">删除</a></td>
  61.     </tr>
  62.     <tr align="center">
  63.         <td><input type="checkbox" class="checkbox"></td>
  64.         <td>5</td>
  65.         <td>牛奶制品</td>
  66.         <td>牛奶制品类商品</td>
  67.         <td><a href="">修改</a>|<a href="">删除</a></td>
  68.     </tr>
  70.     <tr align="center">
  71.         <td><input type="checkbox" class="checkbox"></td>
  72.         <td>6</td>
  73.         <td>大豆制品</td>
  74.         <td>大豆制品类商品</td>
  75.         <td><a href="">修改</a>|<a href="">删除</a></td>
  76.     </tr>
  77.     <tr align="center">
  78.         <td><input type="checkbox" class="checkbox"></td>
  79.         <td>7</td>
  80.         <td>海参制品</td>
  81.         <td>海参制品类商品</td>
  82.         <td><a href="">修改</a>|<a href="">删除</a></td>
  83.     </tr>
  84.     <tr align="center">
  85.         <td><input type="checkbox" class="checkbox"></td>
  86.         <td>8</td>
  87.         <td>羊绒制品</td>
  88.         <td>羊绒制品类商品</td>
  89.         <td><a href="">修改</a>|<a href="">删除</a></td>
  90.     </tr>
  91.     <tr align="center">
  92.         <td><input type="checkbox" class="checkbox"></td>
  93.         <td>9</td>
  94.         <td>海洋产品</td>
  95.         <td>海洋产品类商品</td>
  96.         <td><a href="">修改</a>|<a href="">删除</a></td>
  97.     </tr>
  98.     <tr align="center">
  99.         <td><input type="checkbox" class="checkbox"></td>
  100.         <td>10</td>
  101.         <td>奢侈用品</td>
  102.         <td>奢侈用品类商品</td>
  103.         <td><a href="">修改</a>|<a href="">删除</a></td>
  104.     </tr>
  105.     <tr align="center">
  106.         <td><input type="checkbox" class="checkbox"></td>
  107.         <td>4</td>
  108.         <td>家居饰品</td>
  109.         <td>家居饰品类商品</td>
  110.         <td><a href="">修改</a>|<a href="">删除</a></td>
  111.     </tr>
  112. </table>
  113. <script>
  114.     //获取表格所有的行
  115.     var trs = document.getElementsByTagName("tr");
  116.     console.log(trs.length);
  117.     for (var i= 0;i<trs.length;i++){
  118.         if (i % 2 == 0) {
  119.             trs[i].className = "ji";
  120.         }else{
  121.             trs[i].className = "ou";
  122.         }
  123.     }
  125.     //多选
  126.     var inputs = document.getElementsByTagName("input");
  128.     //console.log(inputs[0].checked);
  129.     inputs[0].onclick = function () {  //绑定全选的点击事件
  130.         if (inputs[0].checked) {     //若全选被点亮
  131.             for (var i = 2 ;i<inputs.length;i++) {
  132.                 inputs[i].checked = "true"; //则所有的都选上
  133.                 trs[i-1].className = "over";
  134.             }
  135.         }
  136.     }
  137.     inputs[1].onclick = function () {  //绑定反选的点击事件
  138.         if (inputs[1].checked) {     //若反选被点亮
  139.             inputs[0].checked = false;
  140.             for (var i = 2 ;i<inputs.length;i++) {
  141.                 if (inputs[i].checked){ //则所有被选的都取消
  142.                     inputs[i].checked = false;
  143.                     if (i % 2 == 0) {
  144.                         trs[i-1].className = "ji";
  145.                     }else{
  146.                         trs[i-1].className = "ou";
  147.                     }
  148.                 }else{
  149.                     inputs[i].checked = true; //所有没被选的都选中
  150.                     trs[i-1].className = "over";
  151.                 }
  152.             }
  153.         }
  154.     }
  155. </script>
  156. </body>
  157. </html>

商品全选全不选：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全选全不选</title>
  6. </head>
  7. <body>
  8. <!--
  9. 商品全选
  10.     1. 全选 点击全选按钮,所有复选框都被选中
  11.     2. 反选 点击反选按钮,所有复选框状态取反
  12. -->
  13. <button id="btn1">1. 全选</button>
  14. <button id="btn2">2. 反选</button>
  15. <br/>
  16. <input type="checkbox">电脑
  17. <input type="checkbox">手机
  18. <input type="checkbox">汽车
  19. <input type="checkbox">别墅
  20. <input type="checkbox" checked="checked">笔记本
  22. <script>
  23.     var btns = document.getElementsByTagName("button");
  24.     var ipts = document.getElementsByTagName("input");
  26.     //全选
  27.     btns[0].onclick = function () {
  28.         console.log(this);
  29.         //遍历获取input
  30.         for (var i = 0 ; i<ipts.length;i++){
  31.             //所有的input的checked属性值都为true
  32.             ipts[i].checked = "true";
  33.         }
  34.     }
  35.     //反选
  36.     btns[1].onclick = function () {
  37.         for (var i = 0 ; i<ipts.length;i++){
  38.             //遍历获取input的checked属性取反赋值
  39.             ipts[i].checked = !ipts[i].checked;
  40.         }
  41.     }
  42. </script>
  43. </body>
  44. </html>

省市联动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>省市联动</title>
  6.     <style type="text/css">
  7.         .regist_bg {
  8.             width: 100%;
  9.             height: 681px;
  10.             padding-top: 40px;
  11.             background-image: url(../img/logo_bg.jpg);
  12.         }
  14.         .regist {
  15.             border: 7px inset #ccc;
  16.             width: 600px;
  17.             padding: 40px 0;
  18.             padding-left: 80px;
  19.             background-color: #fff;
  20.             margin-left: 25%;
  21.             border-radius: 10px;
  22.         }
  24.         input[type="submit"] {
  25.             background-color: aliceblue;
  26.             width: 100px;
  27.             height: 35px;
  28.             color: red;
  29.             cursor: pointer;
  30.             border-radius: 5px;
  31.         }
  32.     </style>
  34. </head>
  35. <body>
  36. <div class="regist_bg">
  37.     <div class="regist">
  38.         <form action="#">
  39.             <table width="600" height="350px">
  40.                 <tr>
  41.                     <td colspan="3">
  42.                         <font color="#3164af">会员注册</font> USER REGISTER
  43.                     </td>
  44.                 </tr>
  45.                 <tr>
  46.                     <td align="right">用户名</td>
  47.                     <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/></td>
  48.                 </tr>
  49.                 <tr>
  50.                     <td align="right">密码</td>
  51.                     <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/></td>
  52.                 </tr>
  53.                 <tr>
  54.                     <td align="right">确认密码</td>
  55.                     <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/></td>
  56.                 </tr>
  57.                 <tr>
  58.                     <td align="right">Email</td>
  59.                     <td colspan="2"><input id="emailId" type="text" name="email" size="60"/></td>
  60.                 </tr>
  61.                 <tr>
  62.                     <td align="right">姓名</td>
  63.                     <td colspan="2"><input name="text" name="username" size="60"/></td>
  64.                 </tr>
  65.                 <tr>
  66.                     <td align="right">性别</td>
  67.                     <td colspan="2">
  68.                         <input type="radio" name="gender" value="男" checked="checked"/>男
  69.                         <input type="radio" name="gender" value="女"/>女
  70.                     </td>
  71.                 </tr>
  72.                 <tr>
  73.                     <td align="right">电话号码</td>
  74.                     <td colspan="2"><input type="text" name="phone" size="60"/></td>
  75.                 </tr>
  76.                 <tr>
  77.                     <td align="right">所在地</td>
  78.                     <td colspan="3">
  79.                         <select id="provinceId" style="width:150px">
  80.                             <option value="">----请-选-择-省----</option>
  81.                         </select>
  82.                         <select id="cityId" style="width:150px">
  83.                             <option value="">----请-选-择-市----</option>
  84.                         </select>
  85.                     </td>
  86.                 </tr>
  87.                 <tr>
  88.                     <td width="80" align="right">验证码</td>
  89.                     <td width="100"><input type="text" name="verifyCode"/></td>
  90.                     <td><img src="../img/checkMa.png"/></td>
  91.                 </tr>
  92.                 <tr>
  93.                     <td></td>
  94.                     <td colspan="2">
  95.                         <input type="submit" value="注册"/>
  96.                     </td>
  97.                 </tr>
  98.             </table>
  99.         </form>
  100.     </div>
  101. </div>
  102. <!--
  103. 省市级联
  104.     1. 页面加载完成后自动装载省数据
  105.     2. 当选中省时,装载该省的市数据
  106. -->
  107. <script>
  108.     var arrsheng = ['河南省','河北省'];
  109.     var citys = [['郑州市','开封市','周口市'],['廊坊市','石家庄市','衡水市']];
  111.     var province = document.getElementById('provinceId');//获取省的下拉框
  112.     var city = document.getElementById('cityId');  //获取市的下拉框
  113.     //1、页面加载时自动装载省数据
  114.     window.onload =function () {
  115.         //循环省，填充省到下拉列表中
  116.         for (var i = 0; i < arrsheng.length; i++) {
  117.             province.innerHTML += "<option value=''>"+arrsheng[i]+"</option>"
  118.         }
  119.     }
  120.     //2、点击省时，装载该省的市数据
  121.     province.onclick =function () {   //给省下拉框绑定点击事件
  122.         if (this.selectedIndex != 0) {    //判断确定点击的不是下拉列表的第一个元素
  123.             city.length = 0;   //清空市下拉框中的元素
  124.             city.innerHTML = "<option value=''>----请-选-择-市----</option>"   //给市下拉框添加第一个元素
  125.             for (var j = 0; j < citys.length; j++) {   //循环添加点击省的市内容到市下拉框
  126.                 city.innerHTML += "<option value=''>"+citys[(this.selectedIndex-1)][j]+"</option>"
  127.             }
  128.         }else{
  129.             city.length = 0;   //清空市下拉框中的元素
  130.             city.innerHTML = "<option value=''>----请-选-择-市----</option>"
  131.         }
  132.     }
  133. </script>
  134. </body>
  135. </html>

表单校验：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单校验</title>
  6. <!--
  7.         1. 两次密码输入一致
  8.         2. 邮箱格式正确
  9.         3. 手机号格式正确
  10.         4. 提交表单时校验表单项是否合法.
  11. -->
  12.     <style type="text/css">
  13.         .regist_bg {
  14.             width: 100%;
  15.             height: 651px;
  16.             padding-top: 70px;
  17.             background-image: url(../img/logo_bg.jpg);
  18.             margin: 0px;
  19.         }
  21.         .regist {
  22.             border: 7px inset #ccc;
  23.             width: 700px;
  24.             padding: 40px 0;
  25.             padding-left: 80px;
  26.             background-color: #fff;
  27.             margin-left: 25%;
  28.             border-radius: 10px;
  29.         }
  31.         input[type="submit"] {
  32.             background-color: aliceblue;
  33.             width: 100px;
  34.             height: 35px;
  35.             color: red;
  36.             cursor: pointer;
  37.             border-radius: 5px;
  38.         }
  40.         .warn {
  41.             color: red;
  42.             font-size: 12px;
  43.             display: none;
  44.         }
  45.     </style>
  46.     <!--
  47.     表单校验
  48.         1. 两次密码输入一致
  49.         2. 邮箱格式正确
  50.         3. 手机号格式正确
  51.         4. 提交表单时校验表单项是否合法.
  52.     总结:
  53.         form表单的 onsubmit 事件 表单提交之前触发
  54.     -->
  55. </head>
  56. <body>
  57. <div class="regist_bg">
  58.     <div class="regist">
  59.         <form action="#" id="myForm">
  60.             <table width="700px" height="350px">
  61.                 <tr>
  62.                     <td colspan="3">
  63.                         <font color="#3164af">会员注册</font> USER REGISTER
  64.                     </td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td align="right">用户名</td>
  68.                     <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/>
  69.                         <span id="loginnamewarn" class="warn">用户名不能为空</span></td>
  70.                 </tr>
  71.                 <tr>
  72.                     <td align="right">密码</td>
  73.                     <td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
  74.                 </tr>
  75.                 <tr>
  76.                     <td align="right">确认密码</td>
  77.                     <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span
  78.                             id="pwdwarn" class="warn">密码不一致</span></td>
  79.                 </tr>
  80.                 <tr>
  81.                     <td align="right">Email</td>
  82.                     <td colspan="2"><input id="email" type="text" name="email" size="50"/>
  83.                         <span id="emailwarn" class="warn">邮箱格式有误</span>
  84.                     </td>
  85.                 </tr>
  86.                 <tr>
  87.                     <td align="right">姓名</td>
  88.                     <td colspan="2"><input name="text" name="username" size="50"/></td>
  89.                 </tr>
  90.                 <tr>
  91.                     <td align="right">性别</td>
  92.                     <td colspan="2">
  93.                         <input type="radio" name="gender" value="男" checked="checked"/>男
  94.                         <input type="radio" name="gender" value="女"/>女
  95.                     </td>
  96.                 </tr>
  97.                 <tr>
  98.                     <td align="right">电话号码</td>
  99.                     <td colspan="2"><input id="phone" type="text" name="phone" size="50"/>
  100.                         <span id="phonewarn" class="warn">手机格式有误</span>
  101.                     </td>
  102.                 </tr>
  103.                 <tr>
  104.                     <td align="right">所在地</td>
  105.                     <td colspan="3">
  106.                         <select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
  107.                             <option value="">----请-选-择-省----</option>
  108.                             <option value="0">北京</option>
  109.                             <option value="1">辽宁</option>
  110.                             <option value="2">江苏</option>
  111.                         </select>
  112.                         <select id="cityId" style="width:150px">
  113.                             <option>----请-选-择-市----</option>
  114.                         </select>
  115.                     </td>
  116.                 </tr>
  117.                 <tr>
  118.                     <td width="80" align="right">验证码</td>
  119.                     <td width="100"><input type="text" name="verifyCode"/></td>
  120.                     <td><img src="../img/checkMa.png"/></td>
  121.                 </tr>
  122.                 <tr>
  123.                     <td></td>
  124.                     <td colspan="2">
  125.                         <input id="rebtn" type="submit" value="注册"/>
  126.                     </td>
  127.                 </tr>
  128.             </table>
  129.         </form>
  130.     </div>
  131. </div>
  132. <script>
  133.     //用户名输入框不能为空
  134.     //获取用户名输入框
  135.     var username = document.getElementById('loginnameId');
  136.     //若用户名输入框失去焦点，则调用函数查看是否为空
  137.     username.onblur =  regeusername;
  138.         function regeusername() {
  139.         if(username.value == null || username.value == ""){
  140.             document.getElementById('loginnamewarn').style.display = "contents";
  141.             return false;
  142.         }else{
  143.             document.getElementById('loginnamewarn').style.display = "none";
  144.             return true;
  145.         }
  146.     }
  148.     // 1. 两次密码输入一致
  149.     //获取密码输入框内容，进行判断
  150.     var pwd1 = document.getElementById('pwd1');
  151.     var pwd2 = document.getElementById('pwd2');
  152.     //重复密码输入框失去焦点时调用函数
  153.     pwd2.onblur = regepwd;
  154.         function regepwd() {
  155.         if (pwd1.value != pwd2.value) {
  156.             document.getElementById('pwdwarn').style.display = "contents";
  157.         }else{
  158.             document.getElementById('pwdwarn').style.display = "none";
  159.         }
  160.         return pwd1.value == pwd2.value;
  161.     }
  162.     // 2. 邮箱格式正确
  163.     //获取邮箱框内容，进行判断
  164.     var email = document.getElementById('email');
  165.     //邮箱输入框失去焦点时调用函数
  166.     email.onblur = regeemail;
  167.         function regeemail() {
  168.         //邮箱验证正则表达式
  169.         var regeEmail =  /^[0-9a-zA-Z]{6,}@[0-9a-zA-Z]{2,}\.(com|cn|edu)$/;
  171.         if (!regeEmail.test(this.value)){
  172.             document.getElementById('emailwarn').style.display = "contents";
  173.         }else{
  174.             document.getElementById('emailwarn').style.display = "none";
  175.         }
  176.         return  regeEmail.test(this.value);
  177.     }
  178.     // 3. 手机号格式正确
  179.     //获取手机号输入框内容，进行判断
  180.     var phone = document.getElementById('phone');
  181.     //手机号输入框失去焦点时调用函数
  182.     phone.onblur = regephone;
  183.         function regephone() {
  184.         //手机号验证正则表达式
  185.         var regePhone = /^1[0-9]{10}$/;
  186.         if (!regePhone.test(this.value)){
  187.             document.getElementById('phonewarn').style.display = "contents";
  188.         }else{
  189.             document.getElementById('phonewarn').style.display = "none";
  190.         }
  191.         return regePhone.test(this.value);
  192.     }
  193.     // 4. 提交表单时校验表单项是否合法.
  194.     document.getElementById('myForm').onsubmit = function () {
  195.         return regeemail()&&regephone()&&regepwd()&&regeusername(); //都为true,即提交成功
  196.     }
  197. </script>
  199. </body>
  200. </html>

伪轮播图：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>伪轮播图</title>
  6.     <style>
  7.         /*大盒子*/
  8.         .container{
  9.             width:100%;
  10.             height: 600px;
  11.             background: darkkhaki;
  12.         }
  13.         /*装图片的盒子*/
  14.         .wrap{
  15.             position:relative;
  16.             width: 900px;
  17.             height: 300px;
  18.             background: red;
  19.             margin-left: 300px;
  20.         }
  21.         /*图片*/
  22.         img{
  23.             position: absolute;
  24.             width: 100%;
  25.             height: 100%;
  26.         }
  27.         /*按钮*/
  28.         .btn{
  29.             margin-top: 10px;
  30.             height: 30px;
  31.             width: 60px;
  32.         }
  33.         #goup{
  34.             float: left;
  35.             margin-left: 600px;
  36.         }
  37.         #gonext{
  38.             float: right;
  39.             margin-right: 600px;
  40.         }
  42.     </style>
  43. </head>
  44. <body>
  45. <div class="container">
  46.     <div class="wrap">
  47.         <img src="../img/desc_banner1.jpg" alt="" title="" id="imgx">
  48.     </div>
  49.     <button class="btn" id="goup">上一张</button>
  50.     <button class="btn" id="gonext">下一张</button>
  51.     <script>
  52.         var imgs = ['../img/desc_banner1.jpg','../img/desc_banner2.jpg','../img/desc_banner3.jpg']
  53.         var index = 0;
  54.         var img = document.getElementById('imgx');
  55.         var goUp = document.getElementById('goup');
  56.         goUp.onclick =goup;
  57.         function goup() {
  58.             if (0<=index&&index<imgs.length) {
  59.                 img.src = imgs[index--];
  60.             }else{
  61.                 index = (imgs.length-1);
  62.                 goup();
  63.             }
  64.         }
  65.         var goNext = document.getElementById('gonext');
  66.         goNext.onclick =gonext;
  67.             function gonext() {
  68.             if (index<imgs.length) {
  69.                 img.src = imgs[index++];
  70.             }else{
  71.                 index = 0;
  72.                 gonext();
  73.             }
  74.        }
  75.         var setInterval =setInterval(gonext,5000);
  76.         img.onfocus = function () {
  77.             clearInterval(setInterval);
  78.         }
  79.     </script>
  80. </div>
  81. </body>
  82. </html>