动态显示结果解决思路
日期：2014-05-18 浏览次数：20764 次
动态显示结果
想在网页上动态显示变化的值（如：在地图上拉一个框，显示这个框的面积）
类似显示鼠标当前坐标
显示地点位置在table 里
想过
在 <script> 里用document.write( " <table> ............. </talbe> ");
但我想把这个table放在 <script> 外 ，有没办法？
------解决方案--------------------
给你一个例子,希望对你有用
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 鼠标拖动求面积 </title>
<script>
var down_x=0;
var down_y=0;
var mousedown=false;
document.onmousedown=function a(){
down_x=event.x;
down_y=event.y;
mousedown=true;
}
document.onmouseup=function b(){
var width=Math.abs(event.x-down_x);
var height=Math.abs(event.y-down_y);
document.all.area.value=width*height;
mousedown=false;
}
document.onmousemove=function c(){
if(mousedown){
document.all.table1.border=1;
if(event.x <down_x)
document.all.table1.style.left=event.x;
else
document.all.table1.style.left=down_x;
if(event.y <down_y)
document.all.table1.style.top=event.y;
else
document.all.table1.style.top=down_y;
document.all.table1.style.width=Math.abs(event.x-down_x);
document.all.table1.style.height=Math.abs(event.y-down_y);
}
}
</script>
</head>
<body>
<table id=table1 bcellspacing= "0 " border=0 cellPadding=1 bordercolor= "#7091C2 " disabled=true style= "position:absolute;top:0px;left:0px;height:0px;width:0px "> <tr> <td> </td> </tr> </table>
面积为: <input type=text id=area name=area value= "0 ">
</body>
</html>
想在网页上动态显示变化的值（如：在地图上拉一个框，显示这个框的面积）
类似显示鼠标当前坐标
显示地点位置在table 里
想过
在 <script> 里用document.write( " <table> ............. </talbe> ");
但我想把这个table放在 <script> 外 ，有没办法？
------解决方案--------------------
给你一个例子,希望对你有用
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 鼠标拖动求面积 </title>
<script>
var down_x=0;
var down_y=0;
var mousedown=false;
document.onmousedown=function a(){
down_x=event.x;
down_y=event.y;
mousedown=true;
}
document.onmouseup=function b(){
var width=Math.abs(event.x-down_x);
var height=Math.abs(event.y-down_y);
document.all.area.value=width*height;
mousedown=false;
}
document.onmousemove=function c(){
if(mousedown){
document.all.table1.border=1;
if(event.x <down_x)
document.all.table1.style.left=event.x;
else
document.all.table1.style.left=down_x;
if(event.y <down_y)
document.all.table1.style.top=event.y;
else
document.all.table1.style.top=down_y;
document.all.table1.style.width=Math.abs(event.x-down_x);
document.all.table1.style.height=Math.abs(event.y-down_y);
}
}
</script>
</head>
<body>
<table id=table1 bcellspacing= "0 " border=0 cellPadding=1 bordercolor= "#7091C2 " disabled=true style= "position:absolute;top:0px;left:0px;height:0px;width:0px "> <tr> <td> </td> </tr> </table>
面积为: <input type=text id=area name=area value= "0 ">
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
