目录
目录
随机速度的打字机效果
效果
代码
引用到的知识点
利用定时器触发线程
利用事件触发线程
线程
随机数
快捷链接
随机速度的打字机效果
效果
代码
html部分
HiShop网店代理分销系统
下载
Hishop.5.2.BETA2版主要更新： [修改] 进一步优化了首页打开速度 [修改] 美化了默认模板 [修改] 优化系统架构,程序标签及SQL查询效率,访问系统页面的速度大大提高 [修改] 采用了HTML模板机制,实现了前台模板可视化编辑,降低模板制作与修改的难度. [修改] 全新更换前后台AJAX技术框架,提升了用户操作体验. 店铺管理 [新增] 整合TQ在线客服 [修改] 后台广告位增加
typeWriter
实现打字机效果
js部分
window.onload=function(){
var twArr = [],//打字的数据库队列
twing = false,//用于判断打字机的线程是否开启
twID = [],//打字机线程ID
twTime = 10,//用于定时调用的时间
obj1 = document.getElementById("typeWriterEffect"),
obj2 = document.getElementById("typeWriterEffect2"),
twEffect = function(e,str){//添加显示的元素
twArr.push({ "context":e,//目标元素上下文
"str":str,//显示的元素
"lening":0,//截取的进度
"maxL":str.length//最大的进度
})
},
closeTw = function(){//关闭定时调用
clearTimeout(twID);//关闭线程
twing = true;
},
twUi = function(){//定时调用
var i = 0,
L = twArr.length,
eing = null; for (var i = 0; i < L; i++) {
eing = twArr[i]//效果同时加载多对象数组
eing.lening++; if (eing.lening>eing.maxL) {//不设置关闭线程则打字效果循环
eing.lening = 0;
}
eing.context.innerHTML = eing.str.substring(0,eing.lening)+"_";
} var num = Math.floor(Math.random()*50+1);//1-50个随机数
console.log(num);
twID = setTimeout(twUi,num*twTime);//开启线程
if(twID==eing.maxL){//到达最后关闭线程
closeTw();
}
}, //开启定时调用，参数为设置定时调用的时间
startTw = function (twTime) {
if (!twing) {//如果没有开启才开启
twTime = twTime;
twUi();//开始定时调用
}
}; //设置内容对象数组
twEffect(obj1,"这就是打字机效果,打字速度随机哦！！！！！"); //开始调用线程
startTw(twTime);
}引用到的知识点
线程
js的单线程（single threaded）和异步（asynchronous）的，但是并不互相矛盾，js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式使得js具备了异步的属性。
setTimeout(function(){
console.log(time is out);
}，50）;有的人就会问到定时器setTimeout和setinterval 的区别：
setTimeout(表延时时间)在执行时,是在载入后延迟指定时间后只去执行一次表达式,
而setInterval(表交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
利用定时器触发线程
（缺点：耦合度高）
function f1(callback){setTimeout(function(){
// f1 的代码
callback();
},0);
}
f1(f2);利用事件触发线程
（缺点：可以通过绑定不同的事件，实现不同的回调函数，如果应用这种方法过多，不利于阅读程序）
$f1.on('custom',f2); //这里绑定事件以jQuery写法为例function f1(){setTimeout(function(){
// f1的代码
$f1.trigger('custom');
},0);
}随机数
Math.random()取0-1随机数
同理拓展例子：
Math.random()*10取0-10随机数（包括一大堆小数点）
Math.random()*10+1取1-10随机数
Math.random()*10+2取2-10随机数
Math.random()*899+100取100-999随机数
其中常用：Math.floor(）只取随机数整数部分
相关文章：
相关视频：
