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. ActionBarSherlock的学习笔记（四） ------------ ActionBarSherlock中的搜索及SearchView的使用

    在使用ActionBarSherlock定义app的头部操作时,会经常看见搜索的动作,本文主要介绍一下搜索是如何实现的. 1. SearchView 是搜索的核心组件,具体介绍请参考Android官方 ...

  2. (1)java设计模式之简单工厂模式

    一:简单工厂模式的优点          --->在阎宏博士的<JAVA与模式>一书中开头是这样描述简单工厂模式的:简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Fa ...

  3. http请求返回响应码的意思

    HTTP 状态响应码 意思详解/大全 HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到RFC 2518. ...

  4. 【转】 CATransform3D 矩阵变换之立方体旋转实现细节

    原文网址:http://blog.csdn.net/ch_soft/article/details/7351896 第一部分.前几天做动画,使用到了CATransform3D ,由于没有学过计算机图形 ...

  5. 【转】Android开发学习笔记：5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  6. android.view.ViewRootImpl$CalledFromWrongThreadException错误处理

    一般情况下,我们在编写android代码的时候,我们会将一些耗时的操作,比如网络访问.磁盘访问放到一个子线程中来执行.而这类操作往往伴随着UI的更新操作.比如说,访问网络加载一张图片 new Thre ...

  7. Easy Climb

    题意: 有n块石头,给定他们的高度,现保持第一和最后一块高度不变,其他可增加和减少高度,求通过变换使所有相邻石头的高度差的绝对值不大于d,所变化高度总和的最小值. 分析: 状态还可以想出来,dp[i] ...

  8. DataTable行转列

    /// <summary> /// DataTable行转列 /// </summary> /// <param name="dtable">需 ...

  9. Rust 中的继承与代码复用

    在学习Rust过程中突然想到怎么实现继承,特别是用于代码复用的继承,于是在网上查了查,发现不是那么简单的. C++的继承 首先看看c++中是如何做的. 例如要做一个场景结点的Node类和一个Sprit ...

  10. 如何在 Windows Azure 的虚拟机 ubuntu 上面安装和配置 openVPN（三）

    第三步:安装openVPN 请打开 ubuntu 官方文档.然后,从上到下,按照步骤,输入执行命令.大家只需要执行到 First trouble shooting 之前即可. 不要怕麻烦,仔细读,一步 ...