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

随机推荐

Application_Start事件中用Timer做一个循环任务
protected void Application_Start(object sender, EventArgs e) { System.Timers.Timer timer = new Syste ...
gulp-API介绍
使用gulp,一般只需要用4个API:gulp.src(),gulp.dest(),gulp.task(),gulp.watch(). 1. gulp.src() 用来获取流的,但是要注意的是这个流里 ...
[SDOI2015][bzoj3990] 序列 [搜索]
题面传送门思路首先,这道题目有一个非常显然(但是我不会严格证明,只能意会一下)的结论:一个合法的操作序列中,任意两个操作是可以互换的那么,这个结论加上本题极小的数据范围,为什么不搜索一下呢? ...
【BZOJ 2458 最小三角形】
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1551 Solved: 549[Submit][Status][Discuss] Descripti ...
8.2 前端检索的敏感词过滤的Python实现（针对元搜索）
对于前端的搜索内容进行控制,比如敏感词过滤,同样使用socket,这里使用Python语言做一个demo.这里不得不感叹一句,socket真是太神奇了,可以跨语言把功能封装,为前端提供服务. 下面就是 ...
Multiplication Game（博弈论）
Description Alice and Bob are in their class doing drills on multiplication and division. They quick ...
SyntaxError: Unexpected token ' in JSON at position 1
刚才遇到一个问题: 在公司两个不同的环境竟然会出现错误对比一下两个环境的数据,发现一个传来的是双引号的JSON字符串,一个是单引号.而当我用JSON.parse()时,就会报错!! 原因是JSON. ...
angular组件--tips提示功能
将组件封装起来在项目中开发很实用,之前遭遇过一次痛苦的经历,那阵子改的要吐血了.常用的组件封装起来,改公共的地方,往往多处受用. 例如:我在项目中引用 tips.text('加载中...',fals ...
CodeVs1515 跳
题目描述 Description 邪教喜欢在各种各样空间内跳. 现在,邪教来到了一个二维平面.在这个平面内,如果邪教当前跳到了(x,y),那么他下一步可以选择跳到以下4个点:(x-1,y), (x+1 ...
C# WeakReference（弱引用）
WeakReference(弱引用)我们平常用的都是对象的强引用,如果有强引用存在,GC是不会回收对象的.我们能不能同时保持对对象的引用,而又可以让GC需要的时候回收这个对象呢?.NET中提供了Wea ...

ife2015-task2-1-2-3

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

随机推荐

热门专题