ife2015-task2-1-2-3
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ife2015-task2-1-2-3相关的知识，希望对你有一定的参考价值。
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>
为什么到后面排版就那么乱了！！！不能忍
以上是关于ife2015-task2-1-2-3的主要内容，如果未能解决你的问题，请参考以下文章