JS学习笔记2015-4-22（第9天）

浏览数：21 / 时间：2015年06月09日

今天完成老师布置的作业，图片切换；

听到老师讲课里面提到了，转义字符，这里就找到了一部分且拿来用再说：

如HTML转义符、java 转义符、xml 转义符、 oracle 转义符、sql 转义符、sqlserver 转义符、php 转义符、asp 转义符、vb转义符、 javascript 转义符等等，还有网址中的百分号。

例如，HTML的< >&"©分别是<，>，&，"，©;的转义字符

XML只有5个转义符: < >& " '

自己敲代码的时候发现哪怕是错了一个中英文的标点符号，JS都没法执行下去，所以拼写和检查时候要特别注意；另外chrome的控制台特别好用，可以用console.log();来做调试；

“Unexpected token ILLEGAL” 提示这段代码的时候，可能就是标点符号的错误；

 1 <style>
 2     div, input, p{ margin: 0; padding: 0;}
 3     #pic { width: 400px; height: 400px; border: 10px solid #eee; margin: 40px auto 0; position: relative; background: #666;}
 4     #pic a { width: 40px; height: 40px; border: 5px solid #fff; background: #fff; position: absolute; top: 175px; text-align: center; line-height: 40px; text-decoration: none; color: #666; font-size: 30px; filter:alpha(opacity:40); opacity: 0.4;}
 5     #pic a:hover {filter:alpha(opacity:90); opacity: 0.9; }
 6     #prev{ left: 10px;}
 7     #next{ right: 10px;}
 8     #ttl{ position: absolute; bottom: 0; left: 0; width: 400px; height: 30px; line-height: 30px; background: #333; color: #fff; text-align: center; filter:alpha(opacity:70); opacity: 0.7;}
 9     #page{ position: absolute; top:0; left:0; width: 400px; height: 30px; line-height: 30px; background: #333; color: #fff; text-align: center; filter:alpha(opacity:70); opacity: 0.7;} /*这里公用的可以考虑公用样式 */
10     #img1 { width: 400px; height: 400px;}
11     
12 </style>
13 <script type="text/javascript">
14   window.onload = function(){
15    var oPrev = document.getElementById("prev");
16    var oNext = document.getElementById(‘next‘);
17    var oPage = document.getElementById(‘page‘);
18    var oTtl = document.getElementById(‘ttl‘);
19    var oImg = document.getElementById(‘img1‘);
20 
21    var arrText = [‘文字一‘,‘文字二‘,‘文字三‘,‘文字四‘];
22    var arrUrl = [‘img/1.jpg‘,‘img/2.jpg‘,‘img/3.jpg‘,‘img/4.jpg‘];
23    var num = 0; //有数组的地方，可以考虑准备一个数字来使用；
24    
25   // 初始化;
26   function fnTab(){
27    oPage.innerHTML = num +1 +‘/‘+ arrUrl.length;  
28    oImg.src = arrUrl[num]; 
29    oTtl.innerHTML = arrText[num];
30   }
31 
32   fnTab(); // 重复的东西用函数；因为函数本身不会执行，所以这里要调用一下；
33    oPrev.onclick = function(){
34        num --;
35        if (num == -1) {
36 
37            num = arrText.length-1;
38        };
39        fnTab();
40    };
41 
42    oNext.onclick = function(){
43        num ++;
44        if (num == arrText.length) {
45 
46            num = 0;
47        };
48        fnTab();
49    }
50  }
51 </script>
52 </head>
53 
54 <body>
55 <div id="pic">
56    <a href="javascript:;" id="prev">&lt;</a>
57    <a href="javascript:;" id="next">&gt;</a>
58    <p id="ttl">文字正在加载中...</p>
59    <p id="page">数量正在计算中...</p>
60    <img id="img1">
61 </div>