<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body><a id="runoob" charset="ISO-8859-1" href="//www.runoob.com/">菜鸟教程</a><br> <script> document.write("返回链接的charset: "); document.write(document.getElementById(‘runoob‘).charset); document.write("<br><br>"); </script> <a id="google" href="//www.google.com/">Google</a><br> <script> document...
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{width:300px;height:200px;background-color:#f00;padding:5px;border:2px solid #000;} #item{width:100px;height:100px;background-color:#ff0;padding:5px;margin:20px;border:1px solid #000;} *[draggable=true]{-moz-user-select:none;-khtml-user-dr...
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置</title> <style> #info{width:100px;height:100px;background:red;position:absolute;top:0;left:0;} </style> <script> window.onload = function(){document.onclick = clickwhere;}function clickwhere(evt){evt = evt || window.event;var x =0;va...
div的显示和隐藏<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style type="text/css"> #div1{color:red;border:5px solid purple;width:300px;height:200px;} </style> <script t...
惰性实例化要解决的问题是：避免了在页面中 JavaScript 初始化执行的时候就实例化类，如果在页面中没有使用这个实例化的对象，就会造成一定的内存浪费和性能消耗。如果将一些类的实例化推迟到需要使用它的时候才去做，就可以避免资源过早损耗，做到 “按需供应”。 // 惰性实列化代码如下var myNamespace = function(){var Configure = function(){var privateName = "tugenhua";var privateGetName = function(){return privateNa...
1//定义一个javascript类 2function JsClass(privateParam,publicParam){//构造函数 3var priMember = privateParam; //私有变量 4this.pubMember = publicParam; //公共变量 5//定义私有方法 6function priMethod(){7return "priMethod()";8 }9//定义特权方法，特权方法可以访问所有成员10this.privilegedMethod = function(){ 11var str = "这是特权方法，我调用了\n"; 12 str += " 私有变量：" + priMember +"\n"; 1...
Javascript中的数据值有两大类：基本类型的数据值和引用类型的数据值。基本类型的数据值有5种：null、undefined、number、boolean和string。引用类型的数据值往大的说就1种，即Object类型。往细的说有：Object类型、Array类型、Date类型、Regexp类型、Function类型等。当原型对象的属性值为基本类型的数据值时，通过实例对象修改属性值从而引起原型对象的属性值发生变化的情况不会发生。当原型对象的属性值为引用类型的数据值时，通...
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-确定web页面的区域</title> <script> function size(){var width = 0;var height = 0;if(!window.innerWidth){width = (document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body.clientWidth);height = (document.documentElement.clientHeight ? docum...
我们知道在直角坐标系中，圆的方程可描述为： X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π，计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个圆。编写HTML文件内容如下：<!DOCTYPE html><head><title>圆的绘制</title><script type="text/javascript"> function draw(id) { var canvas=document.getElementById(id); if (canvas==null) return false; v...
实例008 关闭弹出的窗口时，刷新父窗口实例说明关闭弹出的窗口时，同时刷新父窗口，一般用来使父窗口获取最新的数据。技术要点本实例主要应用window.open()语句打开新窗口，并在新窗口中应用opener属性，该属性返回一个引用，用于指定打开本窗口的窗口对象。语法：window.openerwindow.opener.方法window.opener.属性功能：返回的是一个窗口对象。opener属性与打开该窗口的父窗口相联系，当访问子窗口中opener属性...
轮播广告<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>轮播广告</title><styletype="text/css">.hide{display: none;}#div1{position: absolute;top:50px;left:100px;}#div2{position: absolute;top:155px;left:435px;}a{display:block;float: left;width:15px;height:15px;tex...
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><script type="text/javascript"> <![CDATA[window.onload = function(){var square = document.getElementById("square");square.onclick = function(){var color = this.getAttribute("fill");c...
黄金螺旋线是根据斐波那契数列画出来的螺旋曲线。自然界中存在许多黄金螺旋线的图案，是自然界最完美的经典黄金比例。例如，如图1所示的海螺身上的曲线，图2所示的漩涡，图3所示的人耳。图1 海螺图2 漩涡 图3 人耳 又如，名画蒙娜丽莎的微笑整个画面所呈现的数学美，如图4所示。 图4 蒙娜丽莎的微笑 黄金螺旋线的绘制思想是：以斐波那契数为边长的正方形拼成长方形，然后在正方形里面画一个90度的弧线，连接起来的弧线...
1．绕椭圆轨道旋转的圆球 在Canvas画布中绘制一个椭圆，然后在椭圆上绘制一个用绿色填充的实心圆。之后每隔0.1秒刷新，重新绘制椭圆和实心圆，重新绘制时，实心圆的圆心坐标发生变化，但圆心坐标仍然位于椭圆曲线上。这样，可以得到绕椭圆轨道旋转的圆球动画。 编写如下的HTML代码。<!DOCTYPE html><head><title>绕椭圆轨道旋转的圆球</title><script type="text/javascript"> var context; var width,height; ...
技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2 3.3 响应鼠标动作图3-2的效果已经有了，需要鼠标来操作展示想看的照片，这就需要在相应的地方加上事件。3.3.1 响应小照片单击动作在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法，在单击小图片时要显示大图片，这需要调用eg.showBi...