首页 > 代码库 > 2016.11.24

2016.11.24

2024-08-23 02:40:57   213人阅读

今天是正式上课的第一天，彭老师先给我们介绍了一下基础班的课程大纲：3.5天HTML+3.5天CSS+7天javascript+2天jQuery+1天Bootstrap,做传智的官网、游戏官网、表单验证、二级联动、图片轮播、选项卡切换、伸缩菜单等等。

 

 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5     <title>网页标题</title>
  6     <meta name="keywords" content="关键字列表" />
  7     <meta name="description" content="网页描述" />
  8     <link rel="stylesheet" type="text/css" href="" />
  9     <style type="text/css"></style>
 10     <script type="text/javascript"></script>
 11 </head>
 12 <body>
 13     <h1>Photos</h1>
 14     
 15 
 16 
 17     <ul id = "imageGallery">
 18         <li>
 19             <a href = "../images/mayday/12.jpg" title = "mayday12">mayday12</a>
 20         </li>
 21         <li>
 22             <a href = "../images/mayday/13.jpg" title = "mayday13">mayday13</a>
 23         </li>
 24         <li>
 25             <a href = "../images/mayday/14.jpg" title = "mayday14">mayday14</a>
 26         </li>
 27         <li>
 28             <a href = "../images/mayday/15.jpg" title = "mayday15">mayday15</a>
 29         </li>
 30     </ul>
 31 
 32     <p id = "description">啦啦啦啦啦</p>
 33     <a href = "http://www.example.com/" class = "mayday";>打开一个新窗口</a>
 34     <img id = "placeholder" src ="../images/mayday/5.jpeg" title = "mayday5" alt = "mayday5"/>
 35 </body>
 36     <script>
 37 //        var placeholder = document.getElementById("placeholder");
 38 //        var img_src = http://www.mamicode.com/placeholder.getAttribute("src");
 39 //        img_src.setAttribute("src","../images/mayday/12.jpg");
 40 //        function photoPic(placeholder){
 41 //
 42 //        }
 43 //        function showPic(whichpic){
 44 //            var whichpic = document.getElementsByTagName("a");
 45 //            var source = whichpic.getAttribute("href");
 46 //            var placeholder = document.getElementById("placeholder");
 47 //            placeholder.setAttribute("src",source); 
 48 //
 49 //            var text = whichpic.getAttribute("title");
 50 //            var description = document.getElementById("description");
 51 //            description.firstChild.nodeValue = http://www.mamicode.com/text;
 52 //
 53 //
 54 //        }
 55 
 56 
 57         1、js和标记分离前的函数：
 58         function showPic(whichpic){
 59             //换图片
 60             var source = whichpic.getAttribute("href");
 61             var placeholder = document.getElementById("placeholder");
 62             placeholder.setAttribute("src",source);
 63 
 64             //换文字
 65             var text = whichpic.getAttribute("title");
 66             var description = document.getElementById("description");
 67             description.firstChild.nodeValue = text;
 68         }
 69 
 70 
 71 //        function countBodyChildren(){
 72 //            var body_element = document.getElementsByTagName("body")[0];
 73 //            alert(body_element.childNodes.length);
 74 //            
 75 //
 76 //        }
 77 //        window.onload = countBodyChildren;
 78 //        event = "javascript statements();"
 79 //        function mayday(winURL){
 80 //            window.open(winURL,"may","width = 550px,height = 550px");
 81 //        }
 82 //        var links = document.getElementByTagName("a");
 83 //        for(var i = 0;i < links.length;i++){
 84 //            if(links[i].getAttribute("class") == "popup"){
 85 //                links[i].onclick = function(){
 86 //                }
 87 //            }
 88 //        }
 89 //        window.onload = preparelinks;
 90 //    function preparelinks{
 91 //        var links = document.getElementById("a");
 92 //        for(var i = 0;i<links.length;i++){
 93 //            if(links[i].getAttribute("class") = "popup"){
 94 //                link[i].onclick = function(){
 95 //                popup(this.getAttribute("href"));
 96 //                return false;
 97 //                }
 98 //            }
 99 //        }
100 //    }
101 //    javascript:popUp("");
102 
103 function prepareGallery{
104     if(!document.getElementById){
105         return false;
106     }
107     if(!document.getElementsByTagName){
108         return false;
109     }
110     if(!document.getEelemntById("imageGallery")){
111         retrun false;
112     }
113 
114     var gallery = document.getElementById("imageGallery");
115     var links = gallery.getElementByTagName("a");
116     for(var i = 0;i<links.length;i++){
117         links[i].onclick = function(){
118             showPic(this);
119             return false;
120         }
121     }
122 }
123 
124 window.onload = prepareGallery;
125     </script>
126 </html>

 

2016.11.24


联系
我们