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)可以控制下列参数:是否有乘除法.数值范围.加减有无负数.除法有无余数.是否支持分数... ...
随机推荐
- 团队项目-第七次scrum 会议
时间:11.3 时长:30分钟 地点:F楼1039教室 工作情况 团队成员 已完成任务 待完成任务 解小锐 学习cocos creator样例 修复员工招聘时bug 陈鑫 完成fire()与UI的对接 ...
- spring 配置问题记录1-@ResponseBody和favorPathExtension
在搭建springmvc+easyui的项目时,有一个地方参照网上说的方法一直没实现出来, 就是前台的datagrid的数据渲染不上去, 尝试了好多种方法,包括也找了目前手里的项目来进行比较,也没发现 ...
- qemu中ｄｅｖｉｃｅ和ｄｒｉｖｅｒ的区别 使用９ｐ文件系统
qemu配置中经常会出现-driver/-device的选项,可以理解成-driver是后端设备,即一个实际的物理的磁盘:device是把这块磁盘插入到虚机中的pci控制器中. 这样的话,虚机也能看到 ...
- lambda表达式10个示例——学习笔记
摘录:http://www.importnew.com/16436.html 1.lambda实现Runnable // Java 8之前: new Thread(new Runnable() { @ ...
- 【bzoj1007】[HNOI2008]水平可见直线 半平面交/单调栈
题目描述 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的.例如,对于直线:L1:y=x; L2:y=- ...
- Asymptotic I Catalan Number
卡特兰数出现在许多计数问题中. 常见的例子有:$n$ 个节点的有序二叉树,$2n$ 个括号构成的合法括号序列. 在上面所举的两个例子中,很容易看出卡特兰数满足递推: $$ C_{n+1} = \sum ...
- HITOJ 2739 The Chinese Postman Problem（欧拉回路+最小费用流）
The Chinese Postman Problem My Tags (Edit) Source : bin3 Time limit : 1 sec Memory limit : 6 ...
- POJ 2891 Strange Way to Express Integers | exGcd解同余方程组
题面就是让你解同余方程组(模数不互质) 题解: 先考虑一下两个方程 x=r1 mod(m1) x=r2 mod (m2) 去掉mod x=r1+m1y1 ......1 x=r2+m2y2 . ...
- 用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 安装PL/SQL Developer，链接本地64位Oracle
请参考: http://www.cnblogs.com/ymj126/p/3712727.html 或者 http://blog.csdn.net/cselmu9/article/details/80 ...