87,910
社区成员
发帖
与我相关
我的任务
分享JS随机取数值并赋值
有一网页代码，代码我尽量简单点
就是给<div>中的top:与left:随机赋一个值，并给top、left设置取值范围，如top从100-1000中取值，left从200-600中取值，那JS代码要如何写？
<html>
<head><title>测试网页</title>
<script>
js代码写在这里
</script>
</head>
<body>
<div style="top: px left: px">
这里是文档内容1
</div>
</body>
</html>
就是给<div>中的top:与left:随机赋一个值，并给top、left设置取值范围，如top从100-1000中取值，left从200-600中取值，那JS代码要如何写？
...全文
请发表友善的回复…
发表回复
zoutuo 2010-03-14
- 打赏
- 举报
那你就用document.getElementByTagName吧 取出来再循环
abc54288 2010-03-14
- 打赏
- 举报
如果这个ID这是这样的形式，如<DIV onmousedown=getFocus(this) id=cc{content.id}>那JS中就不能直接指定某一个ID了，该如何办呢？
abc54288 2010-03-14
- 打赏
- 举报
如果这个ID是变化的怎么办？
xushilin000000000 2010-03-14
- 打赏
- 举报
<div id="d">我是学习的……
学无止境……
</div>
<script type="text/javascript">
function pos(){
var d=document.getElementById("d");
d.style.left=Math.round((Math.random()*900)+100);
d.style.top=Math.round((Math.random()*400)+200);
setTimeout("pos()",500);
}
window.onload=pos;
</script>
学无止境……
</div>
<script type="text/javascript">
function pos(){
var d=document.getElementById("d");
d.style.left=Math.round((Math.random()*900)+100);
d.style.top=Math.round((Math.random()*400)+200);
setTimeout("pos()",500);
}
window.onload=pos;
</script>
passself 2010-03-14
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test </title>
<style>
#test{
width:100px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script>
var top = Math.round(Math.random()*(1000-100))+100 + "" + "px";
var left = Math.round(Math.random()*(600-200))+200+ "" + "px";
document.getElementById("test").style.marginTop = top;
document.getElementById("test").style.marginLeft = left;
</script>
这个比较完整
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test </title>
<style>
#test{
width:100px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script>
var top = Math.round(Math.random()*(1000-100))+100 + "" + "px";
var left = Math.round(Math.random()*(600-200))+200+ "" + "px";
document.getElementById("test").style.marginTop = top;
document.getElementById("test").style.marginLeft = left;
</script>
这个比较完整
shan1119 2010-03-14
- 打赏
- 举报
divid.style.top=xxx;
divid.style.left=xxx;
divid.style.left=xxx;
shan1119 2010-03-14
- 打赏
- 举报
<script>
var top=Math.round(Math.random()*(1000-100))+100;
var left=Math.round(Math.random()*(600-200))+200;
alert(top+":"+left);
</script> 1．本书1~16章所附代码的运行环境
操作系统：Windows 2003、Windows XP Professional，或者Windows 2000
开发环境：Microsoft Visual Studio 2005
数据库：SQL Server 2005
Web服务器：IIS 5.1及以上版本
2．本书17~27章所附代码的运行环境
数据库采用MySQL 4.0及以上版本
服务器采用Tomcat 5.0 及以上版本
开发工具采用Eclipse 3.1以上版本
3．本书所附光盘范例
第1章（/C01/）
JsWeb 传统的JavaScript模式实现刷新
IframeWeb 基于框架的不刷新模式
AjaxWeb 基于Ajax的Web 2.0模式的刷新模式
AsyncAjaxSample Ajax异步调用的完整示例
第2章（/C02/）
2.1.htm 3段JS使用形式
2.2.htm 不同浏览器使用“JS文件
2.3.js 一个单独的JS测试文件
2.4.htm 完成层的换肤功能
2.5.htm 用于调试JS程序的测试代码
第3章（/C03/）
3.1.htm 判断浏览器类型的例子
3.2.htm 演示undefinded如何与null进行比较
3.3.htm 演示同名局部变量和全局变量的调用情况
3.4htm 引用数值型数据的例子
3.5.htm 数组使用的小例子
3.6.htm 一个字符串型转换为逻辑型数据的例子
3.7.htm 使用toLowerCase()方法进行转换的例子
3.8.htm 通过字符串类型来调用toLowerCase()方法
3.9.htm 对数字进行了复制、传递和比较
3.10.htm 复制、传递和比较一个对象
3.11.htm 对字符串进行比较
第4章（/C04/）
4.1.htm 简单表达式的例子
4.2.htm 两个字符串进行加操作的实例
4.3.htm 减号的取反功能
4.4.htm 变量赋值的例子
4.5.htm 把表达式赋值给一个变量的方法
4.6.htm 演示了两个符号的区别
4.7.htm “!==”和“===”的演示
4.8.htm 逗号表达式的连接应用
4.9.htm 对表达式进行“Void”运算
4.10.htm typeof运算符的使用
4.11.htm 创建和删除对象的例子
4.12.htm 用delete移除了myArry的第二个元素
4.13.htm 用“()”改变运算优先级的例子
4.14.htm 一个运算符结合性的例子
第5章（/C05/）
5.1.htm 一个最简单的条件语句
5.2.htm 检查变量x是否赋初值
5.3.htm if..else的使用情况
5.4.htm 一个用else进行更多选择的例子
5.5.htm 一个if语句嵌套的例子
5.6.htm 嵌套语句的另一种应用
5.7.htm 一个switch语句的应用
5.8.htm 利用while循环显示了一个6行的表格
5.9.htm while语句和do-while语句的循环实例
5.10.htm 显示了一个简易的九九乘法表
5.11.htm 用无限循环结构对上面乘法表的改写
5.12.htm 一个显示15以内奇数的程序
5.13.htm 一个函数定义的简单示例
5.14.htm 利用一个函数来显示对登录用户的问候
5.15.htm 定义了一个求阶乘的函数
5.16.htm JavaScript实现阶乘函数
5.17.htm 全局变量和局部变量的区别
5.18.htm 变量实例
5.19.htm 在函数内部使用arguments
5.20.htm 创建并使用动态函数的例子
5.21.htm URI编码处理函数的例子
5.22.htm 数值处理函数的例子
5.23.htm 一个isNaN方法应用的例子
第6章（/C06/）
6.1.htm 简单对象的使用
6.2.htm 如何使用构造函数为对象实例增加属性和方法
6.3.htm 在网页上显示中文形式的日期
6.4.htm 将一个小数四舍五入到指定位数
6.5.htm 以从大到小冒泡排序法为例
6.6.htm 使用Navigator的属性进行浏览器检测
6.7.htm 列出了一些可能的浏览器类型
6.8.htm Screen对象的使用
6.9.htm 用来检测浏览器窗口的实际大小
6.10.htm 可以设置文字大小随窗口大小而改变
6.11.htm 客户端性能检测
6.12.htm 个浏览器按键模拟的示例
第7章（/C07/）
7.1.htm 演示了编码和译码使用的方法
7.2.htm 演示了exec方法的用法
7.3.htm 对RegExp对象的综合举例
7.4.htm 演示了字符匹配的使用情况
7.5.htm 正则匹配举例
7.6.htm 用 ^ 匹配目标字符串的开始位置
7.7.htm 用 $ 匹配目标字符串的结尾位置
7.8.htm 用 \b 匹配一个字边界
第8章（/C08/）
8.1.htm XHTML中的事件绑定
8.2.htm 一个表单按钮的click处理器
8.3.htm 测试事件处理器的作用域
8.4.htm 绑定方法的使用
8.5.htm 使用一段文本来接收按键点击
8.6.htm 绑定处理器至对象
8.7.htm 网页中禁止鼠标右键的操作
第9章（/C09/）
9.1.htm 实现了在网页上显示当前时间的功能
9.2.htm 一个显示当前日期和星期的完整示例
9.3.htm 同时显示日期、时间和星期
9.4.htm 一个分时段问候的例子
9.5.htm 实现了显示不同地区的时间代码
9.6.htm 实现悬浮时钟效果的完整代码
9.7.htm 计算器的完整程序
9.8.htm 可以进行四则混合运算的计算器
9.9.htm 打字效果
9.10.htm 实现图片的随机选择
9.11.htm 一个基本下拉菜单
9.12.htm 下拉菜单
9.13.htm 实现渐显效果的下拉菜单的完整代码
9.14.htm 模拟系统菜单
9.15.htm 图片显示窗口的完整代码
9.16.htm 远程控制窗口
9.17.htm 实现菜单滑动效果的完整代码
9.18.htm 左键弹出式菜单效果的完整代码
9.19.htm 实现浮动菜单效果的完整代码
9.20.htm 实现树型导航菜单的完整代码
第10章（/C10/）
ReturnText Ajax返回字符串数据
ReturnXML Ajax读取XML类型数据
PostUser Ajax提交数据更新服务器内容
xmlhttpWeather 获取天气网站的内容
第11章（/C11/）
11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中
11.2.htm 添加单元格
11.3.htm 删除表格的第一行和第一列
11.4.htm 实现单元格行顺序的改变
dynamicTable 完整的Ajax调用DOM的实例
第12章（/C12/）
12.1.htm 一个在元素内定义CSS的范例
12.2.htm 一个在Head元素内定义CSS的范例
12.3.htm 引用CSS文件的页面
12.4.htm 通过下拉列表框来改变
容器的背景色
12.5.htm 实演示如何创建CSS文件
12.6.htm 演示一个在网页中应用投影的范例
12.7.htm 使用Ajax动态改变局部元素样式
CSSmenu 使用Ajax+CSS实现动态菜单效果
第13章（/C13/）
13.1.xml 一个简单的xml文件
13.1.xsl 使用XSLT将XML转换为HTML
13.2.xml 一个雇员列表xml文件
13.2.xsl 一个XSL样式表的例子
13.3.htm Internet Explorer 浏览器中XML的应用
13.4.htm 直接对XML文档进行添加、删除和显示数据的操作
13.5.js Mozilla 浏览器中xml的应用
13.5.xml 简单的xml文件
13.6.htm 格式化输出xml文件
13.7.htm 一个添加/删除记录的例子
第14章（/C14/）
MenuSample 级联菜单实例
PageSample 实现Ajax翻页效果
数据库备份 本章实例所需要的数据库
第15章（/C15/）
AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务
RicoColor 使用Open Rico实现动态调色板
RicoDrag 使用Open Rico实现可拖拽的层
WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏
第16章（/C16/）
留言板源代码 所有留言板实例的源代码
数据库备份 留言板数据所需要的数据库
第17章（/ch17）
程序描述：本章介绍开发AJAX的开源框架GWT（Google Web Toolkit） 。最典型的Google Maps和Gmail等Google服务也正是基于此框架开发的。读者将能够快速掌握GWT的各种开发所涉及到的内容。
/firstgwt/FirstGWT.html 第一个GWT示例
/calculator/TexCalculator.html 个税计算器
第18章（/ch18）
程序描述：本章将介绍 GWT应用中高级应用的部分，包括各中组件和布局、如何发送XMLHttpRequest请求，以及如何解决浏览器历史记录问题等等，同时读者还将详细的了解RPC应用的开发过程。
/xmlsample/AjaxSample.html 读取XML文件
/history/HistoryExample.html 保存历史记录
/rpc/RPCExample.html RPC调用
第19章（/ch19）
程序描述：本章模仿Google ig，使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页，当完成拖拽窗口时，自动保存布局，使用户可以随时根据喜好来设置布局。
/login.jsp 登录页面
/homepage.jsp 自定义主页
/all.css CSS样式表文件
/js JavaScript脚本文件
/graphics 系统使用的图片文件夹
第20章（/ch20）
程序描述：本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解文件传送情况。
/test.html 上传文件
/periodcal.jsp 上传文件后台处理页面
/ prototype.js prototype框架类库文件
第21章（/ch21）
程序描述：本章将实现通过滑块来显示分页数据的功能。传统的分页方式，多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来选择所显示的分页，这种拖拽的方式有很好的用户体验。
/test.html 滑动显示分页页面
/js JavaScript脚本文件
/img 系统使用的图片文件夹
第22章（/ch22）
程序描述：本章将利用开源框架Prototype，讲述如何在网页中实现Windows关机效果，使读者对Prototype框架有进一步的认识。
/lightbox.html 仿Window关机效果
/lightbox.js JavaScript脚本文件
第23章（/ch23）
程序描述：本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时，自动向服务器发送请求，查询该菜单下的子菜单，并在客户端显示子菜单，而无需刷新整个页面。
/simpleTree.jsp 简单树
/staticTree.jsp 静态树
/dynamicTree.jsp 动态树
/css/tree.css CSS样式表文件
/js/all.js JavaScript脚本文件
/images 图片文件
第24章（/ch24）
程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存到数据库。打开阅读RSS时，自动获取最新的RSS内容，而无需刷新页面。
/RSSReader.jsp RSS阅读器
/rss.js JavaScript脚本文件
第25章（/ch25）
程序描述：本章将仿照Google Suggest，使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时，自动向服务器发送请求，查询相关的关键字，并及时提示用户可输入的关键字。
/suggest.html 搜索提示
/ajax_search.js JavaScript脚本文件
第26章（/ch26）
程序描述：本章将使用Ajax技术实现无刷新即可浏览图片的相册。浏览图片时，自动向服务器发送请求，查询该类别下的照片，并显示到客户端。用户也可以根据喜好随时改变相册的风格。浏览相册的整个过程无需刷新页面。
/ show.jsp 图片浏览
/all.js JavaScript脚本文件
/new.css CSS样式表文件
/styles.css CSS样式表文件
/images 图片文件
第27章（/ch27）
程序描述：本章将使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录，可以避免因屏幕不断刷新而出现的闪动现象。另外，使用Ajax可以减少服务器端的负荷，对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲，有很好地用户体验。
/welcome.jsp 聊天室欢迎页面
/room.jsp 聊天室页面
/ajax_chat.js JavaScript脚本文件
/styles.css CSS样式表文件
