JS 2
<html> <head> <script type="text/javascript"> function message() { alert("该提示框是通过 onload 事件调用的。") } </script> </head>
<body onload="message()">
</body> </html>
关于body调用javascript的方法，如:<body onload="check()"> 对于窗体而言 ：window对象 对于页面而言：document对象
body是HTML的一个唯一固定元素！也就是说指执行一次当页面使用的时候就开始调用！所以我们常把一些一开始页面打开就要处理的动作放在body的onload中！
<html> <body>
<script type="text/javascript"> document.write("<h1>这是标题</h1>"); document.write("<p>这是段落。</p>"); document.write("<p>这是另一个段落。</p>"); </script>
</body> </html>
随机数： <html> <body>
<script type="text/javascript"> var r=Math.random() document.write(r); document.write('</br>'); if (r>0.5) { document.write("<a href='http://www.w3school.com.cn'>学习 Web 开发！</a>") } else { document.write("<a href='http://www.microsoft.com'>访问微软！</a>") } </script>
</body> </html>
显示警示框： <html> <head> <script type="text/javascript"> function disp_alert() { alert("我是警告框！！") } </script> </head> <body>
<input type="button" onclick="disp_alert()" value="显示警告框" />
</body> </html>
确定或取消 <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body> </html>
提示框： <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好！" + name + " 今天过得怎么样？") } } </script> </head> <body>
<input type="button" onclick="disp_prompt()" value="显示提示框" />
</body> </html>
<html> <head>
<script type="text/javascript"> function myFunction() { return ("您好，祝您愉快！") } </script>
</head> <body>
<script type="text/javascript"> document.write(myFunction()) </script>
<p>body 部分中的脚本调用一个函数。</p>
<p>该函数返回一段文本。</p>
</body> </html>
<html> <head> <script type="text/javascript"> function product(a,b) { return a*b } </script> </head>
<body> <script type="text/javascript"> document.write(product(6,5)) </script>
<p>body 部分中的脚本调用一个带有两个参数（6 和 5）的函数。</p> <p>该函数会返回这两个参数的乘积。</p>
</body> </html>
<html> <head> <script type="text/javascript"> var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="本页中存在错误。"+err.description+" \n\n" txt+="点击“确定”继续查看本页，\n" txt+="点击“取消”返回首页。\n\n" alert(txt); if(!confirm(txt)) { document.location.href="/index.html" } } } </script> </head>
<body> <form> <input type="button" value="查看消息" onclick="message()" /> </form> </body>
</html>
<html> <body> <script type="text/javascript"> var x=prompt("请输入 0 至 10 之间的数：","11") try { if(x>10) throw "Err1" else if(x<0) throw "Err2" else if(isNaN(x)) throw "Err3" } catch(er1) { if(er1=="Err1") alert("错误！该值太大！") if(er1 == "Err2") alert("错误！该值太小！") if(er1 == "Err3") alert("错误！该值不是数字！") } var a="请选择" if(!confirm(a)) {alert("您选择了\"否\"")} else {alert("您选择了\"是\"")} </script> </body> </html>
代码： function getCookie(c_name) { if(document.cookie.length > 0) { c_start = document.cookie.indexof(c_name + "="); if (c_start != -1) //如果c_start的位置不是字符串最后的位置 //c_start是数值型， { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexof(";", c_start); if (c_end == -1) { c_end = document.cookie.length; } return usescape(document.cookie.substring(c_start, c_end)); } } } 解释： 1、cookie保存在系统中的时候是“cookie名1 = cookie值; cookie名2 = cookie值”这样的方式来保存的。 2、document.cookie是返回包含所有cookie的字符串。 3、document.cookie.index(c_name + "=")是取得这个cookie名在整个cookie中的位置。（加“=”号：取cookie名加上等于号的位置，比方整个cookie是"user=tony; passwd=user123"，这时候查找名为user的cookie值的时候，是查找"user="的位置；如果不要等于号，就会找到其它位置的"user"，比如后面密码里面也有user字符，但并不是cookie中cookie名都是唯一的，所以加上等于号就不会出错。 ） 4、c_start = c_start + c_name.length + 1是用先前取得的位置加上cookie名的长度再加1，就是把位置确定在这个cookie名的“=”符号的后面。 5、c_end = document.cookie.indexof(";", c_start)是从上一步的位置开始查找的，直到";"的位置。 6、document.cookie.substring(c_start, c_end)就是取该cookie名的等号后面到分号前面的字符串，即对应的cookie的值。
<script type="text/javascript"> function mouseOver() { document.b1.src ="/i/eg_mouse.jpg" } function mouseOut() { document.b1.src ="/i/eg_mouse2.jpg" } </script> </head>
<body> <a href="/index.html" target="_blank"> <img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a> </body>
b1是<img>标签的名字，在javascript中访问控件时有一个语法的：document.控件名(.控件属性)
<a href="/index.html" target="_blank"> _blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 一个对应的框架页的名称 -- 在对应框架页中打开
<html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt } </script> </head>
<body> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')" href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body> </html> -- 设置或获取某一Id的节点里面所包含的HTML代码，例子：
<div id="QQ">我是QQ的InnerHTML, <strong>这也是innerHTML<strong></div>
<script> // 弹出节点"QQ"的InnerHTML alert(document.getElementById("QQ").innerHTML);
// 改变节点“QQ”的InnerHTML document.getElementById("QQ").innerHTML = "哈哈，我变了吧"; //document.getElementById("QQ").innerHTML 返回 字符串类型的值 </script> --
<html> <head> <script type="text/javascript"> function timedText() { var t1=setTimeout("document.write(\"你好！\") ",1000) var t2=setTimeout("document.write(\"你好！\") ",2000)
} </script> </head>
<body>
<form> <input type="button" value="显示计时的文本" onClick="timedText()"> <input type="text" id="txt"> </form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p> </body>
</html>
<html> <head> <script type="text/javascript"> function timedText() { var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000) var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000) var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000) } </script> </head>
<body>
<form> <input type="button" value="显示计时的文本" onClick="timedText()"> <input type="text" id="txt"> </form>
<p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p> </body>
</html>
setTimeout()在js类中的使用方法 setTimeout (表达式,延时时间) setTimeout(表达式,交互时间) 延时时间/交互时间是以豪秒为单位的(1000ms=1s)
<html> <head> <script type="text/javascript"> var i=0; function xilou(){ i+=1; if(i>2){alert(i);return;} setTimeout("xilou()",1000); //用这个也可以 //setTimeout(xilou,1000); } </script> </head>
<body>
<form> <input type="button" value="显示计时的文本" onClick="xilou()"> </form> </body>
</html>
return是向函数返回值，并终止函数的运行
<html> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) }
function stopCount() { c=0; setTimeout("document.getElementById('txt').value=0",0); clearTimeout(t); } </script> </head>
<body>
<form> <input type="button" value="开始计时！" onClick="timedCount()"> <input type="text" id="txt"> <input type="button" value="停止计时！" onClick="stopCount()"> </form>
<p>请点击上面的“开始计时”按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击“停止计时”按钮可以终止计时，并将计数重置为 0。</p>
</body>
</html>
<html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500) }
function checkTime(i) { if (i<10) {i="0" + i} return i } </script> </head>
<body onload="startTime()"> <div id="txt"></div> </body> </html>
注释：由 getMinutes() 返回的值是一个两位的数字。不过返回值不总是两位的，如果该值小于 10，则仅返回一位数字。
String 对象还拥有大量的方法。 indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一个字符串中的位置，如果没有找不到子串，则返回 -1。
这两个方法的不同之处在于，indexOf() 方法是从字符串的开头（位置 0）开始检索字符串，而 lastIndexOf() 方法则是从字符串的结尾开始检索子串。 例如： var oStringObject = new String("hello world!"); alert(oStringObject.indexOf("o")); 输出 "4" alert(oStringObject.lastIndexOf("o")); 输出 "7"
<html> <body>
<script type="text/javascript"> document.write("Hello Worlld!") var oStringObject = new String("hello worlld!"); alert(oStringObject.indexOf("ll")); // 输出2 alert(oStringObject.lastIndexOf("ll"));// 输出9 </script>
</body> </html>
slice() 和 substring() ECMAScript 提供了两种方法从子串创建字符串值，即 slice() 和 substring()。这两种方法返回的都是要处理的字符串的子串，都接受一个或两个参数。第一个参数是要获取的子串的起始位置，第二个参数（如果使用的话）是要获取子串终止前的位置（也就是说，获取终止位置处的字符不包括在返回的值内）。如果省略第二个参数，终止位就默认为字符串的长度。 与 concat() 方法一样，slice() 和 substring() 方法都不改变 String 对象自身的值。它们只返回原始的 String 值，保持 String 对象不变。 var oStringObject = new String("hello world"); alert(oStringObject.slice("3")); //输出 "lo world" alert(oStringObject.substring("3")); //输出 "lo world" alert(oStringObject.slice("3", "7")); //输出 "lo w" alert(oStringObject.substring("3", "7")); //输出 "lo w" 在这个例子中，slice() 和 substring() 的用法相同，返回值也一样。当只有参数 3 时，两个方法返回的都是 "lo world"，因为 "hello" 中的第二个 "l" 位于位置 3 上。当有两个参数 "3" 和 "7" 时，两个方法返回的值都是 "lo w"（"world" 中的字母 "o" 位于位置 7 上，所以它不包括在结果中）。
为什么有两个功能完全相同的方法呢？事实上，这两个方法并不完全相同，不过只在参数为负数时，它们处理参数的方式才稍有不同。 对于负数参数，slice() 方法会用字符串的长度加上参数，substring() 方法则将其作为 0 处理（也就是说将忽略它）。例如： var oStringObject = new String("hello world"); alert(oStringObject.slice("-3")); //输出 "rld" alert(oStringObject.substring("-3")); //输出 "hello world" alert(oStringObject.slice("3, -4")); //输出 "lo w" alert(oStringObject.substring("3, -4")); //输出 "hel"
这样即可看出 slice() 和 substring() 方法的主要不同。 当只有参数 -3 时，slice() 返回 "rld"，substring() 则返回 "hello world"。这是因为对于字符串 "hello world"，slice("-3") 将被转换成 slice("8")，而 substring("-3") 将被转换成 substring("0")。 同样，使用参数 3 和 -4 时，差别也很明显。slice() 将被转换成 slice(3, 7)，与前面的例子相同，返回 "lo w"。而 substring() 方法则将两个参数解释为 substring(3, 0)，实际上即 substring(0, 3)，因为 substring() 总把较小的数字作为起始位，较大的数字作为终止位。因此，substring("3, -4") 返回的是 "hel"。这里的最后一行代码用来说明如何使用这些方法。
本文介绍JavaScript中的Object类具有的属性和方法的使用。 属性： Constructor:对创建对象的函数的引用（指针）。对于Object类，该指针指向原始的object()函数。 Prototype:对该对象的对象原型的引用。对于所有的类，它默认返回Object对象的一个实例。 方法： hasOwnProperty(property):判断对象是否有某个特定的属性。必须用字符串指定该属性（例如，o.hasOwnProperty(”name”)）。 isPrototypeOf(object):判断该对象是否为另一个对象的原型。 propertyIsEnumerable(property):判断给定的属性是否可以用for…in语句进行枚举。 toString():返回对象的原始字符串表示。对于Object类，ECMA－262没有定义这个值，所以不同的ECMAScriipt实现具有不同的值。 valueOf():返回最适合该对象的原值。对于许多类，该方法返回的值都与toString()的返回值相同。
<html> <body>
<script type="text/javascript">
personObj=new Object() personObj.firstname="John" personObj.lastname="Adams" personObj.age=35 personObj.eyecolor="black" var a=personObj.hasOwnProperty("firstname"); document.write(personObj.firstname + " 的年龄是 " + personObj.age + " 岁。"); document.write(a); //输出 true var b=personObj.hasOwnProperty("a"); document.write(b); //输出 false </script>
</body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript"> <!-- function lookProperty(obj){ ob=eval(obj); var Property=""; for(var i in ob){ Property+="属性："+i+"<br/>"; document.getElementById("myp").innerHTML=Property; } } //--> </script> </head> <body> <div id="myp"></div> <button onclick="lookProperty(currentStyle)">查看属性</button> </body> </html> 给你写了个小程序，点击查看属性按钮，就能看到该对象的所有属性。 把lookProperty（）里的参数换成你想要查看的对象即可。
注释：<meta> 标签永远位于 head 元素内部。 注释：元数据总是以名称/值的形式被成对传递的。
浙公网安备 33010602011771号