1:加法计算器

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         //01-窗体加载
  8.         window.onload = function () {
  9.             //03-单击按钮触发事件
  10.             document.getElementById("btnAdd").onclick = function () {
  11.                 //02-获取数据
  12.                 var num1 = parseInt(document.getElementById("num1").value);
  13.                 var num2 = parseInt(document.getElementById("num2").value);
  14.                 document.getElementById("result").value = num1 + num2;
  15.             }
  16.         }
  17.     </script>
  18. </head>
  19. <body>
  20. <input type="text" id="num1"/>
  21. +
  22. <input type="text" id="num2" />
  23. =
  24. <input type="text" id="result" />
  25.  
  26. <input type="button" id="btnAdd" value="相加" />
  27. </body>
  28. </html>

加法计算器

2:点击触发

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         window.onload= function() {
  8.             //获取所有的按钮
  9.             var btn = document.getElementsByName("btnCry");
  10.             for (var i = ; i < btn.length; i++) {
  11.  
  12.                 btn[i].onclick = function() {
  13.                     this.value = '呜呜';
  14.                 }
  15.  
  16.             }
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21. <input type="button" name="btnCry" value="哈哈" />
  22. <input type="button" name="btnCry" value="哈哈" />
  23. <input type="button" name="btnCry" value="哈哈" />
  24. <input type="button" name="btnCry" value="哈哈" />
  25. <input type="button" name="btnCry" value="哈哈" />
  26. <input type="button" name="btnCry" value="哈哈" />
  27. <input type="button" name="btnCry" value="哈哈" />
  28. <input type="button" name="btnCry" value="哈哈" />
  29. <input type="button" name="btnCry" value="哈哈" />
  30. </body>
  31. </html>

3: 小鸟飞

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         //01_设置图片编号
  8.         var index = ;
  9.         window.onload = function() {
  10.             //02-设置定时器,每个一段时间调用图片切换方法
  11.             setInterval(ImgChange,);
  12.         }
  13.        function ImgChange()
  14.         {
  15.             index ++;
  16.             if (index>) {
  17.                 index = ;
  18.             }
  19.             //03-找到小鸟的图片
  20.             var birdfly = document.getElementById("BridFly");
  21.             //04-设置图片
  22.             birdfly.src = '../Img/bird' + index + '.png';
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <img src="../Img/bird1.png"  id="BridFly"/>
  28. </body>
  29. </html>

4: 文字跑马灯

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         /*02设置为绝对定位*/
  8.         #PMD {
  9.             position: absolute;
  10.             width: 100px;
  11.             background-color: blue;
  12.         }
  13.     </style>
  14.     <script>
  15.         //04 设置自增字段
  16.         var left = ;
  17.         var dire = ;
  18.         window.onload = function () {
  19.             //03设置定时器
  20.             setInterval(Move,);
  21.         }
  22.         //04设置move方法
  23.         function Move() {
  24.             //05获得div元素
  25.             var pmdDiv = document.getElementById("PMD");
  26.             //06设置其移动
  27.             left = left + *dire;
  28.             //07判断宽度
  29.             if (left +  >= window.innerWidth) {
  30.                 dire = -;
  31.             }
  32.             if (left <= ) {
  33.                 dire = ;
  34.             }
  35.             pmdDiv.style.left = left + 'px';
  36.         }
  37.     </script>
  38. </head>
  39. <body>
  40. <!--01设置存放跑马灯文字的div-->
  41. <div id="PMD">跑马灯文字</div>
  42. </body>
  43. </html>

5:动态操作元素

　　放置三个按钮,分别添加图片.文本框.超链接.放置一个按钮,删除所有元素

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         window.onload = function() {
  8.             document.getElementById('btnImg').onclick = function() {
  9.                 var img = document.createElement('img');
  10.                 img.src = "../Img/bird1.png";
  11.                 document.getElementById('addDynamic').appendChild(img);
  12.             };
  13.             document.getElementById('btnText').onclick = function() {
  14.                 var text = document.createElement('input');
  15.                 text.type = "text";
  16.                 text.id='txtNew'
  17.                 text.value = '新增';
  18.                 document.getElementById('addDynamic').appendChild(text);
  19.             };
  20.             document.getElementById('btns').onclick = function() {
  21.                 var a = document.createElement('a');
  22.  
  23.                 a.href = 'http://www.baidu.com';
  24.                 //注意这条语句很重要
  25.                 a.innerHTML = '百度';
  26.                 //注意txtNew有且只能有一个
  27.                 document.getElementById('addDynamic').insertBefore(a,txtNew);
  28.             };
  29.             document.getElementById('btnRemove').onclick = function () {
  30.                 var childs = document.getElementById('addDynamic').childNodes;
  31.                 for (var i = childs.length -;i>=; i--) {
  32.                     document.getElementById('addDynamic').removeChild(childs[i]);
  33.                 }
  34.  
  35.             };
  36.         }
  37.     </script>
  38. </head>
  39. <body>
  40.     <input type="button" id="btnImg" value="添加图片" />
  41.     <input type="button" id="btnText" value="添加文本框" />
  42. <input type="button" id="btns" value="超链接" />
  43. <input type="button" id="btnRemove" value="移除" />
  44.  
  45. <div id="addDynamic"></div>
  46. </body>
  47. </html>

6:评分功能

　　设置五个等级,当鼠标点击时给出星级.鼠标没有点击,显示上次得分.

　　

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         window.onload = function () {
  8.             var imgs = document.getElementsByTagName('img');
  9.             var clickId=;
  10.  
  11.             for (var i = ; i < imgs.length; i++)
  12.             {
  13.                 //02-01 鼠标放置事件
  14.                 imgs[i].onmouseover = function() {
  15.                     var id = this.id;
  16.                     for (var j = ; j < i; j++) {
  17.                         if (j < id) {
  18.                             imgs[j].src = "../Img/star2.png";
  19.                         } else {
  20.                             imgs[j].src = "../Img/star1.png";
  21.                         }
  22.                     }
  23.                 };
  24.  
  25.                 //02-02 鼠标移开事件
  26.                 imgs[i].onmouseout = function() {
  27.                     for (var j = ; j < clickId; j++) {
  28.                         imgs[j].src = "../Img/star2.png";
  29.                     }
  30.                     for (var j = clickId; clickId<imgs.length; j++) {
  31.                         imgs[j].src = "../Img/star1.png";
  32.                     }
  33.                 };
  34.  
  35.                 //02-03 鼠标点击事件
  36.                 imgs[i].onclick = function() {
  37.                      clickId = parseInt(this.id);
  38.  
  39.                 };
  40.             }
  41.         }
  42.     </script>
  43. </head>
  44. <body>
  45. <!--01放置五个评分的图片-->
  46.     <img id="" name="imgScore" src="../Img/star1.png" />
  47.     <img id="" name='imgScore' src="../Img/star1.png" />
  48.     <img id="" name='imgScore' src="../Img/star1.png" />
  49.     <img id="" name='imgScore' src="../Img/star1.png" />
  50.     <img id="" name='imgScore' src="../Img/star1.png" />
  51. </body>
  52. </html>


7: 野人快跑

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         #imgsavage {
  8.             position: absolute;
  9.             width: 100px;
  10.         }
  11.     </style>
  12.     <script>
  13.         var left = ;
  14.         var dir = ;
  15.         window.onload = function () {
  16.             setInterval(imgChange, );
  17.             var imgIndex = ;
  18.             function imgChange() {
  19.                 var imgsav = document.getElementById('imgsavage');
  20.                 imgsav.src = "../Img/walk" + imgIndex + ".png";
  21.                 imgsav.style.left = left + 'px';
  22.                 imgIndex = imgIndex + ;
  23.                 left = left +  * dir;
  24.                 if (imgIndex>) {
  25.                     imgIndex = ;
  26.                 }
  27.                 if (left+ > window.innerWidth) {
  28.                     dir = -;
  29.                 }
  30.                 if (left<=) {
  31.                     dir = ;
  32.                 }
  33.             }
  34.         }
  35.     </script>
  36. </head>
  37. <body>
  38. <!--01首先定义一个div,用于放置野人图片-->
  39.     <!--<div id="savageImg"><img src="../Img/walk1.png" /></div>-->
  40.     <img id="imgsavage" src="../Img/walk1.png" />
  41. </body>
  42. </html>

野人快跑

8:按钮5秒后可用

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         var lastTime = ;
  8.         window.onload = function() {
  9.             setInterval(changText, );
  10.         };
  11.  
  12.         function changText() {
  13.             lastTime --;
  14.             var btn = document.getElementById("btnLast");
  15.                 btn.value = '按钮' + lastTime + '秒后可用';
  16.             if (lastTime <= ) {
  17.                 btn.disabled = false;
  18.                 btn.value = '按钮 可用';
  19.             }
  20.             btn.onclick = function() {
  21.  
  22.                 alert("可用了");
  23.  
  24.             }
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29.     <input id="btnLast" type="button" disabled="disabled" value="按钮5秒后可用"/>
  30. </body>
  31. </html>

9:超链接变红

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         window.onload = function() {
  8.             //01-动态创建超链接
  9.             for (var i = ; i < ; i++) {
  10.                 var herf = document.createElement('a');
  11.                 herf.href = "#";
  12.                 herf.innerHTML = "           "+i+"            ";
  13.                 herf.id = i;
  14.                 document.getElementById('herfs').appendChild(herf);
  15.             }
  16.             var herfs = document.getElementsByTagName('a');
  17.             for (var i = ; i < herfs.length; i++) {
  18.                 herfs[i].onclick = function() {
  19.                     this.style.color = "red";
  20.                 }
  21.             }
  22.  
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27. <div id="herfs"></div>
  28. </body>
  29. </html>

10:透视图

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         .divStyle {
  8.             border: 1px solid;
  9.             position: absolute;
  10.         }
  11.     </style>
  12.  
  13.     <script>
  14.         window.onload = function() {
  15.             var divWidth = ;
  16.             for (var i = ; i < ; i++) {
  17.                 var div = document.createElement('div');
  18.                 divWidth =  - ( * i);
  19.  
  20.                 div.className = 'divStyle';
  21.                 div.style.width = divWidth + 'px';
  22.                 div.style.height = divWidth + 'px';
  23.                 div.style.left =  * i + 'px';
  24.                 div.style.top =  * i + 'px';
  25.  
  26.                 document.getElementById('divSet').appendChild(div);
  27.             }
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32. <div id="divSet" style="width: 1000px; height: 1000px; border: 1px solid; "></div>
  33. </body>
  34. </html>

法一

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.  
  8.         onload = function() {
  9.             var div = document.getElementById("div");
  10.             for (var i = ; i < ; i++) {
  11.                 var tem = document.createElement("div");
  12.                 tem.style.border = '1px solid red';
  13.                 tem.style.margin =  + 'px';
  14.                 div.appendChild(tem);
  15.                 div = tem;
  16.             }
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21. <div id="div" style="width: 500px; height: 500px;"></div>
  22. </body>
  23. </html>

法二

11 根据json对象创建表格

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         .table {
  8.             border: 1px solid;
  9.         }
  10.     </style>
  11.     <script>
  12.         var list = [
  13.             { id: , country: '中国', capital: '北京' },
  14.             { id: , country: '美国', capital: '华盛顿' },
  15.             { id: , country: '日本', capital: '东京' },
  16.             { id: , country: '韩国', capital: '首尔' }
  17.         ];
  18.         onload = function() {
  19.             var body = document.getElementsByTagName('body')[];
  20.             //创建表
  21.             var table = document.createElement('table');
  22.             table.className = 'table';
  23.             body.appendChild(table);
  24.  
  25.             //设置标题列
  26.             var thead = document.createElement('thead');
  27.             var temp = list[];
  28.             for (var key in temp) {
  29.                 var th = document.createElement('th');
  30.                 th.className = 'table';
  31.                 th.innerHTML = key;
  32.                 thead.appendChild(th);
  33.             };
  34.             //把行添加到表上
  35.             table.appendChild(thead);
  36.             //创建列,并填充数据
  37.             for (var i = ; i < list.length; i++) {
  38.                 //遍历对象
  39.                 var item = list[i];
  40.                 //设置行
  41.                 var tr = document.createElement('tr');
  42.                 if (i% == ) {
  43.                     tr.style.backgroundColor = "red";
  44.                 };
  45.  
  46.                 for (var key in temp) {
  47.                     //设置列td1
  48.                     var td1 = document.createElement('td');
  49.                     td1.innerHTML = item[key];
  50.                     td1.className = 'table';
  51.                     //把列添加到行上
  52.                     tr.appendChild(td1);
  53.  
  54.                 };
  55.  
  56.                 //把行添加到表上
  57.                 table.appendChild(tr);
  58.             }
  59.         }
  60.     </script>
  61. </head>
  62. <body>
  63.  
  64. </body>
  65. </html>

12 在11的基础上.鼠标滑过行,高亮显示,鼠标离开,恢复原状

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         .table {
  8.             border: 1px solid;
  9.         }
  10.     </style>
  11.     <script>
  12.         var list = [
  13.             { id: , country: '中国', capital: '北京' },
  14.             { id: , country: '美国', capital: '华盛顿' },
  15.             { id: , country: '日本', capital: '东京' },
  16.             { id: , country: '韩国', capital: '首尔' }
  17.         ];
  18.         //01-加载事件
  19.         onload = function() {
  20.             var body = document.getElementsByTagName('body')[];
  21.             //创建表
  22.             var table = document.createElement('table');
  23.             table.className = 'table';
  24.             body.appendChild(table);
  25.  
  26.             //设置标题列
  27.             var thead = document.createElement('thead');
  28.             var temp = list[];
  29.             for (var key in temp) {
  30.                 var th = document.createElement('th');
  31.                 th.className = 'table';
  32.                 th.innerHTML = key;
  33.                 thead.appendChild(th);
  34.             };
  35.             //把行添加到表上
  36.             table.appendChild(thead);
  37.             //创建列,并填充数据
  38.             for (var i = ; i < list.length; i++) {
  39.                 //遍历对象
  40.                 var item = list[i];
  41.                 //设置行
  42.                 var tr = document.createElement('tr');
  43.                 if (i% == ) {
  44.                     tr.style.backgroundColor = "red";
  45.                 };
  46.  
  47.                 for (var key in temp) {
  48.                     //设置列td1
  49.                     var td1 = document.createElement('td');
  50.                     td1.innerHTML = item[key];
  51.                     td1.className = 'table';
  52.                     //把列添加到行上
  53.                     tr.appendChild(td1);
  54.  
  55.                 };
  56.  
  57.                 //把行添加到表上
  58.                 table.appendChild(tr);
  59.             }
  60.             //02-鼠标移上---高亮显示
  61.             var trs = document.getElementsByTagName('tr');
  62.             for (var i = ; i < trs.length; i++) {
  63.                 trs[i].onmouseover = function() {
  64.                     this.style.backgroundColor = "yellow";
  65.                 }
  66.             }
  67.             //03 鼠标移开---恢复到原来
  68.             var trs_Stute = document.getElementsByTagName('tr');
  69.             for (var i = ; i < trs_Stute.length; i++) {
  70.                 if (i %  == ) {
  71.                     trs_Stute[i].onmouseout = function() {
  72.                         this.style.backgroundColor = "red";
  73.                     }
  74.                 }
  75.                 else {
  76.                     trs_Stute[i].onmouseout = function () {
  77.                         this.style.backgroundColor = "white";
  78.                     }
  79.                 }
  80.             }
  81.  
  82.         }
  83.  
  84.     </script>
  85. </head>
  86. <body>
  87.  
  88. </body>
  89. </html>

13 控制div的显示与隐藏

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.  
  8.         </style>
  9.     <script>
  10.         window.onload = function() {
  11.             var btn = document.getElementById("btnDiv");
  12.             var div = document.getElementById('div');
  13.             btn.onclick = function () {
  14.  
  15.                 if (div.style.display == "none") {
  16.                     div.style.display = "block";
  17.                 } else {
  18.                     div.style.display = "none";
  19.  
  20.                 }
  21.             }
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26. <div id="div" style="display:none"> 通过按钮控制div的显示于隐藏</div>
  27. <input id="btnDiv" type="button" value="显示div/隐藏div"/>
  28. </body>
  29. </html>

14 图片跟着鼠标走

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         #imgIdle {
  8.             position: absolute;
  9.             width: 63px;
  10.             height: 75px;
  11.         }
  12.     </style>
  13.     <script>
  14.         //01 获取鼠标的位置
  15.         //01-01 鼠标移动 mouseover
  16.         //01-02 通过事件 event e 获取x  y 坐标
  17.         onload = function () {
  18.             window.onmousemove = function (e) {
  19.                 //02 获取对象
  20.                 var img1 = document.getElementById("imgIdle");
  21.                 //设置xy
  22.                 img1.style.left = e.clientX - parseInt(img1.width) /  + 'px';
  23.                 img1.style.top = e.clientY - parseInt(img1.height) /  + 'px';
  24.             }
  25.         }
  26.  
  27.         //02 指定图片的位置
  28.     </script>
  29. </head>
  30. <body>
  31.     <img id="imgIdle" src="../Img/idle.png" />
  32. </body>
  33. </html>

15 右下角显示元素id信息

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         #divID {
  8.             position: absolute;
  9.             width: 80px;
  10.             height: 80px;
  11.             border: 1px;
  12.             background: yellow;
  13.             display: none;
  14.         }
  15.     </style>
  16.     <script>
  17.         onload = function() {
  18.  
  19.             var childs = document.getElementsByName('items');
  20.  
  21.             for (var i = ; i < childs.length; i++) {
  22.                 childs[i].onmouseover= function() {
  23.                     //调用方法--显示div
  24.                     showDiv(this);
  25.                 }
  26.             }
  27.  
  28.             function showDiv(obj) {
  29.                 //获取div的坐标
  30.                 var x = obj.offsetLeft + obj.offsetWidth;
  31.                 var y = obj.offsetTop + obj.offsetHeight;
  32.                 //获取div的显示
  33.                 var div = document.getElementById('divID');
  34.                 div.style.left = x + 'px';
  35.                 div.style.top = y + 'px';
  36.                 div.style.display = "block";
  37.                 div.innerHTML = 'id = '+ obj.id;
  38.             }
  39.         }
  40.     </script>
  41. </head>
  42. <body>
  43.    <input name="items" id="button1" type="button" value="按钮1" />
  44.     <input name="items" id="text1" type="text" value="文本框" />
  45.     <input name="items" id="button2"  style="height: 50px" type="button" value="按钮4" /> 
  46.  
  47.     <div id="divID" ></div>
  48.  
  49. </body>
  50. </html>

16 看图识国家

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         #showInfo {
  8.             position: absolute;
  9.             width: 200px;
  10.             height: 200px;
  11.             background: green;
  12.             display: none;
  13.         }
  14.         .img {
  15.             width: 200px;
  16.             height: 200px;
  17.         }
  18.     </style>
  19.     <script>
  20.         var list = {
  21.             'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
  22.             'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
  23.             'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和动漫'],
  24.             'hg': ['韩国', '首尔', '无穷', '民族意识超强']
  25.         };
  26.  
  27.         window.onload = function() {
  28.             var imgs = document.getElementsByTagName('img');
  29.             for (var i = ; i < imgs.length; i++) {
  30.                 imgs[i].onmouseover = function (e) {
  31.                     //01 获取国家id
  32.                     var imgid = this.id;//ng
  33.                     //02 根据id获取list中的国家信息
  34.                     var msg = list[imgid];
  35.                     //03构造描述字符串
  36.                     var msgStr = '国家：' + msg[] + '<br>首都：' + msg[] + '<br>国花：' + msg[] + '<br>描述：' + msg[];
  37.                     //获取div
  38.                     var div = document.getElementById('showInfo');
  39.                     //设置div
  40.                     div.style.left = e.clientX + 'px';
  41.                     div.style.top = e.clientY + 'px';
  42.                     div.innerHTML = msgStr;
  43.                     div.style.display = 'block';
  44.                 }
  45.             }
  46.         }
  47.     </script>
  48. </head>
  49. <body>
  50. <div>
  51.     <img class="img" name="img" id="hg" src="../Img/hg.jpg" />
  52.     <img class="img" name="img" id="mg" src="../Img/mg.jpg" />
  53.     <img class="img" name="img" id="rb" src="../Img/rb.jpg" />
  54.     <img class="img" name="img" id="zg" src="../Img/zg.jpg" />
  55. </div>
  56. <div id="showInfo">
  57.  
  58. </div>
  59. </body>
  60. </html>

17 正则表达式

两种写法

var regObj = new RegExp("\\d{5}");

var regObj = /\d/;

17.1 匹配

　　

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         onload = function() {
  8.             document.getElementById('btnTest').onclick = function () {
  9.                 //01 构建正则表达式
  10.                 var repExp = /^\d{6}$/;
  11.                 //02 获取用户输入的值
  12.                 var txtMsg = document.getElementById('txtMsg').value;
  13.                 //03 进行匹配
  14.                 if (repExp.test(txtMsg)) {
  15.                     alert('OK');
  16.                 } else {
  17.                     alert('no');
  18.                 }
  19.  
  20.             }
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25. <input type="text" id="txtMsg"/>
  26. <input type="button" id="btnTest" value="匹配test"/>
  27. </body>
  28. </html>

匹配邮政编码

　　

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         onload = function() {
  8.             document.getElementById('btnTest').onclick = function () {
  9.                 //01 构建正则表达式
  10.                 var repExp = /^\w+@[a-z0-]+\..+$/;
  11.                 //02 获取用户输入的值
  12.                 var txtMsg = document.getElementById('txtMsg').value;
  13.                 //03 进行匹配
  14.                 if (repExp.test(txtMsg)) {
  15.                     alert('OK');
  16.                 } else {
  17.                     alert('no');
  18.                 }
  19.  
  20.             }
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25. <input type="text" id="txtMsg"/>
  26. <input type="button" id="btnTest" value="匹配test"/>
  27. </body>
  28. </html>

邮箱匹配

17.2 获取

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         onload = function() {
  8.             //匹配
  9.             document.getElementById('btnTest').onclick = function () {
  10.                 //01 构建正则表达式
  11.                 var repExp = /^\w+@[a-z0-]+\..+$/;
  12.                 //02 获取用户输入的值
  13.                 var txtMsg = document.getElementById('txtMsg').value;
  14.                 //03 进行匹配
  15.                 if (repExp.test(txtMsg)) {
  16.                     alert('OK');
  17.                 } else {
  18.                     alert('no');
  19.                 }
  20.  
  21.             }
  22.             //提取
  23.             document.getElementById('btnExec').onclick = function() {
  24.                 var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
  25.                 var reg = /\d+/g;//匹配所有
  26.                 // var reg = /\d+/;//只匹配第一个
  27.                 while (true) {
  28.                     var result = reg.exec(str);
  29.                     if (result==null) {
  30.                         break;
  31.                     }
  32.                     alert(result);
  33.                 }
  34.             }
  35.         }
  36.     </script>
  37. </head>
  38. <body>
  39. <input type="text" id="txtMsg"/>
  40. <input type="button" id="btnTest" value="匹配test" />
  41. <input type="button" id="btnExec" value="提取Exec"/>
  42. </body>
  43. </html>

提取

17.3 提取组

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         onload = function() {
  8.             //匹配
  9.             document.getElementById('btnTest').onclick = function () {
  10.                 //01 构建正则表达式
  11.                 var repExp = /^\w+@[a-z0-]+\..+$/;
  12.                 //02 获取用户输入的值
  13.                 var txtMsg = document.getElementById('txtMsg').value;
  14.                 //03 进行匹配
  15.                 if (repExp.test(txtMsg)) {
  16.                     alert('OK');
  17.                 } else {
  18.                     alert('no');
  19.                 }
  20.  
  21.             }
  22.             //提取
  23.             document.getElementById('btnExec').onclick = function() {
  24.                 var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
  25.                 var reg = /\d+/g;//匹配所有
  26.                 // var reg = /\d+/;//只匹配第一个
  27.                 while (true) {
  28.                     var result = reg.exec(str);
  29.                     if (result==null) {
  30.                         break;
  31.                     }
  32.                     alert(result);
  33.                 }
  34.             }
  35.             //提取组--匹配第二个数字
  36.             document.getElementById('btnGropExec').onclick = function () {
  37.                 var str = document.getElementById('txtMsg').value;
  38.                 var reg = /\d(\d)\d*/g;
  39.                 while (true) {
  40.                     var result = reg.exec(str);
  41.                     if (result == null) {
  42.                         break;
  43.                     }
  44.                     alert(result);
  45.                 }
  46.             }
  47.         }
  48.     </script>
  49. </head>
  50. <body>
  51. <input type="text" id="txtMsg"/>
  52. <input type="button" id="btnTest" value="匹配test" />
  53. <input type="button" id="btnExec" value="提取Exec" />
  54. <input type="button" id="btnGropExec" value="提取组Exec"/>
  55. </body>
  56. </html>

17.4 替换

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         onload = function() {
  8.             //匹配
  9.             document.getElementById('btnTest').onclick = function () {
  10.                 //01 构建正则表达式
  11.                 var repExp = /^\w+@[a-z0-]+\..+$/;
  12.                 //02 获取用户输入的值
  13.                 var txtMsg = document.getElementById('txtMsg').value;
  14.                 //03 进行匹配
  15.                 if (repExp.test(txtMsg)) {
  16.                     alert('OK');
  17.                 } else {
  18.                     alert('no');
  19.                 }
  20.  
  21.             }
  22.             //提取
  23.             document.getElementById('btnExec').onclick = function() {
  24.                 var str = document.getElementById('txtMsg').value; //'火车票12306 电信10000 火警119';
  25.                 var reg = /\d+/g;//匹配所有
  26.                 // var reg = /\d+/;//只匹配第一个
  27.                 while (true) {
  28.                     var result = reg.exec(str);
  29.                     if (result==null) {
  30.                         break;
  31.                     }
  32.                     alert(result);
  33.                 }
  34.             }
  35.             //提取组--匹配第二个数字
  36.             document.getElementById('btnGropExec').onclick = function () {
  37.                 var str = document.getElementById('txtMsg').value;
  38.                 var reg = /\d(\d)\d*/g;
  39.                 while (true) {
  40.                     var result = reg.exec(str);
  41.                     if (result == null) {
  42.                         break;
  43.                     }
  44.                     alert(result);
  45.                 }
  46.             }
  47.             //替换
  48.             document.getElementById('btnReplace').onclick = function () {
  49.                 var str = document.getElementById('txtMsg').value;
  50.                 var reg = /\s+/g;
  51.                 var result = str.replace(reg, '');
  52.                 alert(result);
  53.             }
  54.         }
  55.     </script>
  56. </head>
  57. <body>
  58. <input type="text" id="txtMsg"/>
  59. <input type="button" id="btnTest" value="匹配test" />
  60. <input type="button" id="btnExec" value="提取Exec" />
  61. <input type="button" id="btnGropExec" value="提取组Exec"/>
  62. <input type="button" id="btnReplace" value="替换" />
  63.  
  64. </body>
  65. </html>

18 密码强度验证

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         onload = function() {
  8.             //失去焦点验证
  9.             document.getElementById("txtPwd").onblur = function () {
  10.                 var msg = this.value;
  11.                 //获取提示框
  12.                 var msgResult = document.getElementById("resultMsg");
  13.                 if (msg.length < ) {
  14.                     msgResult.innerHTML = '弱爆了';
  15.                 } else {
  16.                     var pw = ;
  17.                     if (/[a-zA-Z]+/.test(msg)) {
  18.                        pw++;
  19.                     }
  20.                     if (  /[-]+/.test(msg)  ) {
  21.                         pw++;
  22.                     }
  23.                     if (  /[!@#$%^&*()]+/.test(msg)) {
  24.                         pw++;
  25.                     }
  26.                 }
  27.                 switch (pw) {
  28.                     case :
  29.                         msgResult.innerHTML = '弱';
  30.                         break;
  31.                     case :
  32.                         msgResult.innerHTML = '中';
  33.                         break;
  34.                     case :
  35.                         msgResult.innerHTML = '强';
  36.                         break;
  37.  
  38.                 }
  39.             }
  40.         }
  41.     </script>
  42. </head>
  43. <body>
  44. <input type="text" id="txtPwd"/>
  45. <span id="resultMsg"></span>
  46. </body>
  47. </html>

步步为营-55-js练习的更多相关文章

  1. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  2. JS函数

    1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏 ...

  3. JS常用方法函数整理

    1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

  4. JS常用语句

    JavaScript常用语句 1.document.write("");    输出语句 2.JS中的注释为   // 3.传统的HTML文档顺序是:     document-& ...

  5. 学完了js的知识，一起分享总结知识点

    又一个知识点学完了,到了总结学习效果和知识总结的时间了.js这个编程语言相对于html和css的逻辑性要强一些,也比较不容易上手.概念性的知识点不难理解,就是实际的操作并不容易,需要通过学习和借鉴案列 ...

  6. JS常用方法函数

    document.write("");为 输出语句    2.JS中的注释为//    3.传统的HTML文档顺序是:document->html->(head,bod ...

  7. js-分享107个js中的非常实用的小技巧（借鉴保存）

    转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...

  8. js中一些常用的基本函数

    如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于 ...

  9. js常用函数大全107个

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

  10. 常用原生JS函数和语法集合

    luoyishan-2017-10-08 1. 输出语句:document.write(""); 2. JS中的注释为// 3. 传统的HTML文档顺序是:document-> ...

随机推荐

  1. Openresty+redis实现灰度发布

    一.架构 环境: 192.168.189.131:tomcat服务 192.168.189.132:tomcat服务 192.168.189.130:OpenResty服务.redis服务 流程: 请 ...

  2. linux中vi的基本操作

    在vi如何查找文字 vi redis.config 在命令模式下 按 / 然后最下方会出现/ 打出你所需要查找的字.n 是代表查找下一个 如何撤销上一步的操作 1,退出编辑操作 按esc键 2,按u ...

  3. Linux记录-进程数和句柄数调整

    1.cat /etc/security/limits.confwebuser soft nofile 65535webuser hard nofile 65535webuser soft nproc ...

  4. AtCoder Regular Contest 077 E - guruguru

    https://arc077.contest.atcoder.jp/tasks/arc077_c 有m个点围成一个圈,按顺时针编号为1到m,一开始可以固定一个位置x,每次操作可以往顺时针方向走一步或直 ...

  5. 解决audio和video在手机端无法自动播放问题

    各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...

  6. 求幂运算、多项式乘法及Horner法则的应用

    一,两种不同的求幂运算 求解x^n(x 的 n 次方) ①使用递归,代码如下: private static long pow(int x, int n){ if(n == 0) return 1; ...

  7. 八、uboot 代码流程分析---board_init_f

    接着上一节,板子开始做前期初始化工作. 8.1 board_init_f Board_f.c (common) /* 板子初次初始化.boot_flags = 0 */ void board_init ...

  8. 51nod1222 最小公倍数计数

    题目来源: Project Euler 基准时间限制:6 秒 空间限制:131072 KB 分值: 640  定义F(n)表示最小公倍数为n的二元组的数量. 即:如果存在两个数(二元组)X,Y(X & ...

  9. 使用Sphinx生成本地的Python帮助文档

    第一步:安装Sphinx 首先我们需要安装Sphinx,如果已经安装了Anaconda,那么只需要使用如下命令即可安装,关于其中的参数 -c anaconda,可以在链接[1]中查看: conda i ...

  10. js 判断身份证好是否合法

    function cidInfo(sId){ var info="" //if(!/^\d{17}(\d|x)$/i.test(sId))return false; sId=sId ...