web worker的实例演示–线程的使用

因为html5的web worker可以把运算放在后台去执行,这样运算就可以正常执行了!~ 现在来试试

输入代码:

html的显示页面

————————————————————————————————————

<!DOCTYPE HTML>
<html>
<head>
<title>线程的使用</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
var worker=new Worker(“calculate.js”);
worker.onmessage=function(event){
//消息存放在data属性中
alert(“合计值为:”+event.data+”.”);
};

function calculate(){
var num=parseInt(document.getElementById(“num”).value,10);
worker.postMessage(num);
}

</script>
</head>
<body>
<center>
<h1>从1到给定的数的求和运算</h1>
输入数值:<input type=”text” id=”num”/>
<button onclick=”calculate()”>计算</button>
<center>
</body>
</html>

——————————————————————————————————–

线程处理的js代码:

———————————————————————————————————–

onmessage=function(event){
var num=event.data;
var result=0;
for(var i=0;i<=num;i++){
result+=i;
}
postMessage(result);
}

—————————————————————————————————————–

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/worker.htm

共有 0 条评论

Top