标签：
1、开关灯效果：
var oBody = document.getElementById("bodyEle");
oBody.onclick= function () {
var bg=this.style.backgroundColor;
switch(bg){
case "white":
this.style.backgroundColor="blue";
break;
case "blue":
this.style.backgroundColor="red";
break;
case "red":
this.style.backgroundColor="yellow";
break;
case "yellow":
this.style.backgroundColor="green";
break;
default:
this.style.backgroundColor="white";
}
}
2、隔行变色
var oList = document.getElementById("list");
var oLis = oList.getElementsByTagName("li");
for (var i = 0; i < oLis.length; i++) {
var oLi = oLis[i];
i % 2 === 0 ? (oLi.className = "c1", oLi.zhuFeng = "c1") : (oLi.className = "c2", oLi.zhuFeng = "c2");
oLi.onmouseover = function () {
this.className = "c3";
}
oLi.onmouseout = function () {
var oldVal = this.zhuFeng;
this.className = oldVal;
}
}
3、冒泡排序
function sortAry(ary, type) {
for (var i = 0; i < ary.length - 1; i++) {
for (var j = 0; j < ary.length - 1 - i; j++) {
if (ary[j] > ary[j + 1]) {
var temp = ary[j];
ary[j] = ary[j + 1];
ary[j + 1] = temp;
}
}
}
type === 1 ? ary.reverse() : void 0;
}
var ary = [12, 34, 23, 45, 23, 12, 23, 24, 35, 1, 26, 37, 45, 62, 0];
sortAry(ary, 1);
console.log(ary);
4、任意数求和加排序
function sortAry(ary, type) {
var temp = null;
for (var i = 0; i < ary.length - 1; i++) {
for (var j = 0; j < ary.length - 1 - i; j++) {
if (ary[j] > ary[j + 1]) {
temp = ary[j];
ary[j] = ary[j + 1];
ary[j + 1] = temp;
}
}
}
type === 1 ? ary.reverse() : void 0;
return ary;
}
var ary = [12, 3, 2, 1, 4, 2, 3, 1, 5, 6, 2, 1, 2, 5, 4];
var newAry = sortAry(ary, 1);
console.log(newAry);
function sum() {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
var val = Number(arguments[i]);
if (isNaN(val)) {
continue;
}
total += val;
}
return total;
}
var total=sum(1,2,3,4,5,6,7,8,9,0);
console.log(total);
5、DOM属性案例
function getMyChildren(ele, tagName) {
var ary = [], nodes = ele.childNodes;
for (var i = 0; i < nodes.length; i++) {
var cur = nodes[i];
if (cur.nodeType === 1) {
if (tagName) {
if(cur.nodeName.toLowerCase()===tagName.toLowerCase())
{ ary.push(cur);
} } else {
ary.push(cur);
}
}
}
return ary;
}
var oDiv = document.getElementById("div1");
console.log(getMyChildren(oDiv,"ul"));
6、Math案例
function getRandom(n, m) {
n = Number(n);
m = Number(m);
if (isNaN(n) || isNaN(m)) {
return Math.random();
}
if (n > m) {
var temp = n;
n = m;
m = temp;
}
return Math.round(Math.random() * (m - n) + n);
}
获取4位0-61之间的随机整数 ?获取4位不重复的如何处理
var ary = [];
for (var i = 0; i < 4; i++) {
ary.push(getRandom(0, 61));
}
console.log(ary);
7、String案例
var time = "2015-5-24 12:55:3";
function zero(value) {
return value < 10 ? "0" + value : value;
}
function formatTime(timeStr) {
var ary = timeStr.split(" ");
var str1 = ary[0];
var str2 = ary[1];
var ary1 = str1.split("-");
var ary2 = str2.split(":");
return ary1[0] + "年" + zero(ary1[1]) + "月" + zero(ary1[2]) + "日 " + zero(ary2[0]) + "时" + zero(ary2[1]) + "分" + zero(ary2[2]) + "秒";
}
var res = formatTime(time);
console.log(time);
console.log(res);
8、验证码
varcodeStr="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var oDiv = document.getElementById("code");
function getRandom(n, m) {
n = Number(n);
m = Number(m);
if (isNaN(n) || isNaN(m)) {
return Math.random();
}
if (n > m) {
var temp = n;
n = m;
m = temp;
}
return Math.round(Math.random() * (m - n) + n);
}
function getCode() {
var str = "";
for (var i = 0; i < 4; i++) {
var ran = getRandom(0, 61);
str += codeStr.charAt(ran);
}
oDiv.innerHTML = str;
}
getCode();
oDiv.onclick = getCode;
9、Date获取当前时间
var oDiv = document.getElementById("div1");
var timeStr = formatTime();
oDiv.innerHTML += timeStr;
var timer = setInterval(function () {
var timeStr = formatTime();
oDiv.innerHTML = "北京时间：" + timeStr;
}, 1000);
function formatTime() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;//0-11代表我们的1-12月
var day = time.getDate();
var w = time.getDay();//0-6代表周日-周六
var wStr = "日一二三四五六", week = wStr.charAt(w);
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var mlSeconds = time.getMilliseconds();//毫秒
return year + "年" + zero(month) + "月" + zero(day) + "日 星期" + week + " " + zero(hours) + "时" + zero(minutes) + "分" + zero(seconds) + "秒";
}
function zero(value) {
return value < 10 ? "0" + value : value;
}
10、倒计时
把时间格式的字符变成我们的标准时间格式
var tar=new Date("2015-05-24 17:59:59");
对字符串的格式有要求
中间用"-"在IE6~8下不兼容，需要改成"/"
getTime:获取距离1970年1月1日午夜(00:00)之间的毫秒差
var oDiv = document.getElementById("div1");
var str = getSpanTime();
oDiv.innerHTML = "距离下课：" + str;
var timer=window.setInterval(function(){
var str = getSpanTime();
oDiv.innerHTML = "距离下课：" + str;
},1000);
function getSpanTime() {
var tarTime = new Date("2015/05/24 17:59:59");
var nowTime = new Date();
var tarSpan = tarTime.getTime();
var nowSpan = nowTime.getTime();
var diffTime = tarSpan - nowSpan;//当前时间距离目标时间的毫秒差
//接下来我们用毫秒差算出包含都少个小时、分钟、秒就好了
1、算出总毫秒差中包含的小时有几个
var hour = Math.floor(diffTime / (1000 * 60 * 60));
2、算出当前这几个小时占了多少毫秒
var hourMs = hour * 60 * 60 * 1000;
3、接下来算分钟的时候，需要把小时占用的减去
var spanMs = diffTime - hourMs;
4、开始算spanMs中包含多少分钟
var minute = Math.floor(spanMs / (1000 * 60));
5、算这么多分钟占用多少毫秒
var minuteMs = minute * 60 * 1000;
6、算秒的时候把分钟占用的也减去
spanMs = spanMs - minuteMs;
7、算剩下的包含多少秒
var second = Math.floor(spanMs / 1000);
return zero(hour) + ":" + zero(minute) + ":" + zero(second);
}
function zero(value) {
return value < 10 ? "0" + value : value;
}
11、定时器简单动画
var oBox = document.getElementById("box");
var cw = document.documentElement.clientWidth || document.body.clientWidth;
var tarLeft = cw - 100;//到屏幕最右边的目标left值
var timer = null, startLeft = 0;
function move() {
window.clearTimeout(timer);
timer = null;
startLeft += 10;
if (startLeft >= tarLeft) {
oBox.style.left = tarLeft + "px";
return;
}
oBox.style.left = startLeft + "px";
timer = window.setTimeout(move, 20);
}
oBox.onclick = function () {
if (timer) {
window.clearTimeout(timer);
timer = null;
} else {
move();
}
}
12、正则案例
1）判断是否为有效数字的正则
var reg = /^[+-]?(?:\d|([1-9]\d+))(?:\.\d+)?$/;
2）正整数
var reg=/^[+]?(\d|([1-9]\d+))$/;
3）负整数
var reg=/^-(\d|([1-9]\d+))$/;
4）整数
var reg=/^[+-]?(\d|([1-9]\d+))$/;
5）小数
var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)$/;
6）身份证
var reg = /^(\d{3})(\d{3})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/;
7）在18-65之间的年龄
var reg=/^(?:1[8-9])|(?:[2-5]\d)|(?:6[0-5])$/;
8）中国标准真实姓名:2-4位汉字
var reg=/^[\u4e00-\u9fa5]{2,4}$/;
9）昵称:只能包含数字、字母、下划线、-，3位及以上
var reg=/^[0-9a-zA-Z_-]{3,}$/;
10）手机号
var reg=/^1\d{10}$/;
11）邮箱
var reg = /^(?:[0-9a-zA-Z._-]+)@(?:[0-9a-zA-Z]+)(?:\.[a-zA-Z]+){1,2}$/;
12）密码：数字、字母、_ 6-16
var reg=/^\w{6,16}$/;
13、表格排序
Tab.js:
var oTab = document.getElementById("tab");
var tBody = oTab.tBodies[0];//在table表格中提供获取tBody的方法，是一个HTMLCollection集合,我们只要第一个tBody就好了
var oRows = tBody.rows;
var oScore = document.getElementById("score");
var oAge = document.getElementById("age");
实现的是隔行变色
function changeColor(oRows) {
for (var i = 0; i < oRows.length; i++) {
var oRow = oRows[i];
i % 2 !== 0 ? oRow.className = "c" : oRow.className = "";
oRow.oldClass = oRow.className;
oRow.onmouseover = function () {
this.className = "cY";
}
oRow.onmouseout = function () {
this.className = this.oldClass;
}
}
}
changeColor(oRows);
将数据显示在我们的页面中:数据绑定
function show() {
var str = "";
if (jsonData && jsonData.length > 0) {
for (var i = 0; i < jsonData.length; i++) {
var cur = jsonData[i];
str += "<tr>";
str += "<td><input type=‘checkbox‘ name=‘tabInput‘/></td>";
for (var key in cur) {
str += "<td>" + cur[key] + "</td>";
}
str += "</tr>";
}
}
tBody.innerHTML = str;
changeColor(tBody.rows);
}
show();
function sortRows(n) {
var oRows = tBody.rows;
var oRowsAry = tools.likeToArray(oRows);
给所有行对应的数组进行排序
oRowsAry.sort(function (a, b) {
var as = parseFloat(a.cells[n].innerHTML);
var bs = parseFloat(b.cells[n].innerHTML);
return as - bs;
});
实现升降序处理
if (this.flag === "asc") {
oRowsAry.reverse();
this.flag = "desc";
} else {
this.flag = "asc";
}
按照最新的顺序，把我们的每一行重新的添加到页面中
var frg = document.createDocumentFragment();
for (var i = 0; i < oRowsAry.length; i++) {
frg.appendChild(oRowsAry[i]);
}
tBody.appendChild(frg);
changeColor(oRows);
}
oScore.onclick = function () {
sortRows.call(this, 5);
}
oAge.onclick = function () {
sortRows.call(this, 2);
tools.js:
var tools = {
formatJSON: function (jsonStr) {
var jsonObj = null;
try {
jsonObj = JSON.parse(jsonStr);
} catch (e) {
jsonObj = eval("(" + jsonStr + ")");
}
return jsonObj;
},
isType: function (val, type) {
return Object.prototype.toString.call(val) === "[object " + type + "]";
},
likeToArray: function (likeAry) {
var ary = [];
try {
ary = [].slice.call(likeAry, 0);
} catch (e) {
for (var i = 0; i < likeAry.length; i++) {
ary.push(likeAry[i]);
}
}
return ary;
}
};
14、点赞
var oCount = document.getElementById("count");
var oSpan = oCount.getElementsByTagName("span")[0];
oCount.onclick = (function () {
var n = 0;
return function () {
n++;
oSpan.innerHTML = "(" + n + ")";
}
})();
15、数组去重
function distinct(ary) {
var obj = {};
for (var i = 0; i < ary.length; i++) {
var cur = ary[i];
if (obj[cur] == cur) {
ary.splice(i, 1);
i--;
continue;
}
obj[cur] = cur;
}
obj = null; 我们在不用这个obj的时候，让obj=null，这样之前开辟的那个堆内存xxxfff222就没有变量占用了，浏览器空闲的时候，会自动的销毁这个堆内存(浏览器的垃圾回收机制)
return ary;
}
var ary=[1,2,1,2,1,2,2,1,2,3,2,3,1,2,3,2,1,2,3];
var newAry=distinct(ary);把全局下的ary变量的值传给我们的函数
var a=distinct(ary);
console.log(newAry);
16、投票
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var ary = [oBtn1, oBtn2];
for (var i = 0; i < ary.length; i++) {
var cur = ary[i];
cur.onclick = (function () {
var n = 0;
return function () {
var oSpan = this.getElementsByTagName("span")[0];
var oDiv = this.getElementsByTagName("div")[0];
//var c = n;
n += 10;
if (n <= 100) {
oSpan.innerHTML = "( " + n + " )";
oDiv.style.width = n + "px";
//move(c, oDiv);
}
}
})();
}
function move(cur, ele) {
var count = 0;
var timer = window.setInterval(function () {
count++;
if (count <= 10) {
ele.style.width = cur + count + "px";
} else {
window.clearInterval(timer);
}
}, 13);
}
17、原型链数组去重加排序
Array.prototype.distinct = function () {
var obj = {};
//this就是当前要操作的那个数组
for (var i = 0; i < this.length; i++) {
var cur = this[i];
if (obj[cur] == cur) {
this.splice(i, 1);
i--;
continue;
}
obj[cur] = cur;
}
return this;
}
var ary = [1, 2, 3, 2, 3, 2, 1, 3, 0, 4, 5, 6, 2, 3, 4, 5, 6, 2, 3, 4, 8, 9, 0, 211, 3, 4, 45];
ary.distinct().sort(function (a, b) {
return a - b;
});//链式写法
console.log(ary);
18、将json格式的对象，转化为json格式的字符串
var str=‘{‘;
for(var key in obj){
if(key=="student"){
str+=‘"‘+key+‘":‘;
str+=‘[‘;
for(var i=0;i<obj[key].length;i++){
str+=‘"‘+obj[key][i]+‘",‘;
}
str+=‘‘;
str+=‘]‘;
}else{
str+=‘"‘+key+‘":"‘+obj[key]+‘",‘;
}
}
str+=‘}‘;
console.log(str);
var str=‘{"name":"zhufeng","student":["崔国伟","刘骥","刘洁琼","樊庆堂"]}‘;//只有属性名是""才是json格式的字符串
console.log(tools.formatJSON(str));
19、求数组中的最大值最小值
方案1：假设法
假设第一个是最大的，然后和后面的每一项去比较，如果后面的比我们假设的大，说明我们假设的错了，让max变成当前最大的那个数就好了
var max = ary[0], min = ary[0];
for (var i = 1; i < ary.length; i++) {
var cur = ary[i];
if (cur > max) {
max = cur;
}
}
for (var i = 1; i < ary.length; i++) {
var cur = ary[i];
if (cur < min) {
min = cur;
}
}
方案2：
用Math.max和Math.min
这两个方法默认是比较多个数之间的最大值和最小值，需要把传递的参数一个个穿进来可以，不能直接的传一个数组
var ary = [1, 2, 3, 4, 5, 2, 3, 4, 5, 1, 2, 6];
var max = Math.max.apply(null, ary);
var min = Math.min.apply(null, ary);
方案3：
先排序，头尾就是我们想要的
ary.sort(function (a, b) {
return a - b;
});
console.log(ary[0]);
console.log(ary[ary.length-1]);
20、求平均数
function average1(){
var a=arguments;
[].sort.call(a,function(a,b){return a-b});
[].pop.call(a);
[].shift.call(a);
var count=null;
var count=eval([].join.call(a,"+"));
return count/a.length;
}
function average(){
var a=DOM.listToArray(arguments);
a.sort(function(a,b){return a-b});
a.pop();
a.shift();
var count=eval(a.join("+"));
return count/a.length;
}
var score=average(90,88,94,78,84,69,77,86,89,66);
21、排序
var oLis=document.getElementsByTagName(
"li");
var a=[];
for(var i=0;i<oLis.length;i++){
a.push(oLis[i]);
}
a,oLis
var list=[{name:"a",age:33},{name:"b",age:97},{name:"c",age:22},{name:"d",age:13}];
list.sort(function(a,b){return a.age-b.age});
list.sort(function (a,b){return -(a.name.charCodeAt(0)-b.name.charCodeAt(0))});
//localeCompare
a.sort(function(a,b){return a.innerHTML-b.innerHTML})
var parent=a[0].parentNode;//就是为了得到ul，
for(var i=0;i<a.length;i++){
按着数据里的顺序，把这些li重新移动一遍;
alert(i);
parent.appendChild(a[i]);
a[i].parentNode.appendChild(a[i])
}
;[1,19,21,23,]
22、把DOM集合转为数组
1）var oLis=document.getElementsByTagName("li");
var a=[].slice.call(oLis,0);
Array.prototype.slice2=function(b,e){
b=b||0;
e=e||this.length;
var a=[];
for(;b<e;b++){
a.push(this[b]);
}
return a;
}
var ary=[];
ary.slice2(3,9)
2）var a=DOM.listToArray(oLis);
a.sort(function(a,b){return a.innerHTML-b.innerHTML});
var oUl=a[0].parentNode;//找到Li的父亲节点
for(var i=0;i<a.length;i++){
oUl.appendChild(a[i]);
}
23、异常捕获机制
try{
alert("abcd");
}catch(abcd){
console.log(abcd);
alert("try里出错了");
throw new Error("我是自己制造的麻烦");
}finally{
alert("不管上边有千万个错，我都要一如既往的执行");
}
24、正则trim、substr
~function () {
var strPro = String.prototype;
//去除字符串首尾空格
strPro.myTrim = function () {
return this.replace(/(^\s*|\s*$)/g, "");
}
//区分汉字和字母的截取字符串
strPro.mySub = function () {
var len = arguments[0] || 10;
var isD = arguments[1] || false;//默认是不加的，想加的话传true
var str = "", n = 0;
for (var i = 0; i < this.length; i++) {
var s = this.charAt(i);
/[\u4e00-\u9fa5]/.test(s) ? n += 2 : n++;
if (n > len) {
isD ? str += "..." : void 0;
break;
}
str += s;
}
return str;
}
}();
var str = " 【网络营销】网络营销是asd一种利用互联网的营销形式，建立在互联网的基础上，以线上营销为导向，网络为工具，由营销人员利用专业的网络营销工具，面向广大网民开展一系列营销活动的新型营销方式。虽然网络营销很受大小企业喜欢，但真正能够让网络营销产生执行力的却少之又少，该如何增加其执行力？ ";
str = str.myTrim();
str = str.mySub(38, true);
25、表单验证
String.prototype.myTrim = function () {
return this.replace(/(^\s*|\s*$)/g, "");
}
var oEmail = document.getElementById("txtEmail");
var oSpan = document.getElementById("emailError");
oEmail.onfocus = function () {
var val = this.value.myTrim();
if (val === this.getAttribute("default")) {
this.value = "";
}
}
oEmail.onblur = function () {
var val = this.value.myTrim();
if (val === "") {
this.value = this.getAttribute("default");
oSpan.innerHTML = "";
return;
}
check(val);
}
oEmail.onkeyup = function () {
var val = this.value.myTrim();
check(val);
}
function check(val) {
var reg = /^(?:\w|\.|-)+@(?:[0-9a-zA-Z-]+)(?:\.[0-9a-zA-z]+){1,2}$/;
if (!reg.test(val)) {
oSpan.innerHTML = "您输入的邮箱格式有误！";
oSpan.className = "";
} else {
oSpan.innerHTML = "输入正确！";
oSpan.className = "c";
}
}
26、返回顶部
function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
var ch = getWin("clientHeight"), oDiv = document.getElementById("div1");
window.onscroll = function () {
var sT = getWin("scrollTop");
if (sT >= ch) {
oDiv.style.display = "block";
} else {
oDiv.style.display = "none";
}
}
function move() {
oDiv.style.display = "none";
window.clearTimeout(this.timer);
oDiv.timer = null;
document.body.scrollTop -= 300;
if ((document.body.scrollTop - 300) <= 0) {
document.body.scrollTop = 0;
return;
}
oDiv.timer = window.setTimeout(move, 10);
}
oDiv.onclick = move;
27、多张图片延迟加载
var tool = new Tool;
var oDiv = document.getElementById("con"), oUl = oDiv.getElementsByTagName("ul")[0], oTop = document.getElementById("top");
//init data
var frg = document.createDocumentFragment();
for (var i = 0; i < data.length; i++) {
var cur = data[i];
var oLi = document.createElement("li");
oLi.innerHTML = "<img src=‘img/ddd.jpg‘ trueImg=‘" + cur.img + "‘ alt=‘‘/><p>" + cur.txt + "</p>";
frg.appendChild(oLi);
}
oUl.appendChild(frg);
window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片
window.onscroll = loadImg;//当滚动的时候，还要加载之前没有显示的图片，问题：之前加载过的图片存在多次重新的加载的问题
oTop.onclick = toTop;
function loadImg() {
var winTop = getWin("clientHeight") + getWin("scrollTop");
var images = oUl.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var cur = images[i], curTop = tool.offset(cur).top, trueImg = cur.getAttribute("trueImg");
if (curTop <= winTop && !cur.isLoad) {
showTrueImg(cur, trueImg);
}
}
//回到顶部
var cH = getWin("clientHeight");
if (!oTop.isMove) {
oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";
}
}
function showTrueImg(cur, trueImg) {
var oImg = new Image;
oImg.src = trueImg;
oImg.onload = function () {
cur.src = trueImg;
cur.isLoad = true;
move(cur);
}
}
function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
//jQuery-->fadeIn
function move(curEle) {
var count = 0;
_move();
function _move() {
window.clearTimeout(curEle.timer);
count += 0.02;
if (count >= 1) {
tool.setCss(curEle, "opacity", 1);
return;
}
tool.setCss(curEle, "opacity", count);
curEle.timer = window.setTimeout(_move, 10);
}
}
function toTop() {
this.style.display = "none";
this.isMove = true;
var count = document.body.scrollTop, cur = this;
_toTop();
function _toTop() {
window.clearTimeout(cur.timer);
if (count - 200 <= 0) {
document.body.scrollTop = 0;
cur.isMove = false;
return;
}
count -= 200;
document.body.scrollTop = count;
cur.timer = window.setTimeout(_toTop, 10);
}
}
28、静态图片延迟加载
var tool = new Tool;
var oDiv = document.getElementById("con"), oUl = oDiv.getElementsByTagName("ul")[0], oTop = document.getElementById("top");
//init data
var frg = document.createDocumentFragment();
for (var i = 0; i < data.length; i++) {
var cur = data[i];
var oLi = document.createElement("li");
oLi.innerHTML = "<img src=‘img/ddd.jpg‘ trueImg=‘" + cur.img + "‘ alt=‘‘/><p>" + cur.txt + "</p>";
frg.appendChild(oLi);
}
oUl.appendChild(frg);
window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片
window.onscroll = loadImg;//当滚动的时候，还要加载之前没有显示的图片，问题：之前加载过的图片存在多次重新的加载的问题
oTop.onclick = toTop;
function loadImg() {
var winTop = getWin("clientHeight") + getWin("scrollTop");
var images = oUl.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var cur = images[i], curTop = tool.offset(cur).top, trueImg = cur.getAttribute("trueImg");
if (curTop <= winTop && !cur.isLoad) {
showTrueImg(cur, trueImg);
}
}
//回到顶部
var cH = getWin("clientHeight");
if (!oTop.isMove) {
oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";
}
}
function showTrueImg(cur, trueImg) {
var oImg = new Image;
oImg.src = trueImg;
oImg.onload = function () {
cur.src = trueImg;
cur.isLoad = true;
move(cur);
}
}
function getWin(attr) {
return document.documentElement[attr] || document.body[attr];
}
//jQuery-->fadeIn
function move(curEle) {
var count = 0;
_move();
function _move() {
window.clearTimeout(curEle.timer);
count += 0.02;
if (count >= 1) {
tool.setCss(curEle, "opacity", 1);
return;
}
tool.setCss(curEle, "opacity", count);
curEle.timer = window.setTimeout(_move, 10);
}
}
function toTop() {
this.style.display = "none";
this.isMove = true;
var count = document.body.scrollTop, cur = this;
_toTop();
function _toTop() {
window.clearTimeout(cur.timer);
if (count - 200 <= 0) {
document.body.scrollTop = 0;
cur.isMove = false;
return;
}
count -= 200;
document.body.scrollTop = count;
cur.timer = window.setTimeout(_toTop, 10);
}
}
29、动画原理
var box = document.getElementById("box"), btnLeft = document.getElementById("btnLeft"), btnRight = document.getElementById("btnRight");
var cW = document.documentElement.clientWidth || document.body.clientWidth;
var tool = new Tool;
function move(target) {
var start = tool.getCss("left", box), count = start;
_move();
function _move() {
clearTimeout(box.timer);
if (start < target) {//右
if (count + 10 >= target) {
tool.setCss(box, "left", target);
return;
}
count += 10;
tool.setCss(box, "left", count);
} else if (start > target) {//左
if (count - 10 <= target) {
tool.setCss(box, "left", target);
return;
}
count -= 10;
tool.setCss(box, "left", count);
} else {
return;
}
box.timer = setTimeout(_move, 10);
}
}
var tarR = cW - box.offsetWidth, tarL = 0;
btnLeft.onclick = function () {
move(tarL);
}
btnRight.onclick = function () {
move(tarR);
}
30、无缝滚动效果
var ele=document.getElementById("content");
var timer=null;
var strText=ele.innerHTML;
function effect(){
var t=ele.scrollTop;
ele.scrollTop++;
if(t==ele.scrollTop){
ele.innerHTML+=strText;
}
}
timer=window.setTimeout(arguments.callee,10);
ele.onclick=function(){
if(timer){
clearTimeout(timer);
timer=null;
}else{
effect();
}
}
标签：
原文地址：http://www.cnblogs.com/angelaBeibei/p/5032971.html
