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="data:images/task2_3images/pig.png"/> </li>
                <li><img alt="flower" src="data:images/task2_3images/flower.png"/> </li>
                <li><img alt="food" src="data:images/task2_3images/food.png"/> </li>                <li><img alt="lamp" src="data: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的更多相关文章

task2
1. 邮件修改Mailtemplatereportfieldlink带<>的都改翻译${MAWBTask} 2.测试发邮件 3.找出能做成模版的所有地方,改成模版,复杂的地方记录下来
输入框提示--------百度IFE前端task2
第一版本: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
深度克隆（对象、数组）--------百度IFE前端task2
var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" }}; co ...
GDSOI2015 task2 覆盖半径
题目大意一个$n\times m$的矩阵中有$p$个已经确定圆心的圆,并且每个格子有一定的分数,如果一个格子被任意一个或以上的圆覆盖,那么就可以得到这个格子的分数.现在求最小的半径,使得得分 ...
清华集训2014 day1 task2 主旋律
题目这可算是一道非常好的关于容斥原理的题了. 算法好吧,这题我毫无思路,直接给正解. 首先,问题的正面不容易求,那么就求反面吧: 有多少种添加边的方案,使得这个图是DAG图(这里及以下所说的DAG ...
【深度学习】吴恩达网易公开课练习(class2 week1 task2 task3)
正则化定义:正则化就是在计算损失函数时,在损失函数后添加权重相关的正则项. 作用:减少过拟合现象正则化有多种,有L1范式,L2范式等.一种常用的正则化公式 \[J_{regularized} = ...
verilog task2
1.问题:串口的发送和接收系统时钟50Mhz,波特率119200.系统时钟计数约2604个,才是一位数据的传输时间. 模拟接收的任务函数rx_data_task():LSB first task r ...
百度前端技术学院-task2.18-2.19源码以及个人总结
源码:http://yun.baidu.com/share/link?shareid=2310452098&uk=1997604551 1.感觉在写js的时候,最好先理清思路,先干什么,在干什 ...
Datawhale MySQL 训练营 Task2 查询语句
目录 MySQL 管理 MySQL 用户管理参考数据库管理 SQ查询语句 1. 导入示例数据库,教程 MySQL导入示例数据库 2. 查询语句 SELECT 3. 筛选语句 WHERE ,过滤 4 ...
Task2 四则运算2
1.任务要求:对之前的自动出题系统提出了新的要求:(1).题目避免重复:(2).可定制(数量/打印方式):(3)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...

随机推荐

文明距离（civil）
文明距离(civil) 题目描述你被一个一向箔打中了,现在你掉到了一个一维空间中,也就是一个数轴上. 在这个数轴上,每秒会在一段连续的区间上出现“文明”.而你在每一秒开始的时候,可以花费x的代价移动 ...
忽略node_modules目录
如上图所示添加node_modules目录到忽略文件列表里面,点击应用就可以了.
POJ3680：Intervals（离散化+最大流最小费用）
Intervals Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 9320 Accepted: 4014 题目链接:ht ...
用ServletContext读取.properties文件
在这里主要介绍ServletContext怎么从.properties文件中用键得到值的. ServletContext读取的.properties文件一般放在的位置有:1直接放在WebRoot下面. ...
linux 大中括号变量解读
Linux中的小括号和大括号,${}/$()/()/{}/${var:-string}/${var:=string}/${var:+string}/${var:?string}/${var%patte ...
UVa10891 Game of Sum
给定n个数字,A和B可以从这串数字的两端任意选数字,一次只能从一端选取.两人都采用最优策略,A先手,问A和B各自得到数字的和的差值最大为多少? 区间DP F[i][j]表示区间i~j内A能得到的最大数 ...
[ CodeVS冲杯之路 ] P1169
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1169/ 感觉这题目好恐怖,莫名其妙乱码一堆就AC了…… 它看上去是两个子问题,实际上可以看成从起点找两条不相交的路径使 ...
Codeforces Round #395 Div.2 题解
感受第一次参加CF的rating比赛,感觉还是非常exciting,前18分钟把AB切掉之后一直在考虑C题,结果最后还是没有想出来Orz 传送门 A 比较水的模拟,就是计算:\(\frac{z}{l ...
windows实时监测热插拔设备的变化（转）
原文转自 https://blog.csdn.net/windows_nt/article/details/13614849 序: 在21世纪,这个信息时代,热插拔设备是一个巨大的安全隐患.在这个篇文 ...
CString和string在unicode与非unicode下的相互转换（转）
原文转自 http://blog.csdn.net/u014303844/article/details/51397556 CString和string在unicode与非unicode下的相互转换 ...

ife2015-task2-1-2-3

ife2015-task2-1-2-3的更多相关文章

随机推荐

热门专题