我思故我强

javascript方法和技巧大全

javascript就这么回事 

基础知识

1 创建脚本块

1: <script language=”javascript”>
2: javascript code goes here
3: </script>


2 隐藏脚本代码

1: <script language=”javascript”>
2: <!--
3: document.write(“hello”);
4: / -->
5: </script>


在不支持javascript的浏览器中将不执行相关代码

3 浏览器不支持的时候显示

1: <noscript>
2: hello to the non-javascript browser.
3: </noscript>


4 链接外部脚本文件

1: <script language=”javascript” src=" http://www.webjx.com/”filename.js"”></script>


5 注释脚本

1: / this is a comment
2: document.write(“hello”); / this is a comment
3: /*
4: all of this
5: is a comment
6: */


6 输出到浏览器

1: document.write(“<strong>hello</strong>”);


7 定义变量

1: var myvariable = “some value”;


8 字符串相加

1: var mystring = “string1” + “string2”;


9 字符串搜索

1: <script language=”javascript”>
2: <!--
3: var myvariable = “hello there”;
4: var thereplace = myvariable.search(“there”);
5: document.write(thereplace);
6: / -->
7: </script>


10 字符串替换

1: thisvar.replace(“monday”,”friday”);


11 格式化字串

1: <script language=”javascript”>
2: <!--
3: var myvariable = “hello there”;
4: document.write(myvariable.big() + “<br>”);
5: document.write(myvariable.blink() + “<br>”);
6: document.write(myvariable.bold() + “<br>”);
7: document.write(myvariable.fixed() + “<br>”);
8: document.write(myvariable.fontcolor(“red”) + “<br>”);
9: document.write(myvariable.fontsize(“18pt”) + “<br>”);
10: document.write(myvariable.italics() + “<br>”);
11: document.write(myvariable.small() + “<br>”);
12: document.write(myvariable.strike() + “<br>”);
13: document.write(myvariable.sub() + “<br>”);
14: document.write(myvariable.sup() + “<br>”);
15: document.write(myvariable.tolowercase() + “<br>”);
16: document.write(myvariable.touppercase() + “<br>”);
17:
18: var firststring = “my string”;
19: var finalstring = firststring.bold().tolowercase().fontcolor(“red”);
20: / -->
21: </script>


12 创建数组

1: <script language=”javascript”>
2: <!--
3: var myarray = new array(5);
4: myarray[0] = “first entry”;
5: myarray[1] = “second entry”;
6: myarray[2] = “third entry”;
7: myarray[3] = “fourth entry”;
8: myarray[4] = “fifth entry”;
9: var anotherarray = new array(“first entry”,”second entry”,”third entry”,”fourth entry”,”fifth entry”);
10: / -->
11: </script>


13 数组排序

1: <script language=”javascript”>
2: <!--
3: var myarray = new array(5);
4: myarray[0] = “z”;
5: myarray[1] = “c”;
6: myarray[2] = “d”;
7: myarray[3] = “a”;
8: myarray[4] = “q”;
9: document.write(myarray.sort());
10: / -->
11: </script>


14 分割字符串

1: <script language=”javascript”>
2: <!--
3: var myvariable = “a,b,c,d”;
4: var stringarray = myvariable.split(“,”);
5: document.write(stringarray[0]);
6: document.write(stringarray[1]);
7: document.write(stringarray[2]);
8: document.write(stringarray[3]);
9: / -->
10: </script>


15 弹出警告信息

1: <script language=”javascript”>
2: <!--
3: window.alert(“hello”);
4: / -->
5: </script>


16 弹出确认框

1: <script language=”javascript”>
2: <!--
3: var result = window.confirm(“click ok to continue”);
4: / -->
5: </script>


17 定义函数

1: <script language=”javascript”>
2: <!--
3: function multiple(number1,number2) {
4: var result = number1 * number2;
5: return result;
6: }
7: / -->
8: </script>


18 调用js函数

1: <a href=/webjx/”#” onclick=”functionname()”>link text</a>
2: <a href="/webjx/”javascript:functionname"()”>link text</a>


19 在页面加载完成后执行函数

1: <body onload=”functionname();”>
2: body of the page
3: </body>


20 条件判断

1: <script>
2: <!--
3: var userchoice = window.confirm(“choose ok or cancel”);
4: var result = (userchoice == true) ? “ok” : “cancel”;
5: document.write(result);
6: / -->
7: </script>


21 指定次数循环

1: <script>
2: <!--
3: var myarray = new array(3);
4: myarray[0] = “item 0”;
5: myarray[1] = “item 1”;
6: myarray[2] = “item 2”;
7: for (i = 0; i < myarray.length; i++) {
8: document.write(myarray + “<br>”);
9: }
10: / -->
11: </script>


22 设定将来执行

1: <script>
2: <!--
3: function hello() {
4: window.alert(“hello”);
5: }
6: window.settimeout(“hello()”,5000);
7: / -->
8: </script>


23 定时执行函数

1: <script>
2: <!--
3: function hello() {
4: window.alert(“hello”);
5: window.settimeout(“hello()”,5000);
6: }
7: window.settimeout(“hello()”,5000);
8: / -->
9: </script>


24 取消定时执行

1: <script>
2: <!--
3: function hello() {
4: window.alert(“hello”);
5: }
6: var mytimeout = window.settimeout(“hello()”,5000);
7: window.cleartimeout(mytimeout);
8: / -->
9: </script>


25 在页面卸载时候执行函数

1: <body onunload=”functionname();”>
2: body of the page
3: </body>

javascript就这么回事2:浏览器输出


26 访问document对象

1: <script language=”javascript”>
2: var myurl = document.url;
3: window.alert(myurl);
4: </script>


27 动态输出html

1: <script language=”javascript”>
2: document.write(“<p>here’s some information about this document:</p>”);
3: document.write(“<ul>”);
4: document.write(“<li>referring document: “ + document.referrer + “</li>”);
5: document.write(“<li>domain: “ + document.domain + “</li>”);
6: document.write(“<li>url: “ + document.url + “</li>”);
7: document.write(“</ul>”);
8: </script>


28 输出换行

1: document.writeln(“<strong>a</strong>”);
2: document.writeln(“b”);


29 输出日期

1: <script language=”javascript”>
2: var thisdate = new date();
3: document.write(thisdate.tostring());
4: </script>


30 指定日期的时区

1: <script language=”javascript”>
2: var myoffset = -2;
3: var currentdate = new date();
4: var useroffset = currentdate.gettimezoneoffset()/60;
5: var timezonedifference = useroffset - myoffset;
6: currentdate.sethours(currentdate.gethours() + timezonedifference);
7: document.write(“the time and date in central europe is: “ + currentdate.tolocalestring());
8: </script>


31 设置日期输出格式

1: <script language=”javascript”>
2: var thisdate = new date();
3: var thistimestring = thisdate.gethours() + “:” + thisdate.getminutes();
4: var thisdatestring = thisdate.getfullyear() + “/” + thisdate.getmonth() + “/” + thisdate.getdate();
5: document.write(thistimestring + “ on “ + thisdatestring);
6: </script>


32 读取url参数

1: <script language=”javascript”>
2: var urlparts = document.url.split(“?”);
3: var parameterparts = urlparts[1].split(“&”);
4: for (i = 0; i < parameterparts.length; i++) {
5: var pairparts = parameterparts.split(“=”);
6: var pairname = pairparts[0];
7: var pairvalue = pairparts[1];
8: document.write(pairname + “ :“ +pairvalue );
9: }
10: </script>

你还以为html是无状态的么?

33 打开一个新的document对象

1: <script language=”javascript”>
2: function newdocument() {
3: document.open();
4: document.write(“<p>this is a new document.</p>”);
5: document.close();
6: }
7: </script>


34 页面跳转

1: <script language=”javascript”>
2: window.location = “http://www.liu21st.com/”;
3: </script>


35 添加网页加载进度窗口

1: <html>
2: <head>
3: <script language='javascript'>
4: var placeholder = window.open('holder.html','placeholder','width=200,height=200');
5: </script>
6: <title>the main page</title>
7: </head>
8: <body onload='placeholder.close()'>
9: <p>this is the main page</p>
10: </body>
11: </html>


javascript就这么回事3:图像


36 读取图像属性

1: <img src="http://www.webjx.com/”image1.jpg"” name=”myimage”>
2: <a href=/webjx/”# ” onclick=”window.alert(document.myimage.width)”>width</a>
3:


37 动态加载图像

1: <script language=”javascript”>
2: myimage = new image;
3: myimage.src = “tellers1.jpg”;
4: </script>


38 简单的图像替换

1: <script language=”javascript”>
2: rollimage = new image;
3: rollimage.src = “rollimage1.jpg”;
4: defaultimage = new image;
5: defaultimage.src = “image1.jpg”;
6: </script>
7: <a href="/webjx/”myurl"” onmouseover=”document.myimage.src = rollimage.src;”
8: onmouseout=”document.myimage.src = defaultimage.src;”>
9: <img src="http://www.webjx.com/”image1.jpg"” name=”myimage” width=100 height=100 border=0>


39 随机显示图像

1: <script language=”javascript”>
2: var imagelist = new array;
3: imagelist[0] = “image1.jpg”;
4: imagelist[1] = “image2.jpg”;
5: imagelist[2] = “image3.jpg”;
6: imagelist[3] = “image4.jpg”;
7: var imagechoice = math.floor(math.random() * imagelist.length);
8: document.write(‘<img src=http://www.webjx.com/”’ + imagelist[imagechoice] + ‘“>’);
9: </script>


40 函数实现的图像替换

1: <script language=”javascript”>
2: var source = 0;
3: var replacement = 1;
4: function createrollover(originalimage,replacementimage) {
5: var imagearray = new array;
6: imagearray[source] = new image;
7: imagearray[source].src = originalimage;
8: imagearray[replacement] = new image;
9: imagearray[replacement].src = replacementimage;
10: return imagearray;
11: }
12: var rollimage1 = createrollover(“image1.jpg”,”rollimage1.jpg”);
13: </script>
14: <a href=/webjx/”#” onmouseover=”document.myimage1.src = rollimage1[replacement].src;”
15: onmouseout=”document.myimage1.src = rollimage1[source].src;”>
16: <img src="http://www.webjx.com/”image1.jpg"” width=100 name=”myimage1” border=0>
17: </a>


41 创建幻灯片

1: <script language=”javascript”>
2: var imagelist = new array;
3: imagelist[0] = new image;
4: imagelist[0].src = “image1.jpg”;
5: imagelist[1] = new image;
6: imagelist[1].src = “image2.jpg”;
7: imagelist[2] = new image;
8: imagelist[2].src = “image3.jpg”;
9: imagelist[3] = new image;
10: imagelist[3].src = “image4.jpg”;
11: function slideshow(imagenumber) {
12: document.slideshow.src = imagelist[imagenumber].src;
13: imagenumber += 1;
14: if (imagenumber < imagelist.length) {
15: window.settimeout(“slideshow(“ + imagenumber + “)”,3000);
16: }
17: }
18: </script>
19: </head>
20: <body onload=”slideshow(0)”>
21: <img src="http://www.webjx.com/”image1.jpg"” width=100 name=”slideshow”>


42 随机广告图片

1: <script language=”javascript”>
2: var imagelist = new array;
3: imagelist[0] = “image1.jpg”;
4: imagelist[1] = “image2.jpg”;
5: imagelist[2] = “image3.jpg”;
6: imagelist[3] = “image4.jpg”;
7: var urllist = new array;
8: urllist[0] = “http://some.host/”;
9: urllist[1] = “http://another.host/”;
10: urllist[2] = “http://somewhere.else/”;
11: urllist[3] = “http://right.here/”;
12: var imagechoice = math.floor(math.random() * imagelist.length);
13: document.write(‘<a href=/webjx/”’ + urllist[imagechoice] + ‘“><img src=http://www.webjx.com/”’ + imagelist[imagechoice] + ‘“></a>’);
14: </script>

javascript就这么回事4:表单


还是先继续写完js就这么回事系列吧~
43 表单构成

1: <form method=”post” action=”target.html” name=”thisform”>
2: <input type=”text” name=”mytext”>
3: <select name=”myselect”>
4: <option value=”1”>first choice</option>
5: <option value=”2”>second choice</option>
6: </select>
7: <br>
8: <input type=”submit” value=”submit me”>
9: </form>


44 访问表单中的文本框内容

1: <form name=”myform”>
2: <input type=”text” name=”mytext”>
3: </form>
4: <a href='/webjx/#' onclick='window.alert(document.myform.mytext.value);'>check text field</a>


45 动态复制文本框内容

1: <form name=”myform”>
2: enter some text: <input type=”text” name=”mytext”><br>
3: copy text: <input type=”text” name=”copytext”>
4: </form>
5: <a href=/webjx/”#” onclick=”document.myform.copytext.value =
6: document.myform.mytext.value;”>copy text field</a>


46 侦测文本框的变化

1: <form name=”myform”>
2: enter some text: <input type=”text” name=”mytext” onchange=”alert(this.value);”>
3: </form>


47 访问选中的select

1: <form name=”myform”>
2: <select name=”myselect”>
3: <option value=”first choice”>1</option>
4: <option value=”second choice”>2</option>
5: <option value=”third choice”>3</option>
6: </select>
7: </form>
8: <a href='/webjx/#' onclick='alert(document.myform.myselect.value);'>check selection list</a>


48 动态增加select项

1: <form name=”myform”>
2: <select name=”myselect”>
3: <option value=”first choice”>1</option>
4: <option value=”second choice”>2</option>
5: </select>
6: </form>
7: <script language=”javascript”>
8: document.myform.myselect.length++;
9: document.myform.myselect.options[document.myform.myselect.length - 1].text = “3”;
10: document.myform.myselect.options[document.myform.myselect.length - 1].value = “third choice”;
11: </script>


49 验证表单字段

1: <script language=”javascript”>
2: function checkfield(field) {
3: if (field.value == “”) {
4: window.alert(“you must enter a value in the field”);
5: field.focus();
6: }
7: }
8: </script>
9: <form name=”myform” action=”target.html”>
10: text field: <input type=”text” name=”myfield”onblur=”checkfield(this)”>
11: <br><input type=”submit”>
12: </form>


50 验证select项

1: function checklist(selection) {
2: if (selection.length == 0) {
3: window.alert(“you must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: }


51 动态改变表单的action

1: <form name=”myform” action=”login.html”>
2: username: <input type=”text” name=”username”><br>
3: password: <input type=”password” name=”password”><br>
4: <input type=”button” value=”login” onclick=”this.form.submit();”>
5: <input type=”button” value=”register” onclick=”this.form.action = ‘register.html’; this.form.submit();”>
6: <input type=”button” value=”retrieve password” onclick=”this.form.action = ‘password.html’; this.form.submit();”>
7: </form>


52 使用图像按钮

1: <form name=”myform” action=”login.html”>
2: username: <input type=”text” name=”username”><br>
3: password: <input type=”password”name=”password”><br>
4: <input type=”image” src="http://www.webjx.com/”login.gif"” value=”login”>
5: </form>
6:


53 表单数据的加密

1: <script language='javascript'>
2: <!--
3: function encrypt(item) {
4: var newitem = '';
5: for (i=0; i < item.length; i++) {
6: newitem += item.charcodeat(i) + '.';
7: }
8: return newitem;
9: }
10: function encryptform(myform) {
11: for (i=0; i < myform.elements.length; i++) {
12: myform.elements.value = encrypt(myform.elements.value);
13: }
14: }
15:
16: /-->
17: </script>
18: <form name='myform' onsubmit='encryptform(this); window.alert(this.myfield.value);'>
19: enter some text: <input type=text name=myfield><input type=submit>
20: </form>

 

javascript就这么回事5:窗口和框架


54 改变浏览器状态栏文字提示

1: <script language=”javascript”>
2: window.status = “a new status message”;
3: </script>


55 弹出确认提示框

1: <script language=”javascript”>
2: var userchoice = window.confirm(“click ok or cancel”);
3: if (userchoice) {
4: document.write(“you chose ok”);
5: } else {
6: document.write(“you chose cancel”);
7: }
8: </script>


56 提示输入

1: <script language=”javascript”>
2: var username = window.prompt(“please enter your name”,”enter your name here”);
3: document.write(“your name is “ + username);
4: </script>


57 打开一个新窗口

1: /打开一个名称为mynewwindow的浏览器新窗口
2: <script language=”javascript”>
3: window.open(“http://www.liu21st.com/”,”mynewwindow”);
4: </script>


58 设置新窗口的大小

1: <script language=”javascript”>
2: window.open(“http://www.liu21st.com/”,”mynewwindow”,'height=300,width=300');
3: </script>


59 设置新窗口的位置

1: <script language=”javascript”>
2: window.open(“http://www.liu21st.com/”,”mynewwindow”,'height=300,width=300,left=200,screenx=200,top=100,screeny=100');
3: </script>


60 是否显示工具栏和滚动栏

1: <script language=”javascript”>
2: window.open(“http:


61 是否可以缩放新窗口的大小

1: <script language=”javascript”>
2: window.open('http://www.liu21st.com/' , 'mynewwindow', 'resizable=yes' );</script>


62 加载一个新的文档到当前窗口

1: <a href='/webjx/#' onclick='document.location = '125a.html';' >open new document</a>


63 设置页面的滚动位置

1: <script language=”javascript”>
2: if (document.all) { /如果是ie浏览器则使用scrolltop属性
3: document.body.scrolltop = 200;
4: } else { /如果是netscape浏览器则使用pageyoffset属性
5: window.pageyoffset = 200;
6: }</script>


64 在ie中打开全屏窗口

1: <a href='/webjx/#' onclick=”window.open('http://www.juxta.com/','newwindow','fullscreen=yes');”>open a full-screen window</a>


65 新窗口和父窗口的操作

1: <script language=”javascript”>
2: /定义新窗口
3: var newwindow = window.open(“128a.html”,”newwindow”);
4: newwindow.close(); /在父窗口中关闭打开的新窗口
5: </script>
6: 在新窗口中关闭父窗口
7: window.opener.close()


66 往新窗口中写内容

1: <script language=”javascript”>
2: var newwindow = window.open(“”,”newwindow”);
3: newwindow.document.open();
4: newwindow.document.write(“this is a new window”);
5: newwindow.document.close();
6: </script>


67 加载页面到框架页面

1: <frameset cols=”50%,*”>
2: <frame name=”frame1” src="http://www.webjx.com/”135a.html"”>
3: <frame name=”frame2” src="http://www.webjx.com/”about:blank"”>
4: </frameset>
5: 在frame1中加载frame2中的页面
6: parent.frame2.document.location = “135b.html”;


68 在框架页面之间共享脚本
如果在frame1中html文件中有个脚本

1: function doalert() {
2: window.alert(“frame 1 is loaded”);
3: }

那么在frame2中可以如此调用该方法

1: <body onload=”parent.frame1.doalert();”>
2: this is frame 2.
3: </body>


69 数据公用
可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用

1: <script language=”javascript”>
2: var persistentvariable = “this is a persistent value”;
3: </script>
4: <frameset cols=”50%,*”>
5: <frame name=”frame1” src="http://www.webjx.com/”138a.html"”>
6: <frame name=”frame2” src="http://www.webjx.com/”138b.html"”>
7: </frameset>


这样在frame1和frame2中都可以使用变量persistentvariable
70 框架代码库
根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1: <frameset cols=”0,50%,*”>
2: <frame name=”codeframe” src="http://www.webjx.com/”140code.html"”>
3: <frame name=”frame1” src="http://www.webjx.com/”140a.html"”>
4: <frame name=”frame2” src="http://www.webjx.com/”140b.html"”>
 

posted on 2007-07-30 18:01 李云泽 阅读(136) 评论(0)  编辑  收藏 所属分类: javascript


只有注册用户登录后才能发表评论。


网站导航: