黑马程序员技术交流社区

标题: [石家庄校区]开关灯案例/事件/延迟 [打印本页]
作者: Vosk    时间: 2019-2-21 16:20
标题: [石家庄校区]开关灯案例/事件/延迟
本帖最后由 小石姐姐 于 2019-2-21 17:12 编辑

基础阶段_异常汇总Java编程基础异常一
  
创建人
  		  
贝塔βSeven
  
  
问题标题
  		  
day10_javaScript高级
  
  
问题分类
  		  
JavaScript高级
  
  
一级话题
  		  
开关灯案例/鼠标滑动事件/
  
  
问题补充
  		  
需求: 如何在鼠标滑动开启灯泡，鼠标滑过后关闭（即时）
  
  
附件
  		  
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <table>
      <script>
  
          window.onload = function() {
                  var table = document.getElementsByTagName("table")[0];
  
                  var text1 = "";
                  for (var j = 0; j < 5; j++) {
                      text1 += "<td>\n" +
                          "            <img src=\"./image/off.gif\" name=\"light1\" >\n" +
                          "        </td>";
                  }
                  var text2 = "";
                  for (var i = 0; i < 3; i++) {
                      text2 += ("<tr>\n" + text1 + "</tr>");
                  }
                  table.innerHTML +=  text2;
                  var tds = document.getElementsByTagName("img");
                  for (var i = 0;i<tds.length;i++){
                      tds.onmouseover=function () {
                          this.src="image/on.gif";
                      }
                      tds.onmouseout=function () {
                          this.src="image/off.gif";
                      }
                  }
              }
              </script>
  </table>
  </body>
  </html>
  
  
  
  
  
   
  
  
问题答案
  		  
问题分析:
  
建立<table>之后
  
首先我们获取内容为空的var类型的text1，将默认状态为关闭的灯泡传参到一个单元格内也就是text1，其次获取内容为空var类型的text2来作为行，设置行有几个单元格并将text1放进行中的单元格内，最后由table.innerHTML获取每行的内容，从而完成一个表格的建立；
  
建立一个数组通过doucument.getElementsByTagName来获取image的属性，通过遍历这个数组，设置鼠标滑动事件和鼠标移开事件，在事件发生后更换触发事件的图片路径从而完成开关灯的交替效果。
  
  
问题解决方法：
  
自己做不出来，问的凯歌   ;-)  /P
   
  



  
创建人
  		  
贝塔βSeven
  
  
问题标题
  		  
day10_javaScript高级
  
  
问题分类
  		  
JavaScript高级
  
  
一级话题
  		  
开关灯案例/鼠标滑动事件/延迟效果
  
  
问题补充
  		  
需求:在鼠标滑动至灯泡时 灯泡变亮，划过时延迟2秒灯泡灭掉
  
  
附件
  		  
  
<!DOCTYPE  html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <table>
      <script>
          window.onload = function() {
              var table = document.getElementsByTagName("table")[0];
  
              var text1 = "";
              for(var i =1;i<12;i++){
                  text1 +="<td>\n"+
                          "<img src=\"image/off.gif\" name = \"light\"> \n"+
                          " </td>";
              }
              var text2 = "";
              for(var i =0;i<4;i++){
                  text2+=("<tr>\n"+text1+"</tr>")
              }
              table.innerHTML+=text2;
  
  
              var imgs = document.getElementsByTagName("img");
              for(var j =0;i<imgs.length;j++){
  
                  imgs[j].onmouseout=function () {
                      var temp = this;
                      setTimeout(function () {temp.src="image/off.gif"; },3000);}
                  imgs[j].onmouseover=function() {
                      this.src="image/on.gif";
                  }
              }
  
          }
      </script>
  </table>
  </body>
  </html>
  
  
  
  
  
  
问题答案
  		  
问题分析:
  
1.        Settimeout时如果调用有参函数将立即执行函数内的参数内容，不会获取毫秒值。
  
2.        如果调用function方法会获取毫秒值，但是不会更改图片，
  
  
  
问题解决方法：
  
可以由此延申到很多前端页面的效果，创造更好的用户在页面内的交互体验，虽然现在的课程是以后台为主，想法比实力更重要;
  
  







off.gif (944 Bytes, 下载次数: 38)

关灯off

关灯off

on.gif (1.08 KB, 下载次数: 15)

开灯on

开灯on
作者: 凉笙墨染    时间: 2019-2-21 16:30
作者: Vosk    时间: 2019-2-21 16:41
凉笙墨染 发表于 2019-2-21 16:30

作者: 一个人一座城0.0    时间: 2019-2-23 19:18
看一看。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2