JS学习笔记2015-4-22（第9天）
今天完成老师布置的作业，图片切换；
听到老师讲课里面提到了，转义字符，这里就找到了一部分且拿来用再说：
如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"><</a> 57 <a href="javascript:;" id="next">></a> 58 <p id="ttl">文字正在加载中...</p> 59 <p id="page">数量正在计算中...</p> 60 <img id="img1"> 61 </div>
这里面有一个很重要的思路就是：重复利用到一段代码的时候，就要想到使用函数；
