65.9K
CodeProject 正在变化。 阅读更多。
Home

Internet Explorer 6 中的多线程

Cipriano Valdezate
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.56/5 (5投票s)

2005 年 9 月 26 日

2分钟阅读

viewsIcon

38135

downloadIcon

326

如何在 Internet Explorer 6 中动态创建和销毁线程。

Sample Image

引言

这段 JavaScript 代码展示了如何在 Internet Explorer 中动态创建同时运行的线程。

背景

JavaScript 中没有创建和销毁线程的命令（即使有，我也不知道）。但这是可能的：线程可以在没有专门代码的情况下创建和销毁。这个例子展示了如何做到。

使用代码

当用户按下 Enter 键或单击鼠标时，会创建一个新的线程。这个线程在页面上抛出一个球，并反弹到窗口边缘。如果按下 Delete 键，则会销毁最后创建的线程，因此最后抛出的球会消失。这些球是六个 .gif 图像，它们唯一的区别在于颜色。以下是代码

<HTML>
<HEAD><TITLE>Multithreading in Internet Explorer 6</TITLE></HEAD>

<BODY onkeydown="KeyDown()" 
  onclick="GoAhead()" bgcolor="#CCFFFF">

</BODY>

</HTML>


<script language=javascript>

var IdCounter = 0                    //Keeps track of the Id of the balls
var Diameter = 40                    //Diameter of the ball
var IdSubstring04 = "Ball"

// Creates an empty object "Bola" (ball in Spanish)
function Bola(){
    this.id = IdSubstring04
    this.top = 0
    this.left = 0
    this.SignTop = 0
    this.SignLeft = 0
}


function KeyDown(){
    switch (window.event.keyCode){
    case 13 :
        document.body.click()
        break
    case 46 :
        RemoveBall()
        break
    }
}

// Click event procedure 
function GoAhead(){

    // I create a ball...
    var Ball = CreateBall()

    // and I throw it
    ThrowBall(Ball.id, Ball.left, Ball.top, 
              Ball.SignLeft, Ball.SignTop)
}



function RemoveBall(){

    // I get the last created ball...
    var old = document.body.lastChild

    // and I kill it
    if (old.id.substring(0, 4) == IdSubstring04) 
      document.body.removeChild(old)
      //or also: old.removeNode(true)
}

function RandomNorM(n, m){
    // Returns randomly either value n or m

    var x = Math.random()
    if (x < 0.5) {return n} else {return m}
}


function CreateBall(){
    var Ball = new Bola()

    var x = RandomNorM(0, 1)

    var Colors = new Array("red", "green", 
                           "blue", "cian", 
                           "gold", "yellow")

    // This conditional generates the start point of the ball
    // If x = 0 then the start point
    // can be any one of the top side of the window
    // If x = 1 then the start point
    // can be any one of the left side of the window
    if (x == 0){
        Ball.top = -1
        Ball.left = Math.floor(Math.random() * 
                         document.body.clientWidth) - Diameter
        if (Ball.left < 0) Ball.left = 0
    }
    else{
        Ball.top = Math.floor(Math.random() * 
                        document.body.clientHeight) - Diameter
        if (Ball.top < 0) Ball.top = 0
        Ball.left = -1
    }

    // Fields SignLeft and SignTop controls
    // the direction of the movement
    Ball.SignLeft = RandomNorM(-1, 1)
    Ball.SignTop = RandomNorM(-1, 1)

    // Field IdCounter 
    Ball.id += IdCounter
    IdCounter++

    // Building of the <span> tag
    var BallSpan = document.createElement("span")
    BallSpan.setAttribute("id", Ball.id)

    BallSpan.style.position = "absolute"
    BallSpan.style.left = Ball.left 
    BallSpan.style.top = Ball.top
    BallSpan.style.width = Diameter
    BallSpan.style.height = Diameter

    var ImageTag = document.createElement("img")
    ImageTag.setAttribute("src","Bolas/" + 
             Colors[Math.ceil(Math.random() * Colors.length) - 1] + 
             ".gif")
    ImageTag.setAttribute("width", Diameter)
    ImageTag.setAttribute("height", Diameter)

    BallSpan.appendChild(ImageTag)

    document.body.appendChild(BallSpan)

    return Ball
}


function ThrowBall(BallId, BallLeft, BallTop, SignLeft, SignTop){
    // Moves the ball

    var BallElement = document.getElementById(BallId)

    // Changes the direction of the ball so tah it bounces
    if (BallLeft + Diameter >= document.body.clientWidth) SignLeft =-1
    if (BallLeft <= 0) SignLeft = 1
    if (BallTop + Diameter >= document.body.clientHeight) SignTop =-1
    if (BallTop <= 0) SignTop = 1

    // Calculates the next position of the ball
    BallLeft += SignLeft
    BallTop += SignTop

    BallElement.style.left = BallLeft
    BallElement.style.top = BallTop

    var tilde = "'"
    var comma = ","

    // Executes indefinitely and recursively this function 
    // with the parameters of the new position 
    // so that the ball never stops itself
    window.setTimeout("ThrowBall(" + tilde + BallId + tilde + 
                      comma + BallLeft + comma + BallTop + comma + 
                      SignLeft + comma + SignTop + ")", 1)

}

</script>

函数 CreateBall 创建一个 Bola（西班牙语中是“球”）对象的实例，该对象由函数 Bola 定义。这个对象封装了 ID、球的位置（字段 top 和 left）以及运动方向（字段 SignLeft 和 SignTop），方向由带有正负号的数字 1 定义。ID 由计数器（IdCounter）生成，位置和方向以及球的颜色借助函数 RandomNorM(n, m) 生成，该函数随机返回其两个参数中的一个。有了所有这些信息，函数 CreateBall 创建一个如下所示的 <span> 标签

<span><img src="Bolas/red.gif" height=40 width=40></span>

这是将被其自身代码线程拖动的标签。最后，该函数返回 Bola 对象。

ThrowBall 负责移动 span 标签。它计算标签的下一个位置，考虑到反弹，然后，使用这个新的位置，无限期地调用自身，以便始终重新定位标签，从而产生运动效果。它不会停止，直到线程被销毁，或者显然，网页被关闭。销毁线程的函数是 RemoveBall，它通过 ID 获取最后创建的球并销毁该标签。删除线程后，IE 6 的状态栏会显示一条错误消息。我没有找到错误，但脚本确实有效。

© . All rights reserved.