亲，您未登录哦！ 登录 | 注册
首页  |  社区  |  工具箱  |  代码库  |  博客  |  招聘  |  文章  |  新闻  |  下载  |  读书
回 帖 发 新 帖 刷新版面

主题：元素事件绑定

啊远 [专家分：2610] 发布于 2006-01-04 14:36:00

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var ing = 0;
var ink = 0;
var index = 0;
var DR_Object = new Array();

function mouseMove(){
    var tmpStr1 = new String("");
    var tmpStr2 = new String("");

    tmpStr1 = (window.event.x).toString();
    tmpStr2 = "Mouse Xpos: " + tmpStr1 + "    ";
    tmpStr1 = (window.event.y).toString();
    tmpStr2 = tmpStr2 + "Mouse Ypos: " + tmpStr1 + "\n";    
    Status.innerText = tmpStr2;
}

function DR(ID, BGCOLOR, COLOR, TITLE, LEFT, TOP, LAYER){

    // Initialize
    var tmpStr = new String("");
    tmpStr = "<DIV ID=\"" + (ID).toString() + "\" ";
    tmpStr = tmpStr + "STYLE=\"position: absolute; ";
    tmpStr = tmpStr + "left: " + (LEFT).toString() + "px; ";
    tmpStr = tmpStr + "top: " + (TOP).toString() + "px; ";
    tmpStr = tmpStr + "background-color: " + (BGCOLOR).toString() + "; ";
    tmpStr = tmpStr + "color: " + (COLOR).toString() + "; ";
    tmpStr = tmpStr + "width: 100px; ";
    tmpStr = tmpStr + "height: 25px; ";
    tmpStr = tmpStr + "z-index: " + (LAYER).toString() + "; ";
    tmpStr = tmpStr + "visibility: hidden; ";
    tmpStr = tmpStr + "cursor: hand; ";
    tmpStr = tmpStr + "\">"    
    tmpStr = tmpStr + "<P STYLE=\"font-family: Verdana;";
    tmpStr = tmpStr + "font-size: 11px; ";
    tmpStr = tmpStr + "font-weight: bold; ";
    tmpStr = tmpStr + "text-align: center; ";
    tmpStr = tmpStr + "margin: 4px; \">";
    tmpStr = tmpStr + TITLE;
    tmpstr = tmpStr + "</P>"
    tmpStr = tmpStr + "</DIV>"
    document.all("DEC").insertAdjacentHTML("BeforeEnd", tmpStr);

    // property

    this.ID     = ID;
    this.COLOR    = COLOR;
    this.BGCOLOR     = BGCOLOR;
    this.left    = LEFT;
    this.top    = TOP;
    this.layer     = LAYER;
    this.visible    = false;
    this.fy        = "DOWN";
    this.fX        = "RIGHT";

    // methods
    
    this.Show    = DR_Show;
    this.Hidden    = DR_Hidden;
    this.Move    = DR_Move;

    // Events
    this.onClick    = DR_OnClick;
    this.JHColor    = DR_JHColor;

    ' 晕!原来事件还可以这样绑定!
    document.all(this.ID).onclick = this.onClick;
    document.all(this.ID).onmouseover = this.JHColor;
    document.all(this.ID).onmouseout = this.JHColor;
}

function DR_Move(){
    document.all(this.ID).style.left = this.left;
    document.all(this.ID).style.top = this.top;
}

function DR_Show(){
    document.all(this.ID).style.visibility = "visible";
    this.visible = true;
}

function DR_Hidden(){
    document.all(this.ID).style.visibility = "hidden";
    this.visible = false;
}

function DR_OnClick(){
    var i;
    var thisEventObject;
    if(window.event.srcElement.tagName == "P"){
        thisEventObject = window.event.srcElement.parentElement;
    }else{
        thisEventObject = window.event.srcElement;
    }
    i = parseInt(thisEventObject.id);    
}

function DR_JHColor(ID){
    var bColor;
    var fColor;
    var thisEventObject;
    if(window.event.srcElement.tagName == "P"){
        thisEventObject = window.event.srcElement.parentElement;
    }else{
        thisEventObject = window.event.srcElement;
    }
    bColor = thisEventObject.style.backgroundColor;
    fColor = thisEventObject.style.color;
    thisEventObject.style.color = bColor;
    thisEventObject.style.backgroundColor = fColor;
}
function ck(){
    var i;    
    for( i=1; i <= index ; i++ ){
        if( DR_Object[i].visible == true ){
            if( DR_Object[i].fy == "DOWN" ){
                DR_Object[i].top = DR_Object[i].top + 5;
                ing++;
                if( DR_Object[i].top + 25 >= parseInt(document.all("DEC").style.height)){
                    DR_Object[i].top = parseInt(document.all("DEC").style.height) - 25;
                    DR_Object[i].fy = "UP";
                }
            }else{
                DR_Object[i].top = DR_Object[i].top - 5;
                ing++;
                if( DR_Object[i].top <= 0){
                    DR_Object[i].top = 0;
                    DR_Object[i].fy = "DOWN";
                }
            }
            if( DR_Object[i].fx == "RIGHT" ){
                DR_Object[i].left = DR_Object[i].left + 5;
                ink++;
                if( DR_Object[i].left + 100 >= parseInt(document.all("DEC").style.width)){
                    DR_Object[i].left = parseInt(document.all("DEC").style.width) - 100;
                    DR_Object[i].fx = "LEFT";
                }
            }else{
                DR_Object[i].left = DR_Object[i].left - 5;
                ink++;
                if( DR_Object[i].left <= 0){
                    DR_Object[i].left = 0;
                    DR_Object[i].fx = "RIGHT";
                }
            }
            if( ing >= 2000){
                if( parseInt(Math.random() * 2) == 1){
                    DR_Object[i].fy = "UP" ? "DOWN" : "UP";
                    ing = 0;
                }else{
                    DR_Object[i].fy = "DOWN" ? "UP" : "DOWN";
                    ing = 0;
                }
            }
            if( ink >= 2000){
                if( parseInt(Math.random() * 2) == 1){
                    DR_Object[i].fx = "RIGHT" ? "LEFT" : "RIGHT";
                    ink = 0;
                }else{
                    DR_Object[i].fx = "RIGHT" ? "LEFT" : "RIGHT";
                    ink = 0;
                }
            }
            DR_Object[i].Move();
        }
    }
    setTimeout("ck();", 100);
}
function init(){
    index++;
    DR_Object[index] = new DR(index + "L", "yellow", "lime", "button" + index, 0, 0, index);
    DR_Object[index].Show();
    DR_Object[index].Move()
}
/-->
</SCRIPT>
</HEAD>
<BODY STYLE="background-color: rgb(80,20,0);
    margin-left: 0;
    margin-top: 0;"
      onLoad="ck();"
      onClick="init();"
      onMouseMove="mouseMove();">
<DIV STYLE="position: absolute;
    left: 0px;
    top: 0px;">
<DIV STYLE="background-color: yellow;
    color: rgb(80,20,0);
    width: 300px;
    height: 25px;
    filter: Alpha(opacity=50);">
  <P STYLE="font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin: 4px;">
    THIS IS MOUSE POSITION MESSAGES
  </P>
</DIV>
<DIV STYLE="background-color: white;
    color: rgb(80,20,0);
    width: 300px;
    height: 25px;">
  <P ID="Status"
     STYLE="font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    margin: 4px;">
    Mouse position X:   Mouse position Y:
  </P>
</DIV>
</DIV>
<DIV ID="DEC"
     STYLE="position: absolute;
    left: 150;
    top: 130;
    width: 700;
    height: 400;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    background-color: black;">
</DIV>
</BODY>
</HTML>
本帖地址：  http://bbs.pfan.cn/post/134795.html

回复列表 （共5个回复）

沙发

啊远 [专家分：2610] 发布于 2006-01-04 14:49:00

碰撞检测的例子!大家看看能不能改善一下！

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var ing = 0;
var ink = 0;
var index = 0;
var DR_Object = new Array();

function mouseMove(){
    var tmpStr1 = new String("");
    var tmpStr2 = new String("");

    tmpStr1 = (window.event.x).toString();
    tmpStr2 = "Mouse Xpos: " + tmpStr1 + "    ";
    tmpStr1 = (window.event.y).toString();
    tmpStr2 = tmpStr2 + "Mouse Ypos: " + tmpStr1 + "\n";    
    Status.innerText = tmpStr2;
}

function DR(ID, BGCOLOR, COLOR, TITLE, LEFT, TOP, LAYER){

    // Initialize
    var tmpStr = new String("");
    tmpStr = "<DIV ID=\"" + (ID).toString() + "\" ";
    tmpStr = tmpStr + "STYLE=\"position: absolute; ";
    tmpStr = tmpStr + "left: " + (LEFT).toString() + "px; ";
    tmpStr = tmpStr + "top: " + (TOP).toString() + "px; ";
    tmpStr = tmpStr + "background-color: " + (BGCOLOR).toString() + "; ";
    tmpStr = tmpStr + "color: " + (COLOR).toString() + "; ";
    tmpStr = tmpStr + "width: 100px; ";
    tmpStr = tmpStr + "height: 25px; ";
    tmpStr = tmpStr + "z-index: " + (LAYER).toString() + "; ";
    tmpStr = tmpStr + "visibility: hidden; ";
    tmpStr = tmpStr + "cursor: hand; ";
    tmpStr = tmpStr + "\">"    
    tmpStr = tmpStr + "<P STYLE=\"font-family: Verdana;";
    tmpStr = tmpStr + "font-size: 11px; ";
    tmpStr = tmpStr + "font-weight: bold; ";
    tmpStr = tmpStr + "text-align: center; ";
    tmpStr = tmpStr + "margin: 4px; \">";
    tmpStr = tmpStr + TITLE;
    tmpstr = tmpStr + "</P>"
    tmpStr = tmpStr + "</DIV>"
    document.all("DEC").insertAdjacentHTML("BeforeEnd", tmpStr);

    // property

    this.ID     = ID;
    this.COLOR    = COLOR;
    this.BGCOLOR     = BGCOLOR;
    this.left    = LEFT;
    this.top    = TOP;
    this.layer     = LAYER;
    this.visible    = false;
    this.fy        = "DOWN";
    this.fX        = "RIGHT";

    // methods
    
    this.Show    = DR_Show;
    this.Hidden    = DR_Hidden;
    this.Move    = DR_Move;

    // Events
    this.onClick    = DR_OnClick;
    this.JHColor    = DR_JHColor;

    document.all(this.ID).onclick = this.onClick;
    document.all(this.ID).onmouseover = this.JHColor;
    document.all(this.ID).onmouseout = this.JHColor;
}

function DR_Move(){
    document.all(this.ID).style.left = this.left;
    document.all(this.ID).style.top = this.top;
    var i;
    
    for(i=1; i <= index; i++){
        if(DR_Object[i].ID != this.ID){
            if(DR_Object[i].left < this.left + 100 && DR_Object[i].left + 100 > this.left && DR_Object[i].top + 25 < this.top + 25 && DR_Object[i].top + 25 > this.top){
                DR_Object[i].fx = "LEFT";
                DR_Object[i].fy = "UP";
                this.fx = "RIGHT";
                this.fy = "DOWN";
            }
        }
    }
}

function DR_Show(){
    document.all(this.ID).style.visibility = "visible";
    this.visible = true;
}

function DR_Hidden(){
    document.all(this.ID).style.visibility = "hidden";
    this.visible = false;
}

function DR_OnClick(){
    var i;
    var thisEventObject;
    if(window.event.srcElement.tagName == "P"){
        thisEventObject = window.event.srcElement.parentElement;
    }else{
        thisEventObject = window.event.srcElement;
    }
    i = parseInt(thisEventObject.id);    
}

function DR_JHColor(ID){
    var bColor;
    var fColor;
    var thisEventObject;
    if(window.event.srcElement.tagName == "P"){
        thisEventObject = window.event.srcElement.parentElement;
    }else{
        thisEventObject = window.event.srcElement;
    }
    bColor = thisEventObject.style.backgroundColor;
    fColor = thisEventObject.style.color;
    thisEventObject.style.color = bColor;
    thisEventObject.style.backgroundColor = fColor;
}
function ck(){
    var i;    
    for( i=1; i <= index ; i++ ){
        if( DR_Object[i].visible == true){
            if( DR_Object[i].fy == "DOWN" ){
                DR_Object[i].top = DR_Object[i].top + 1;
                ing++;
                if( DR_Object[i].top + 25 >= parseInt(document.all("DEC").style.height)){
                    DR_Object[i].top = parseInt(document.all("DEC").style.height) - 25;
                    DR_Object[i].fy = "UP";
                }
            }else{
                DR_Object[i].top = DR_Object[i].top - 1;
                ing++;
                if( DR_Object[i].top <= 0){
                    DR_Object[i].top = 0;
                    DR_Object[i].fy = "DOWN";
                }
            }
            if( DR_Object[i].fx == "RIGHT" ){
                DR_Object[i].left = DR_Object[i].left + 1;
                ink++;
                if( DR_Object[i].left + 100 >= parseInt(document.all("DEC").style.width)){
                    DR_Object[i].left = parseInt(document.all("DEC").style.width) - 100;
                    DR_Object[i].fx = "LEFT";
                }
            }else{
                DR_Object[i].left = DR_Object[i].left - 1;
                ink++;
                if( DR_Object[i].left <= 0){
                    DR_Object[i].left = 0;
                    DR_Object[i].fx = "RIGHT";
                }
            }
            DR_Object[i].Move();
        }
    }
    setTimeout("ck();", 1);
}
function init(){
    if(window.event.button == 1){
        index++;
        DR_Object[index] = new DR(index + "L", "yellow", "lime", "button" + index, 0, 0, index);
        DR_Object[index].Show();
        DR_Object[index].Move();
    }else{
        index++;
        DR_Object[index] = new DR(index + "L", "red", "yellow", "button" + index, 0, 0, index);
        DR_Object[index].Show();
        DR_Object[index].Move();
    }
}
/-->
</SCRIPT>
</HEAD>
<BODY STYLE="background-color: rgb(80,20,0);
    margin-left: 0;
    margin-top: 0;"
      onLoad="ck();"
      onMouseDown="init();"
      onMouseMove="mouseMove();">
<DIV STYLE="position: absolute;
    left: 0px;
    top: 0px;">
<DIV STYLE="background-color: yellow;
    color: rgb(80,20,0);
    width: 300px;
    height: 25px;
    filter: Alpha(opacity=50);">
  <P STYLE="font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin: 4px;">
    THIS IS MOUSE POSITION MESSAGES
  </P>
</DIV>
<DIV STYLE="background-color: white;
    color: rgb(80,20,0);
    width: 300px;
    height: 25px;">
  <P ID="Status"
     STYLE="font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    margin: 4px;">
    Mouse position X:   Mouse position Y:
  </P>
</DIV>
</DIV>
<DIV ID="DEC"
     STYLE="position: absolute;
    left: 150;
    top: 130;
    width: 700;
    height: 400;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    background-color: black;">
</DIV>
</BODY>
</HTML>

板凳

啊远 [专家分：2610] 发布于 2006-01-05 17:56:00

晕!是我写的太烂了! 还是怎么了! 没人顶! 难道这已经很低级了?

3 楼

成天 [专家分：80] 发布于 2006-01-17 11:56:00

我不太会JS 不过我觉得可以把出 按扭的坐标可以改动一下 用随机的形式做个变量

还有 做个判断,当按扭在2000豪秒 持续坐标范围 +2 -2 时候 自动给他加上一个数使他转变方向

遇见!请多指教

4 楼

一个人住 [专家分：3290] 发布于 2006-01-17 13:48:00

不是你的问题低级，是你发的代码太多，根本不想去看~~~~~~把重点发出来就行了~

5 楼

啊远 [专家分：2610] 发布于 2006-01-17 17:09:00

我重点就是想告诉你们！ 元素的事件邦定可以这样做是很方便的！

这种方法可以让程序规范很多！

我来回复

您尚未登录，请登录后再回复。点此登录或注册

程序员工具箱 new

  • 技术文摘
  • 在线程序日志
  • LESS在线编译
  • 通用文本转换
  • Meta标签生成工具
  • 文本转图片
  • PHP手册
  • HTTP状态码
  • IP所在地查询
  • 身份证归属地查询
  • 更多工具

    • 代码片段

  • 模拟键盘（不可按）
  • 碰撞的唐三
  • 精彩奥运热点赛事的实时采集
  • 获取天气动态信息
  • 文件查找
  • python大数据抓取京东电脑销量数据
  • 爬虫技术不仅仅支持数据采集
  • 抓取脉脉APP上的职业信息
  • 爬虫中多线程的运用
  • 四则运算以及一元二次方程
  • 欢迎来共享你的NB代码

    • 本版新帖

  • 玩转颜色3.1特别版发布了，超酷！！
  • 网页中实现qq在线离线效果
  • Win按钮型导航栏
  • HTML中屏蔽CTRL-N的代码
  • 网络防护知识--转贴
  • 有人在ping你吗？
  • 防小黑客全攻略-转贴
  • 网络攻击--转贴
  • 想交Dreamweaver MX的朋友的请进
  • 各种网页播放器代码大全
  • [原创]用JavaScript算圆周率
  • [原创]用Javascript解八皇后问题
  • 求助？ 求助？ 求助？ 求助？
  • 我亲爱的朋友们~~~
  • 有这么好的事？