ife2015-task2-1-2-3

時間 2019-11-09

標籤 ife2015 ife task2 task 简体版

原文原文鏈接

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>爲何到後面排版就那麼亂了！！！不能忍

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。