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

    题意: 有两台不同机器A和B,他们分别拥有各种运行模式1~n和1~m.现有一些job,需要在某模式下才能完成,job1在A和B上需要的工作模式又可能会不一样.两台机器一开始处于0模式,可以切换模式,但 ...

  2. java中时间格式yyyyMMddHHmmss的大小写问题

    字母     日期或时间元素 表示 示例 G Era 标志符 Text AD y 年 Year 1996 ; 96 M 年中的月份 Month July ; Jul ; 07 w 年中的周数 Numb ...

  3. Android-判断当前网络是否可用

    1.声明权限 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 2. ...

  4. Mysql 的存储过程和存储函数

    优点: v 提高安全性 v 简化mysql查询 v 减轻带宽负担 缺点: v 增加服务器负担 v 对我们开发者来说,难度大一点 PHP中的函数 Function funname(参数){ //函数体 ...

  5. [Everyday Mathematics]20150106

    (1). 设 $f\in C[0,T]$, $g$ 是 $T$-周期函数, 试证: $$\bex \vlm{n}\int_0^T f(x)g(nx)\rd x=\frac{1}{T}\int_0^T ...

  6. DevExpress控件XtraGrid的Master-Detail用法 z

    XtraGrid支持Master-Detail展示,在自带的Demo中展示了一个“公司——产品——订单”的例子.自己照着实现了一下,有几处关键地方补充一下. 示例: 部门信息(主1)——部门下用户(从 ...

  7. Linux 系统编程

    简介和主要概念 Linux 系统编程最突出的特点是要求系统程序员对它们工作的的系统的硬件和操作系统有深入和全面的了解,当然它们还有库和系统调用上的区别. 系统编程分为:驱动编程.用户空间编程和网络编程 ...

  8. LINQ to SQL语句之Join和Order By

    Join操作 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), SelectM ...

  9. rfid门禁系统笔记

    非接触式IC卡性能简介 主要指标: 1:容量为8K 位的EEPROM 2:分为16个扇区,每个扇区为4块,每块16个直接,以块为存取单位 3:每个扇区有独立的一组密码和访问控制 4:每张卡具有唯一的序 ...

  10. 在ASP.NET下做了一个实验MVC的小东西

    星期五下班前一时兴起,对MVC发表了一点看法.后来就想干脆弄个小东西来验证一些自己的想法帮组理清思路.所要源代码的免了,3个小时的急就章实在是乱得可以,既没有好的架构,也没有任何代码质量可言,主要是实 ...