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. RPi 2B Raspbian SD卡内部架构

    /***************************************************************************** * RPi 2B Raspbian SD卡 ...

  2. 学习PHP C扩展之面向对象开发方式 (转)

    PHP OOP面向对象之C语言开发方式 学习PHP C扩展有一段时间了,PHP手册里大部分讲的PHP的函数开发方式,网上找OOP资料比较少,想起上个月测试redis 的时候,下载PHP扩展redis源 ...

  3. Android进度加载的Loading效果

    网上看到的一个开源项目的loading效果,效果很赞,记录一下: 开源项目地址如下:https://github.com/RomainPiel/Titanic

  4. COCOS2D-X学习笔记（一）-----Node类的学习

    Node类(在3.0版本以下叫CCNode):节点类. 本文记录以下几个方法的学习笔记: init()和onEnter()这俩个方法都是CCNode的方法.其区别如下: 1.其被调用的顺序是先init ...

  5. UTF-8编码规则

    UTF-8是Unicode的一种实现方式,也就是它的字节结构有特殊要求,所以我们说一个汉字的范围是0X4E00到0x9FA5,是指unicode值,至于放在utf-8的编码里去就是由三个字节来组织,所 ...

  6. CABasicAnimation（CAKeyframeAnimation）keypath 取值

    - keyPath可以使用的key - #define angle2Radian(angle) ((angle)/180.0*M_PI) - transform.rotation.x 围绕x轴翻转 参 ...

  7. 祭奠我的csdn博客

    本人在csdn的博客莫名其妙地被封了(http://blog.csdn.net/fty8788),非常郁闷. 回忆起,可能是我近半年由于工作事情忙很少写博客了,被某213盗用发了不恰当的东东.我也查不 ...

  8. WebStorm2016.1 破解 激活

    WebStorm2016.1 破解 激活   方法来自 Rover12421 大神. 1.从官网下载WebStorm2016.1安装. 2.下载 破解补丁 并解压,记住路径 3.编辑WebStorm安 ...

  9. 网页抓取：PHP实现网页爬虫方式小结

    来源:http://www.ido321.com/1158.html 抓取某一个网页中的内容,需要对DOM树进行解析,找到指定节点后,再抓取我们需要的内容,过程有点繁琐.LZ总结了几种常用的.易于实现 ...

  10. Codeforces Educational Codeforces Round 15 A. Maximum Increase

    A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...