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

随机推荐

django orm 之makemigrations和migrate命令
makemigrations:将模型的更改生成迁移脚本文件.模型所在的app,必须放在settings.py中的INSTALLED_APPS列表中.这个命令有以下几个常用选项: 1.app_label ...
【bzoj3829】[Poi2014]FarmCraft 贪心
原文地址:http://www.cnblogs.com/GXZlegend/p/6826667.html 题目描述 In a village called Byteville, there are ...
Android程序猿必须警示的13个坑
Android开发中,犯错是难免的,不犯错是不正常的,但是犯了错以后,我们必须时刻谨记这些坑,避免再次被坑,下面小编整理了13个,日常工作中,比较常见且易犯的错误,分享给大家. 1.类的 ...
HDU 5761 物理题
Rower Bo Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
C++自带向量_vector_C++
vector 向量,是C++自带的一种容器,其实就是一个升级版的数组因为它使用的是动态空间,所以当我们不确定数组空间的时候可以使用它若要使用需打开头文件 #include<vector> ...
TemplateBinding和Binding
TemplateBinding是Binding的一个轻量级版本,它失去了成熟版本Binding的很多功能,比如继承内容引用(inheritence context referencing),Relat ...
C++文件(夹)选择对话框
由于各种应用,我们需要调用系统的打开文件对话框或者打开文件夹对话框,或两者兼有.今遇到这个情况已经解决,特写下这篇博文. 1.打开文件对话框常用的方法是使用系统的CFileDialog.这里介绍另外一 ...
java的io操作(将字符串写入到txt文件中)
import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java ...
安卓SDK安装时出现的小问题
在SDK Manager启动安装后出现网页不能访问的错误错误日志如下 Fetching URL: https://dl-ssl.google.com/android/repository/repos ...
Android_html5交互弹框localstorage 存值整体案例
经历2周多的时间终于是完成了还算可以的android 整体案例了,分享下给大家也希望自己有时间回过头来看看当初研究android的纠结心情.痛苦的经历是开发android 大部分都是在网上找解决 ...

ife2015-task2-1-2-3

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

随机推荐

热门专题