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. Android-onTouchEvent方法的使用

    手机屏幕事件的处理方法onTouchEvent.该方法在View类中的定义,并且所有的View子类全部重写了该方法,应用程序可以通过该方法处理手机屏幕的触摸事件.该方法的签名如下所示. public ...

  2. POJ 2549 Sumsets

    Sumsets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10593   Accepted: 2890 Descript ...

  3. 1047图的深度优先遍历c语言

    描述 图(graph)是数据结构 G=(V,E),其中V是G中结点的有限非空集合,结点的偶对称为边(edge):E是G中边的有限集合.设V={0,1,2,……,n-1},图中的结点又称为顶点(vert ...

  4. ORA-15041: diskgroup space exhausted

    今天在做一个备份的时候,出现磁盘耗尽的错误,具体如下: RMAN-00571: =========================================================== ...

  5. bzoj 3143 [Hnoi2013]游走（贪心，高斯消元，期望方程）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3143 [题意] 给定一个无向图,从1走到n,走过一条边得到的分数为边的标号,问一个边的 ...

  6. C#实现APK自动打包

    C#实现APK自动打包     最近做了一个安卓项目,其中有一个自动打包的功能,要把供应商id写入APK后打包.   一.思路     在AndroidMinifest.xml中加入一个标识字段,如下 ...

  7. Unity3D-美术相关

    1.导入动画 (1)使用预分解的动画模型,导入后面板中会含有一个可用的动画片段列表. (2)使用未分解的动画模型,自行添加动画片段. (3)使用多个动画文件,模型与动画分离.对于goober.fbx模 ...

  8. 【转】Maven实战（二）---多模块开发---缺少Jar包

    原博文出于:http://blog.csdn.net/liutengteng130/article/details/41611755    感谢! Maven里面的Jar包经常出现Missing的情况 ...

  9. homework-03 图形化化最大子序列和

    你现在使用的代码规范是什么,  和上课前有什么改进? 我们一开始使用的是C++完成的相关程序.本次因为一些原因,改为C#进行编写.因为2013-10-21在VS2012中,所以所有的代码都已经被VS自 ...

  10. New full duplex HTTP tunnel implementation (client and server)

    https://issues.jboss.org/browse/NETTY-246?page=com.atlassian.jirafisheyeplugin:fisheye-issuepanel —— ...