1:  <html>
   2:  <title>    
   3:   
   4:  </title>
   5:      <body>
   6:       <style type="text/css">
   7:                  #block{
   8:                  background-color:green;
   9:                  font-size:9pt;
  10:                  padding:30px;
  11:                  color:white;
  12:                  width:100px;
  13:                  height:120px;
  14:                  position:absolute;
  15:                  }
  16:        </style>
  17:        <div id="block"></div>  
  18:        
  19:        <script>
  20:              function down(event){
  21:   
  22:                  var x = event.clientX;
  23:                  var y = event.clientY;  
  24:                  var oleft = document.getElementById('block').offsetLeft;
  25:                  var otop  = document.getElementById('block').offsetTop;
  26:                  offx = x - oleft;
  27:                  offy = y - otop;
  28:                   
  29:                  document.onmousemove = move;
  30:                  document.onmousemup  = up;
  31:                 
  32:              }  
  33:              function move(event){
  34:                  var x = event.clientX;
  35:                  var y = event.clientY;                
  36:                   
  37:                  document.getElementById('block').style.left = x - offx +'px';  
  38:                  document.getElementById('block').style.top  = y - offy +'px';
  39:                  
  40:                  document.onmouseup = up;
  41:              }  
  42:              function up(){
  43:                  document.onmouseup = null;
  44:                  document.onmousemove = null;
  45:              }
  46:              window.onload = function(){
  47:                  document.onmousedown = down;
  48:              }
  49:          </script>     
  50:        
  51:   
  52:      </body>
  53:      
  54:   
  55:  </html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

我的第一个javascript网页作业的更多相关文章

  1. javascript一个在网页上画线的库

    文章;安利一个绘制指引线的JS库leader-line 一个在网页上划线的库感觉很不错.

  2. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  3. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  4. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  5. 《JavaScript网页特效经典300例-进阶篇》

    <Javascript网页经典特性300例> 进阶篇 第11章:导航菜单特效 二级导航菜单三级导航菜单动态加载导航菜单三级联动导航菜单树形导航菜单当网页超过一屏时导航菜单始终置顶 第12章 ...

  6. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

  7. 如何成为一个javascript高手【转载】

      原文网址: http://www.cnblogs.com/keva/p/how-to-become-a-javascript-badass.html 英文网址:http://www.clientc ...

  8. javascript（作业九）

    1.javascript简介: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...

  9. Javascript网页特效开发技巧

    Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...

随机推荐

  1. 【转】Linux 之 /etc/profile、~/.bash_profile 等几个文件的执行过程

    原文网址:http://blog.csdn.net/ithomer/article/details/6322892 在登录Linux时要执行文件的过程如下:在刚登录Linux时,首先启动 /etc/p ...

  2. Winfrom 开发系统导航菜单

    先上图看效果在说. 效果图如上,在Web中这个一点难度都没有,几行Css+JS就搞定了.但是在Winfrom中.本来就是半杯水的水准,想做这个个导航菜单,发现真难找,找了很多都不合胃口,只能自己写个了 ...

  3. POJ 1401 Factorial

    题意:求一个数的阶乘最后边有几个0. 解法:如果有0说明这个数含有2和5这两个因子,对于一个阶乘来说因子2的数量一定比5的数量多,所以只要算有几个5就可以了,依次算5的个数,25的个数,125的个数… ...

  4. hdu 1024(最大和连续子序列增强版)

    题意:最大和连续子序列的增强版,要求从一序列中取出若干段,这些段之间不能交叉,使得和最大并输出. 分析:用dp[i][j]表示前j个数取出i段得到的最大值,那么状态转移方程为dp[i][j]=max( ...

  5. 20、内存溢出(Out of Memory)

     内存引用(释放强引用) Object obj=new Object(); obj = null;  内存引用(使用软引用) 软引用是主要用于内存敏感的高速缓存.在jvm报告内存不足之前会清 除所 ...

  6. HDU 4405-Aeroplane chess（概率dp）

    题意: n+1格飞行棋,编号0-n,从0格开始,每次扔一个色子,得到的点数就向前走几步,但有有些格子到达后可以直接飞到后面的格子, 当到达>=n的地方结束,求结束扔色子的期望次数. 分析: dp ...

  7. 仿酷狗音乐播放器开发日志二十七 用ole为窗体增加文件拖动功能（附源码）

    转载请说明原出处,谢谢~~ 中秋到了,出去玩了几天.今天把仿酷狗程序做了收尾,已经开发完成了,下一篇博客把完结的情况说一下.在这篇博客里说一下使用OLE为窗体增加文件拖拽的功能.使用播放器,我更喜欢直 ...

  8. Eclipse编辑java文件报Unhandled event loop exception错误的解决办法

    原因:电脑中安装了杀毒软件,卸掉或者关掉就可以了.我的是直接退出,错误就不产生了.

  9. CentsOS7 网络自动启动

    虚拟机中安装完成CentOS7后,网络总是需要手工启动才可使用,设置为自动连接的方式如下: cd /etc/sysconfig/network-scripts/ls #找到类似的文件:ifcfg-et ...

  10. hdfs[命令] dfs

    Usage: hadoop fs [generic options] [-appendToFile <localsrc> ... <dst>] [-cat [-ignoreCr ...