模仿时钟:
仿短信发送倒计时:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
</head>
<body>
<input type="text" />
<button id="btn">点击发送短信</button>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var count = 5;
var timer = null;//把定时器的名字暂时以null代替以后,然后用于对变量重新赋值声明进行对其关闭操作.
btn.onclick = function(){
clearInterval(timer);//每点击一次清除上一次已生效的点击事件重新执行 (避免多次点击)
this.disabled = true;//打开不可点击
var that = this; //把指向当前事件对象指向声明变量名that上.
timer = setInterval(sendMessage,1000);
function sendMessage(){
count--;
if (count >= 1)
{
that.innerHTML = "还剩余"+ count +"秒";
}else{
that.innerHTML = "点击重新发送短信";
that.disabled = false;
clearInterval(timer); //每次执行完以后必须关闭之前的定时器
count = 5;//重新赋值
}
}
}
</script>
PS:
不可点击:obj.disabled = disabled(或false) 的用法
arguments.callee :
返回正在执行的函数(代表函数本身).在函数体内使用.一般用于函数递归调用时.
function fn(){console.log(arguments.callee);}
这里的arguments.callee 就代表了 fn();
运算符:
逻辑运算符:
&& || !
&& : a && b : 解读: a为真则返回b,a为假则返回a本身.
|| : a || b : 解读: a为真则返回a本身,a为假则返回b.
! :逻辑非.
先后顺序优先级:
1: ( )
2: ! - ++ --
3: * / %
4: +－
5:< > <= >=
6:== != === !==
7:&&
8:||
9:三元运算符
10:= += /= *= %= -=
额外内容:
5秒跳转页面;
window.location.href = “http://”
setInterval和setTimeout 区别:
setIterval :几秒后重复执行方法,
setTimeout : 几秒过后执行一次方法.
转换为字符串:
1. + “” 2+ “” = “2” 2+”ab” = “2ab”
2. String() 转换为字符串
3. toString（基数） ; 基数就是进制
var txt = 10;
txt.toString(2) 二进制 1010
获取字符位置方法:
charAt，获取相应位置字符（参数： 字符位置）
charCodeAt获取相应位置字符unicode编码（参数： 字符位置）
var txt = “abcedf”;
比如， txt.charAt(4); 索引号一定是从0开始 返回的结果是 d
我们根据我们输入的 位数 返回相应的 字符 。
unicode编码 是我们字符的字符的唯一表示 。
小米页面自动上下拉动:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.xiaomi {
width: 512px;
height: 512px;
border: 1px solid #f00;
margin: 40px auto;
overflow: hidden;
position: relative;
}
.xiaomi span {
position: absolute;
left: 0;
width: 100%;
height: 256px;
cursor: pointer;
}
.up {
top: 0;
}
.down {
bottom: 0;
}
#pic{
position: absolute;
top: 0px;
left: 0;
}
</style>
</head>
<body>
<div class="xiaomi" id="box">
<img id="pic" src="mi.png" alt=""/>
<span class="up"></span>
<span class="down"></span>
</div>
</body>
</html>
<script>
function $(id){ return document.getElementById(id);}
var boxs = $("box").children;
var num = 0;
var timer = null;
boxs[1].onmouseover = function(){
clearInterval(timer);
timer = setInterval(span2,10);
function span2(){
num += 3;
if (num <= 0)
{
$("pic").style.top = num + "px";
}else{
clearInterval(timer);
}
}
}
boxs[2].onmouseover = function(){
clearInterval(timer);
timer = setInterval(span1,10);
function span1(){
num -= 3;
if (num >= -958)
{
$("pic").style.top = num + "px";
}else{
clearInterval(timer);
}
}
}
$("pic").parentNode.onmouseout = function(){
clearInterval(timer);
}
</script>
关键核心:
定义坐标位置初始值为0;
定义定时器变量名作为关闭定时器的控制方式.
1 当鼠标经过发生事件时,应先清除上一次定时器执行过或正在执行的方法,(关闭定时器,清空函数),
2 计算图片的高度来确定不越界,不出界图片盒子外的值.
比如盒子宽高各为512px, 图片的长度为1470,那么就用 1470 - 512 = 958(下拉到盒子的最底部停止继续下拉,做到不越界,不出界)
code:
boxs[1].onmouseoverer = function(){
clearInterval(timer);
timer = setInterval(span2,10);
function span2(){
num += 3;
if (num <= 0)
{
$("pic").style.top = num + "px";
}else{
clearInterval(timer);
}
}
}
boxs[2].onmouseover = function(){
clearInterval(timer);
timer = setInterval(span1,10);
function span1(){
num -= 3;
if (num >= -958)
{
$("pic").style.top = num + "px";
}else{
clearInterval(timer);
}
}
}
最后移除盒子外则关闭定时器:
以达到定在某个位置的做法.
code:
$("pic").parentNode.onmouseout = function(){
clearInterval(timer);
}