JavaScript一些常用的示例1-阿里云开发者社区

JavaScript一些常用的示例1

2017-11-10 1024

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

1.由于身体原因，最近辞职待业，所以写点博客，希望对朋友们的学习有用，都是基础性的东西。从前面的，你可以看到我写的很详细。但是，2个礼拜后要准备找工作了，故以后我就把重要的东西或者有建设性的例子给大家总结一下，不再非常详细的介绍概念等了。如果你有什么不同或者疑问，可以通过扣扣或者E-mail联系我，hanchaohan@126.com

谢谢，O(∩_∩)O~

1.点击关闭按钮，整个层消失。邮件里用的比较多。

源码：（带颜色的字体要多加注意！！）


 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
      <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 

  
      <title></title> 

  
      <style type="text/css"> 

  
          #message{ 

  
              background:#cdeb8b; 

  
              border:1px solid #000; 

  
              height:30px; 

  
              line-height:30px; 

  
              padding-left:10px; 

  
              font-size:18px; 

  
              postition:relative; 

  
          } 

  
          #message .close{ 

  
              width:15px; 

  
              height:15px; 

  
              position:absolute; 

  
              right:10px; 

  
              top:10px; 

  
              cursor:pointer; 

  
          }    

  
      </style> 

  
      <script type="text/javascript"> 

  
          /*因为close()为关键字函数。所以起名为：closeDiv()*/ 

  
          function closeDiv() { 

  
              var msg = document.getElementById("message"); 

  
              msg.style.display = "none"; /*注意此处对display的操作！！*/

  
          } 

  
      </script> 

  
  </head> 

  
  <body> 

  
      <div id="message"> 

  
          <div class="close" onclick="closeDiv()">X</div> 

  
      </div> 

  
  </body> 

  
  </html>

2.图片的轮换：（电子商务网站常用的）

咱可以做一个，也许没有当当的好看，你可以自己完善啊！

源码：


 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
      <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 

  
      <title></title> 

  
      <script type="text/javascript"> 

  
          //声明几个变量 

  
          var now = 2; 

  
          var max = 7; 

  
          var t ; 

  
           

  
          /*图片的自动轮换*/ 

  
          function changeAd() { 

  
              //显示当前的图片，注意下面对变量的使用！！

  
              document.getElementById("ad"+now).style.display = "block"; 

  
               

  
               

  
              //隐藏非当前的图片 

  
              for(var index=1; index <= 7; index++) { 

  
                  if(index != now) { 

  
                      document.getElementById("ad"+index).style.display = "none"; 

  
                  } 

  
              } 

  
               

  
              if(now == max) { 

  
                  now = 1; 

  
              } else { 

  
                  now++; 

  
              } 

  
               

  
              //让图片每两秒轮换一下 

  
              t = setTimeout("changeAd()",2000); 

  
          } 

  
       

  
       

  
          /*点击图片编号时，显示该图片*/ 

  
          function showNow(n) { 

  
              now = n; 

  
              document.getElementById("ad"+now).display = "block"; 

  
              for(var index=1; index <= 7; index++) { 

  
                  if(index != now) { 

  
                      document.getElementById("ad"+index).style.display = "none"; 

  
                  } 

  
              } 

  
               

  
              clearTimeout(t); //重新开始图片的轮换 

  
              changeAd() 

  
          } 

  
      </script> 

  
      <style type="text/css"> 

  
          #ima{ 

  
              position:relative; 

  
              width:548px; 

  
              height:177px; 

  
               

  
          } 

  
          #butt{ 

  
              position:absolute; 

  
              bottom:0px; 

  
              right:0px; 

  
          } 

  
          input{ 

  
              cursor:pointer; 

  
          } 

  
      </style> 

  
  </head> 

  
  <body onload="changeAd()"> 

  
      <div id="ima"> 

  
   

  
          <div id="ad1"> 

  
              <img src="images/1.jpg" alt="" /> 

  
          </div> 

  
          <div id="ad2" style="display:none"> 

  
              <img src="images/2.jpg" alt="" /> 

  
          </div> 

  
          <div id="ad3" style="display:none"> 

  
              <img src="images/3.jpg" alt="" /> 

  
          </div> 

  
          <div id="ad4" style="display:none"> 

  
              <img src="images/4.jpg" alt="" /> 

  
          </div> 

  
          <div id="ad5" style="display:none"> 

  
              <img src="images/5.jpg" alt="" /> 

  
          </div> 

  
          <div id="ad6" style="display:none"> 

  
              <img src="images/6.jpg" alt="" /> 

  
          </div> 

  
          <div id="ad7" style="display:none"> 

  
              <img src="images/7.jpg" alt="" /> 

  
          </div> 

  
          <div id="butt"> 

  
              <input name="ad1" type="button" value="1" onclick="showNow(1)" /> 

  
              <input name="ad1" type="button" value="2" onclick="showNow(2)" /> 

  
              <input name="ad1" type="button" value="3" onclick="showNow(3)" /> 

  
              <input name="ad1" type="button" value="4" onclick="showNow(4)" /> 

  
              <input name="ad1" type="button" value="5" onclick="showNow(5)" /> 

  
              <input name="ad1" type="button" value="6" onclick="showNow(6)" /> 

  
              <input name="ad1" type="button" value="7" onclick="showNow(7)" /> 

  
          </div> 

  
      </div>   

  
       

  
       

  
  </body> 

  
  </html>

3.秒表

源码：


 
 

  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

  
  <html xmlns="http://www.w3.org/1999/xhtml"> 

  
  <head> 

  
      <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 

  
      <title></title> 

  
      <script type="text/javascript"> 

  
          var num = 0; 

  
          var t; 

  
           

  
          function runMethod() { 

  
              document.getElementById("content").innerHTML = num; 

  
              num++; 

  
              t = setTimeout("runMethod()",5); //，此处控制秒表的快慢 

  
          } 

  
           

  
          function stopMethod() { 

  
              clearTimeout(t); //注意clearTimeout();的使用 

  
              num = 0; 

  
          } 

  
      </script> 

  
  </head> 

  
  <body> 

  
      <div id="content" style="font-size:50px;"></div> 

  
      <input type="button" value="run" onclick="runMethod()" /> 

  
      <input type="button" value="stop" onclick="stopMethod()" /> 

  
  </body> 

  
  </html>

本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/929324，如需转载请自行联系原作者

JavaScript一些常用的示例1

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript一些常用的示例1

热门文章

最新文章

相关课程

相关电子书

相关实验场景