发现其实JS也是挺容易的，也挺好玩的，写的一个控制图片移动的小案例，对DOM机制还是不怎么熟。

<html>

	<head>

	<style type = "text/css">

	</style>

	<script language = "javascript" type = "text/javascript">

		function m()

		{

			this.x = 0;

			this.y = 0;

			this.move = function(direct){

					switch(direct){

							case 1:

							var mmm = document.getElementById('renwu');

							var top = mmm.style.top;

							top = parseInt(top.substr(0,top.length-2));

							mmm.style.top = (top-10)+"px";

							break;

							case 2:

							var mmm = document.getElementById('renwu');

							var left = mmm.style.left;

							left = parseInt(left.substr(0,left.length-2));

							mmm.style.left = (left+10)+"px";

							break;

							case 3:

							var mmm = document.getElementById('renwu');

							var top = mmm.style.top;

							top = parseInt(top.substr(0,top.length-2));

							mmm.style.top = (top+10)+"px";

							break;

							case 4:

							var mmm = document.getElementById('renwu');

							var left = mmm.style.left;

							left = parseInt(left.substr(0,left.length-2));

							mmm.style.left = (left-10)+"px";

							break;

						}

				}

		}

		var mm = new m();

		function m_move(direct){

				switch(direct) {

						case 1:

							mm.move(direct);

							break;

						case 2:

							mm.move(direct);

							break;

						case 3:

							mm.move(direct);

							break;

						case 4:

							mm.move(direct);

							break;

					}

			}

	</script>

	</head>

	<body>

		<table border = "1px" class = "control">

			<tr><td colspan = "3"align="center">test</td></tr>

			<tr><td></td><td><input type = "button"value = "   UP   " onclick = "m_move(1)"/></td><td></td></tr>

			<tr><td><input type = "button"value = "LEFT"onclick = "m_move(4)"/><td></td><td><input type = "button"value = "RIGHT"onclick = "m_move(2)"/></td></tr>

			<tr><td></td><td><input type = "button"value = "DOWN"onclick = "m_move(3)"/></td><td></td></tr>

		</table>

		<div class = "pic">

			<img id = "renwu" style = "width:180px;left:180px;top:50px;position:absolute;" src = "renwu.jpg"/>

			<img style = "width:558px;left:400px;top:300px;position:absolute;" src = "beijin.png"/>

		</div>

	</body>

</html>

HTML案例练习一的更多相关文章

  1. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  2. SQL Server内存遭遇操作系统进程压榨案例

    场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...

  3. solr_架构案例【京东站内搜索】(附程序源代码)

    注意事项:首先要保证部署solr服务的Tomcat容器和检索solr服务中数据的Tomcat容器,它们的端口号不能发生冲突,否则web程序是不可能运行起来的. 一:solr服务的端口号.我这里的sol ...

  4. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  5. 了不起的 nodejs-TwitterWeb 案例 bug 解决

    了不起的nodejs算是一本不错的入门书,不过书中个别案例存在bug,按照书中源码无法做出和书中相同效果,原本兴奋的心情掺杂着些许失落. 现在我们看一下第七章HTTP,一个Twitter Web客户端 ...

  6. 一个表缺失索引发的CPU资源瓶颈案例

    背景 近几日,公司的应用团队反应业务系统突然变慢了,之前是一直比较正常.后与业务部门沟通了解详情,得知最近生意比较好,同时也在做大的促销活动,使得业务数据处理的量出现较大的增长,最终系统在处理时出现瓶 ...

  7. 【Machine Learning】决策树案例：基于python的商品购买能力预测系统

    决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...

  8. Redis简单案例(二) 网站最近的访问用户

    我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我们可以先简单了解一下在oracle.sqlserve ...

  9. springmvc+bootstrap+jquerymobile完整搭建案例(提供下载地址)

    用一张简单的截图说明下,然后提供一个下载地址. bootstrap的大部分样式官方都是写好的,所以只需要class="官方样式即可",具体可以看官方的案例,下面来个地址 http: ...

  10. RabbitMQ + PHP （三）案例演示

    今天用一个简单的案例来实现 RabbitMQ + PHP 这个消息队列的运行机制. 主要分为两个部分: 第一:发送者(publisher) 第二:消费者(consumer) (一)生产者 (创建一个r ...

随机推荐

  1. Sublime text 2 快捷键配置文件

    分屏快捷键 command+alt+2(就是view菜单中layout后跟数字,有1234,快捷键都带有提示符) 格式化快捷键 ctrl+alt+f 这里提到一个和sublime无关的..comman ...

  2. netstat详解

    Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Membershi ...

  3. splay模板

    点操作: splay树可以一个一个的插入结点,这样的splay树是有序树,结点权值大于左儿子小于右儿子 这样就是点操作 区间操作: 还有就是可以自己建树,这样的splay树就不是按权值的有序树,它不满 ...

  4. POJ 3436 ACM Computer Factory

    题意:   为了追求ACM比赛的公平性,所有用作ACM比赛的电脑性能是一样的,而ACM董事会专门有一条生产线来生产这样的电脑,随着比赛规模的越来越大,生产线的生产能力不能满足需要,所以说ACM董事会想 ...

  5. HDU 4612 Warm up(手动扩栈，求树上哪两个点的距离最远)

    题目大意: 给你一个无向图,问加一条边之后最少还剩下几座桥. (注意重边处理)   分析:其实当我们把边双连通分量给求出来之后我们就能将连通块求出来,这样我们就可以重新构图.重新构造出来的图肯定是一颗 ...

  6. 使用ChineseLunisolarCalendar 对象由年份获得生肖名，Datetime.now.tostring获得星期几

    一:使用ChineseLunisolarCalendar 对象由年份获得生肖名,截图 二:代码 using System; using System.Collections.Generic; usin ...

  7. select的使用（一）

    单表操作 select Name,Major,InDate from T_Employee as 计算结果 select Name as 姓名,Major,InDate from T_Employee ...

  8. QQ空间自动发广告解决方法

    最近空间好多人QQ都中了毒.每天我都有几十个好友刷空间话费.流量广告! QQ空间自动发广告的原因: 最近使用了刷赞或者其他QQ外挂软件(有些开发者或破解者会在这样的软件上留后门,请自己判断). 或者最 ...

  9. Listview加载更多是，恢复到原来的位置，如果不加特殊处理，总是跳转第一条

    1.记录listView滚动到的位置的坐标,然后利用listView.scrollTo精确的进行恢复 listView.setOnScrollListener(new OnScrollListener ...

  10. poj1042

    题目大意:去捕鱼 约翰去参加一个垂钓旅行,他有h小时可以使用在该地区有n (2 <= n <= 25) 个湖泊可以沿着一个单一的路到达,约翰从湖泊1开始,但是它可以在任何湖泊结束他如果想, ...