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)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...

随机推荐

[转载]GCC 编译使用动态链接库和静态链接库--及先后顺序----及环境变量设置总结
来自http://blog.csdn.net/benpaobagzb/article/details/51364005 GCC 编译使用动态链接库和静态链接库 1 库的分类根据链接时期的不同,库又有 ...
聊聊Python中的GIL
对于广大写Python的人来说,GIL(Global Interpreter Lock, 全局解释器锁)肯定不陌生,但未必清楚GIL的历史和全貌是怎样的,今天我们就来梳理一下GIL. 1. 什么是GI ...
BZOJ 2438：杀人游戏（tarjan+概率）
杀人游戏Description一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面,查出谁是杀手. 警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他认识的人, ...
[poj] 2549 Sumsets || 双向bfs
原题在集合里找到a+b+c=d的最大的d. 显然枚举a,b,c不行,所以将式子移项为a+b=d-c,然后双向bfs,meet int the middle. #include<cstdio&g ...
h5 Visibility API总结
最近活动中的小游戏,有涉及页面隐藏或app后台运行时候,暂停游戏的功能,使用了h5的Visibility API,在此总结如下: 两个属性 document.hidden (Read only) 如果 ...
小L的占卜
小L的占卜题目描述小 X 的妹妹小 L 是一名 XXX 国的占卜师,她平日的工作就是为 X 国进行占卜. X 国的占卜殿中有一条长度为 NNN 米的走廊,先人在走廊的每一米都放置了一座神龛,第 i ...
Android APK瘦身方法小结
众所周知,APP包体的大小,会影响推广的难度,用户不太喜欢下载太大的APP,同类型同等功能的APP中往往是包体小的更受用户的青睐,所以降低包体是一项非常必要的事情,也是最近公司的APP需要降低包体,所 ...
创建型设计模式之建造者模式(Builder)
结构意图将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 适用性当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 当构造过程必须允许被构造的对象有不 ...
杭电oj2022-2030
2022 海选女主角 #include <stdio.h> #include <math.h> int main(){ ][]; int n,m,x,y,z,i,j; whil ...
使用 WideCharToMultiByte Unicode 与 UTF-8互转
1.简述最近在发送网络请求时遇到了中文字符乱码的问题,在代码中调试字符正常,用抓包工具抓的包中文字符显示正常,就是发送到服务器就显示乱码了,那就要将客户端和服务器设置统一的编码(UTF-8),而我们 ...

ife2015-task2-1-2-3

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

随机推荐

热门专题