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

随机推荐

STL之算法使用简介
accumlate : iterator 对标志的序列中的元素之和,加到一个由 init 指定的初始值上.重载的版本不再做加法,而是传进来的二元操作符被应用到元素上. adjacent_differ ...
java语言基础第二讲课程作业02 总结
一.编程的好习惯 1.注释习惯.单行注释://, 多行注释:/* */ . 2.程序中添加适当的空白:4个空格. 3.文件名必须与公有类名一致,即public class 类名. 4.java中 ...
PHP高级——抽象类与接口的区别
在学习PHP面向对象时,都会在抽象类与接口上迷惑,作用差不多为什么还那么容易混淆,何不留一去一?但是事实上两者的区别还是很大的,如果能够很好地运用PHP的两个方法,面向对象的程序设计将会更加合理.清晰 ...
NBUT校赛 J Alex’s Foolish Function（分块+延迟标记）
Problem J: Alex’s Foolish Function Time Limit: 8 Sec Memory Limit: 128 MB Submit: 18 Solved: 2 Des ...
windows 系统下TortoiseGit 的安装
git 常用的使用工具: Windows 支持下载安装TortoiseGit Mac 下推荐使用 sourcetree Windows下的 TortoiseGit 安装 1. 进入小乌龟官网 To ...
linux精彩收集
----------------------------网络无关篇-------------------------- 0001 修改主机名(bjchenxu) vi /etc/sysconfig/n ...
IOS-NSDate之今天，昨天，这周，这个月，上个月
http://blog.csdn.net/xdrt81y/article/details/8425727 今天跟大家讨论日期的用法,相信大家在项目中,经常会设置一个默认时间段,比如一周前到今天.下面教 ...
libevent源码分析之信号处理
新看看官方demo的libevent如何使用信号 int called = 0; static void signal_cb(int fd, short event, void *arg) { str ...
git的使用02
接下来我们要将文件交给仓库去托管如何使用版本库
poj 1265&&poj 2954(Pick定理)
Area Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5811 Accepted: 2589 Description ...

ife2015-task2-1-2-3

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

随机推荐

热门专题