task2-1.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #show{ display:none; } </style></head><body>兴趣爱好: <br><textarea id="ipt" type="text" name="兴趣爱好" ></textarea><br><button id="btn" value="提交">提交</button><div id="show">show</div><script type="text/javascript" src="scripts/util.js" ></script><script> addEvent($("#btn"),"click",becomeArr); function becomeArr(){ var arr=$("#ipt").value, l, re=/(^\s+)|(\s+$)/; arr=arr.replace(re,‘‘).replace(/\s+/,‘ ‘).split(/\s|,|;|\.|。|、| ;|，/);//去除首尾空格，根据间隔符进行分组 //使用了split后，即使数组里没有东西，长度也是1，内容为‘’ console.log(arr); l=arr.length; console.log(l); if(l==1&&arr==""){ alert("请输入!") } else{ $("#show").style.display="block"; $("#show").innerHTML=arr; } }</script></body></html>
使用了split后，即使数组里没有东西，长度也是1，内容为‘’
task2-2.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> input{ width:50px; }</style><body> <div box> <div id="now">现在是：</div> <div id="future">距离<input value="XX"/>年<input value="XX"/>月<input value="XX"/>日</div> <button id="btn" >还有</button> <div id="minus"><span>XX</span>年<span>XX</span>月<span>XX</span>日 <!--<span>XX</span>时<span>XX</span>分<span>XX</span>秒</div>--> </div> <script type="text/javascript" src="scripts/util.js"></script><script> //自动更新时间 setInterval(function () { day=new Date(); $("#now").innerHTML="现在是："+day; },1000);
//绑定事件 addEvent($("input")[0],"focus",default1); addEvent($("input")[1],"focus",default1); addEvent($("input")[2],"focus",default1); addEvent($("input")[0],"blur",default2); addEvent($("input")[1],"blur",default2); addEvent($("input")[2],"blur",default2);
//默认提示 function default1(){ if(this.value==‘XX‘){ this.value=‘‘; } } function default2(){ if(this.value==‘‘){ this.value=‘XX‘; } }
//本来想省点事用事件代理的，结果focus、blur不支持冒泡，ie又不支持捕获，focusin、focusout支持事件冒泡，结果不仅要浏览器兼容，还要分别写两个（focus、blur）。不如直接addEvent// delegateEvent2($("#future"),"input","focus",default1);// delegateEvent3($("#future"),"input","blur",default1); addEvent($(‘#btn‘),‘click‘,function(){ var nDay=day.getDate(), nMonth=day.getMonth()+1, nYear=day.getFullYear(), fDay=$("input")[2].value-1, fMonth=$("input")[1].value, fYear=$("input")[0].value; if(fDay<nDay){ $("span")[2].innerHTML=fDay-nDay+30; fMonth--; } else{ $("span")[2].innerHTML=fDay-nDay; } if(fMonth<nMonth){ $("span")[1].innerHTML=fMonth-nMonth+12; fYear--; } else{ $("span")[1].innerHTML=fMonth-nMonth; }if(fYear<nYear){ $("span")[0].innerHTML=‘XX‘; $("span")[1].innerHTML=‘XX‘; $("span")[2].innerHTML=‘XX‘; alert(‘请重新输入!‘); } else{ $("span")[0].innerHTML=fYear-nYear; } })</script></body></html>
本想用事件代理，结果focus、blur不支持冒泡，我还纠结了好久，怎么就是不出效果ie又不支持捕获，focusin、focusout支持事件冒泡，focus、blur不支持冒泡，用事件捕获那么麻烦，我还是直接用dom0级事件好了 task2-3.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ list-style-type: none; margin:0; padding:0; } #func{ width:300px; height:300px; } #box{ overflow:hidden; width: 300px; height:204px; position:relative; } #img{ width:1200px; height:204px; position: absolute; } #img img{ width: 300px; float:left; } #num{ position:absolute; left:110px; bottom:5px; } #num li{ float:left; padding:5px; cursor: pointer; } #loop{ margin-left:20px; } #sec{ width:40px; } </style></head><body><div id="func"> <select> <option>正序</option> <option>逆序</option> </select> <input id="loop" type="checkbox" value="循环"/><label>循环</label> <label>间隔时长</label> <input id="sec" type="date"/> <button id="confirm">confirm</button> <div id="box"> <div id="img"> <ul> <li><img alt="pig" src="images/task2_3images/pig.png"/> </li> <li><img alt="flower" src="images/task2_3images/flower.png"/> </li> <li><img alt="food" src="images/task2_3images/food.png"/> </li> <li><img alt="lamp" src="images/task2_3images/lamp.jpg"/> </li> </ul> </div> <ul id="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div></div> <script type="text/javascript" src="scripts/util.js"></script><script>//默认正序// 数字与图片相对应ul = $("#num");numLi = ul.getElementsByTagName("li");i = 0;c=0;sec=1;total();function total(){addEvent($("#confirm"),‘click‘, function () { if($("#sec").value!=sec){ sec=$("#sec").value; clearInterval(set); total(); return false; }});if($(‘option‘)[0].selected==true) { $("#img").style.left = 0 + ‘px‘; numLi[i].style.color = ‘white‘; var set=setInterval(function () { var l = $("#img").style.left; if (parseInt(l) >= (-600)) { i = i + 1; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } $("#img").style.left = (-300) * i + ‘px‘; numLi[i].style.color = ‘white‘; } else { if($("#loop").checked==true) { $("#img").style.left = 0 + ‘px‘; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } i = 0; numLi[i].style.color = ‘white‘; } } }, 1000*sec);// 点击数字出现相对应图片 delegateEvent(ul, ‘li‘, ‘click‘, function (target) { i = target.innerHTML - 1; $("#img").style.left = (-300) * i + ‘px‘; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } numLi[i].style.color = ‘white‘; })}// 逆序if($(‘option‘)[1].selected==true) { i = 3; $("#img").style.left = (-300) * 3 + ‘px‘; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } numLi[3].style.color = ‘white‘; set=setInterval(function () { var l = $("#img").style.left; if (parseInt(l) <= (-300)) { i = i - 1; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } numLi[i].style.color = ‘white‘; $("#img").style.left = ((-300) * i) + ‘px‘; } else { $("#img").style.left = (-900) + ‘px‘; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } i = 3; numLi[i].style.color = ‘white‘; } }, 1000*sec);// 点击数字出现相对应图片 delegateEvent(ul, ‘li‘, ‘click‘, function (target) { i = target.innerHTML - 1; $("#img").style.left = (-300) * i + ‘px‘; for (c = 0; c < numLi.length; c++) { numLi[c].style.color = ‘black‘; } numLi[i].style.color = ‘white‘; })}}</script></body></html>为什么到后面排版就那么乱了！！！不能忍
时间： 2024-12-28 02:16:03