首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
编程语言
> 详细
Javascript 常用函数【1】
时间：
2015-05-24 20:17:45
阅读：
177
评论：
0
收藏：
0
[点我收藏+]
标签：
1：基础知识
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=
"/”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=”#” onClick=”functionName()”>Link text</a>
2: <a href=
"/”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[i] + “<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[i].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.velee.cn”;
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=
"/”image1.jpg"” name=”myImage”>
2: <a href=”# ” 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=
"/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src=
"/”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=”’ + 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=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src=
"/”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=
"/”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=”’ + urlList[imageChoice] + ‘“><img src=”’ + 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=
‘#‘ 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=”#” 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=
‘#‘ 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=
"/”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[i].value = encrypt(myForm.elements[i].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.velee.cn”,”myNewWindow”);
4: </script>
58 设置新窗口的大小
1: <script language=”JavaScript”>
2: window.open(“http:
//www.velee.cn”,”myNewWindow”,‘height=300,width=300‘);
3: </script>
59 设置新窗口的位置
1: <script language=”JavaScript”>
2: window.open(“http:
//www.velee.cn”,”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.velee.cn‘ ,
‘myNewWindow‘,
‘resizable=yes‘ );</script>
62 加载一个新的文档到当前窗口
1: <a href=
‘#‘ 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=
‘#‘ 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=
"/”135a.html"”>
3: <frame name=”frame2” src=
"/”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=
"/”138a.html"”>
6: <frame name=”frame2” src=
"/”138b.html"”>
7: </frameset>
这样在frame1和frame2中都可以使用变量persistentVariable
70 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
1: <frameset cols=”0,50%,*”>
2: <frame name=”codeFrame” src=
"/”140code.html"”>
3: <frame name=”frame1” src=
"/”140a.html"”>
4: <frame name=”frame2” src=
"/”140b.html"”>
5: </frameset>
教程：事半功倍系列之javascript From:向东IT博客
本文由经典论坛 邓永炎 整理
清华大学出版的《事半功倍系列 javascript》,本人照着书敲出来的,有些翻译了一下.前几年看了一下,最近无事,重新翻了翻,很有帮助.本书应该有光盘的,但学校的书,光盘不知在哪.希望对你学 javascript有帮助
第一章javascript简介
1.在地址栏输入javascript语句
Javascript:Document.write(
"显示文字")
2.将javascript嵌入 HTML文档
<script language=javascript>
document.bgColor=
"blue"
</script>
第二章 使用变量和数组
1.声明变量
<script language=javascripe>
Var answer1,answer2,answer3,answer4;
answer1=9;
answer2=2.5
answer3=
"Milkey May"
answer4=
true
</script>
2.使用整数
<script language=javascript>
var decimalNum,hexadecimalNum,octalNum
decimalNum=24
hexadecimalNum=0×24
octalNum=024
document.write(
"显示十进制数："+ decimalNum+
"<br>")
document.write(
"显示十六进制数："+ hexadecimalNum +
"<br>")
document.write(
"显示八进制数："+ octalNum +
"<br>")
</script>
3.使用浮点数
<script language=javascript>
var num1,num2,num3,num4
num1=1234567890000.0
num2=5.14e23
num3=0.0000123456
num4=6.0254e3-4
document.write(
"浮点数1："+num1+
"<br>")
document.write(
"浮点数2："+num2+
"<br>")
document.write(
"浮点数3："+num3+
"<br>")
document.write(
"浮点数4："+num4+
"<br>")
</script>
4.使用布尔值
<script language=javascript>
var answer1,answer2
answer1=
true
answer2=
false
document.write(
"显示布尔1："+answer1+
"<br>")
document.write(
"显示布尔2："+answer2+
"<br>")
</script>
5.使用字符串
<script language=javascript>
var str1,str2
str1=
"fdsgdg dsfdsf china"
str2=
"武汉市广播电视大学"
document.write(
"显示字符串1："+str1+
"<br>")
document.write(
"显示字符串2："+str2+
"<br>")
</script>
6.确定变量类型
<script>
var answer1,answer2,answer3,answer4
answer1=9
answer2=2.5
answer3=
"milky may"
answer4=
true
document.write(
"变量1的类型是："+
typeof answer1 +
"<br>")
document.write(
"变量2的类型是："+
typeof answer2 +
"<br>")
document.write(
"变量3的类型是："+
typeof answer3 +
"<br>")
document.write(
"变量4的类型是："+
typeof answer4 +
"<br>")
</script>
7.将字符串转换成数字
<script>
var str1=
"31 days in january"
var int1=parseInt(str1)
document.write(
"str1的数据类型是 ："+
typeof str1+
"<br>")
document.write(
"int1的数据类型是 ："+
typeof int1+
"<br>")
</script>
8.将数字转换成字符串
<script>
var int1=256
var str1=
""+int1
document.write(
"str1的数据类型是 ："+
typeof str1+
"<br>")
document.write(
"int1的数据类型是 ："+
typeof int1+
"<br>")
</script>
9.声明数组
<script>
array=
new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
document.write(
"数组是："+array[0]+
" "+array[1]+
" "+array[2]+
" "+array[3]+
" "+array[4])
</script>
10.确定数组元素的个数
<script>
array=
new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
document.write(
"数组是："+array[0]+
" "+array[1]+
" "+array[2]+
" "+array[3]+
" "+array[4]+
"<br>")
document.write(
"数组的元素个数是"+array.length)
</script>
11.将数组转换为字符串
<script>
array=
new Array()
array[0]=
"dark"
array[1]=
"apple"
array[2]=
"nebula"
array[3]=
"water"
str1=array.join()
str2=array.join(
" ")
document.write(str1+
"<br>")
document.write(str2)
</script>
12.对数组排序
<script>
array=
new Array()
array[0]=
"dark"
array[1]=
"apple"
array[2]=
"nebula"
array[3]=
"water"
str1=array.sort()
document.write(str1+
"<br>")
</script>
第三章 创建表达式
本文摘自:拾金者(http:
//www.xkde.com) 详细出处参考：http://www.xkde.com/WapContent-199-9524.aspx?ppp=1
1.使用算术运算符
<script>
var1=12
var2=10
varadd=var1+var2
varsub=var1-var2
varmult=var1*var2
vardiv=var1/var2
varmod=var1%var2
document.write(
"数据1是："+var1+
"<br>")
document.write(
"数据2是："+var2+
"<br>")
document.write(
"数据相加是："+varadd+
"<br>")
document.write(
"数据相减是："+varsub+
"<br>")
document.write(
"数据相乘是："+varmult+
"<br>")
document.write(
"数据相除是："+vardiv+
"<br>")
document.write(
"数据相除取余数是："+varmod+
"<br>")
</script>
2.递增变量和递减变量
<script>
days=1
document.write(
"输出变量"+days+
"<br>")
days++
document.write(
"递增后变量变为："+days)
</script>
3.创建比较表达式
<script>
daysofmonth=28
if(daysofmonth==28)
month=
"february"
document.write(
"days of month:"+daysofmonth+
"<br>")
document.write(
"month:"+month)
</script>
4.创建逻辑表达式
<script>
dayofmonth=28
if(dayofmonth==28 || dayofmonth==29)
month=
"february"
document.write(
"days of month:"+dayofmonth+
"<br>")
document.write(
"month:"+month)
</script>
5.使用条件运算符
<script language=
"javascript">
stomach=
"hungry";
time=
"5:00";
(stomach==
"hungry"&&time==
"5:00") ? eat =
"dinner":eat=
"a snack";
document.write(
"输出结果"+eat);
</script>
6.识别数字
<script>
var1=24;
(isNaN(var1))?document.write(
"变量var1"+var1+
"不是数字"):Document.write(
"变量var1"+var1+
"是数字")
</script>
第四章 控制程序流程
1.使用IF –Else语句
<script>
month=
"december"
date=25
if(month==
"december" && date==25)
document.write(
"今天是圣诞节,商店关门")
else
document.write(
"欢迎,您来商店购物")
</script>
2.使用
for 循环
<script>
for (count=1;count<=10;count++)
document.write(
"输出第"+count+
"句"+
"<br>")
</script>
3.使用
while循环
<script>
count=1
while(count<=15){
document.write(
"输出第"+count+
"句" +
"<br>")
count++}
</script>
4.中断循环
<script>
count=1
while(count<=15){
count++
if(count==8)
break;
document.write(
"输出第"+count+
"句"+
"<br>")}
</script>
5.继续循环
<script>
count=1
while(count<=15){
count++
if(count==8)
continue;
document.write(
"输出第"+count+
"句"+
"<br>")}
</script>
6.使用javascript定时器
<script>
function rabbit()
{document.write(
"输出语句")
}
</script>
<body onload=window.setTimeout(rabbit(),5000)>
7.设置定期间隔
<script>
window.setInterval(
"document.form1.text2.value=document.form1.text1.value",3000)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
</form>
8.清除超时和间隔
<script>
stop=window.setInterval(
"document.form1.text2.value=document.form1.text1.value",300)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
<input type=button name=button1 value=
" 清除超时和间隔" onclick=clearInterval(stop)>
</form>
第五章 使用函数
1.声明函数
<script>
function quote()
{ document.write(
"输出语句")
}
</script>
2.调用函数
<script>
function quote()
{ document.write(
"输出语句")
}
quote()
</script>
3.了解全局变量和局部变量
任何不用
var关键字声明的变量都是全局变量,任何在函数外声明的变量都是全局变量
4.将参数传送给函数
<script>
function f(item)
{document.write(
"输出参数"+item+
"<br>")
}
f(
"fgdfgd")
f(
"参数二")
</script>
5.从函数返回值
<script>
function average(var1,var2,var3)
{ave=(var1+var2+var3)/3;
document.write(
"输出结果");
return ave;
}
document.write(average(34,56,78))
</script>
6.通过HTML链接调用函数
<script>
function quote(){
document.write(
" 输出字符串")
}
</script>
<a href=javascript:quote()>通过HTML链接调用函数</a>
<a href=javascript:Document.write(
"输出字符")> 通过HTML链接调用函数,直接写javascript语句</a>
第六章 处理事件
1.检查鼠标单击
<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.button1.value=
‘there‘>
</form>
2.检测双击
<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.button1.value=
‘你单击了按钮‘ ondblclick=document.form1.button1.value=
‘你双击了该按钮‘>
</form>
3.创建悬停按钮
<img src=go.gif onmouseover=document.images[0].src=
‘go2.gif‘ onmouseout= document.images[0].src=
‘go.gif‘>
4.检测按键
<form name=form1>
<input type=text name=text1 value=hello onkeypress=
"if(window.event.keyCode==‘100‘) document.form1.text1.value=‘你按了d键‘">
</form>
5.设置焦点
<form name=form1>
<input type=text name=text1 value=hello
onfous=document.form1.text1.value=
‘该文本框获得焦点‘
onblur=document.form1.text1.value=
‘该文本框失去焦点‘>
</form>
6.检测下拉菜单选择
<form name=form1>
<select name=select1 size=4
onChange=document.form1.text1.value=document.form1.select1.value>
<option value=
"北京">北京</option>
<option value=
"上海">上海</option>
<option value=
"武汉">武汉</option>
<option value=
"天津">天津</option>
<option value=
"大连">大连</option>
</select>
<input tppe=text name=text1 value=hello>
</form>
7.创建网页加载和卸载信息
<body onload=document.form1.text1.value=
‘页面加载完毕‘ onunload=alert(
‘再见,欢迎再来‘)>
<form name=form1>
<input type=text name=text1 value=
"页面正在加载 ……">
</form>
第七章 使用对象
1.理解对象\属性和方法
<body bgcolor=
"green">
<script>
document.write(
"页面背景颜色是:"+document.bgColor)
document.write(
"页面前景颜色是:"+document.fgColor)
</script>
2.使用网页元素对象
<script>
</script>
<form name=form1>
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>
<input type=button value=
"选择文本" onclick=document.form1.ta1.select()>
<input type=button value=
"显示文本" onclick=document.write(document.form1.ta1.value)>
</form>
3.使用子对象
<form name=form1>
<input type=text name=text1 value=hello>
</form>
<script>
document.form1.text1.value=
"gdfgfd"
</script>
<form name=form1>
<input type=radio name=radio1>男
<input type=radio name=radio2>女
</script>
<script>
document.form1.radio1.checked=
true
</script>
4.使用预定义对象
<script>
str1=
"dgdfgdfgdfhf固定法固定法功夫攻打法"
document.write(str1+
"<br>")
str2=str1.substr(5)
document.write(str2+
"<br>")
document.write(
"输出圆的面积:"+Math.PI*Math.pow(5.0,2))
</script>
5.创建新对象
<script>
today=
new Date()
document.write(
"今天是"+(today.getMonth()+1)+
"月"+today.getDate()+
"日"+
"<br>")
document.write(
"现在是:"+today.toLocaleString())
</script>
6.引用当前对象
<form name=form1>
<input type=text name=text1 value=
"dgdgdfgfd" onclick=
this.select()>
</script>
7.查看对象属性
<script>
for(prop
in window)
{document.write(
"window."+prop+
"="+window[prop]+
"<br>");}
for(prop2
in location)
{document.write(
"location."+prop2+
"="+location[prop]+
"<br>");}
</script>
8.使用Array对象
<script>
array=
new Array(10)
array[0]=
"bark"
array[1]=
"apple"
array[2]=
"nebula"
array[3]=
"cookie"
array[4]=
"technology"
document.write(
"数组元素个数是"+array.Length+
"<br>")
document.write(
"用 join将数组合并"+array.join(
" ")+
"<br>")
document.write(
" 数组排序"+array.sort())
</script>
9.使用 image 对象
<img src=**.gif alt=
"图片提示…." border=10>
<script>
document.write(
"图片提示是:"+document.images[0].alt+
"<br>")
document.write(
"图片边框大小是:"+document.images[0].broder)
</script>
10.预加载图像
<script>
freddy=
new Image()
freddy.src=freddy.gif
</script>
<body onload=document.images[0].src=freddy.src>
,<img src=
"blank.gif">
</body>
11.改变图像
<img src=freddy.gif><br>
<form name=form1>
<input type=button name=button1 value=
"改变图像" onclickd=document.images[0].src=dudjp.gif>
</form>
12.使用link和anchor对象
<a name=anchor1>锚点1<br>
<a href=http:
//www.microsoft.com>Microsoft</a><br>
<a href=http:
//www.sohu.com>sohu</a><br>
<a href=http:
//www.sina.com.cn>sina</a><br>
<script>
document.write(
"本页面共有"+document.links.length+
"链接"+
"<br>")
document.write(
"本页面共有"+document.anchors.length+
"锚点"+
"<br>")
document.write(
"第一个链接协议是"+document.links[0].protocol+
"<br>")
document.write(
"第一个链接路径是"+document.links[0].pathnamel+
"<br>")
document.write(
"第一个链接href是"+document.links[0].hrefl+
"<br>")
</script>
13.改变链接
<a href =http:
//www.microsoft.com>link</a>
<form name=form1>
<input type=button name=button1 value=
"改变链接" onclick=document.links[0].href=
‘http://www.sohu.com‘>
</form>
14.使用history对象
<form name=form1>
<input type=button name=button1 value=
"向后返回2页" onclick=window.history.go(-2)>
</form>
第八章 使用窗口
1.在浏览器的状态栏上显示文本
<body onload=window.status=
"欢迎光临我的站点">
<a href=http:
//www.sohu.com>sohu</a>
</body>
2.改变背景色
<script>
document.bgColor=
"orange"
</script>
3.列举背景颜色
<body bgColor =green>
<script>
document.write(
"当前背景色是:"+document.bgColor)
</script>
</body>
4.改变文本和链接颜色
<script>
document.bgColor=
"orange"
document.fgColor=
"blue"
document.linkColor=
"red"
</script>
<h2>看看这段文本颜色</h2>
<a href=http:
//www.sohu.com>sohu</a>
</body>
5.改变文档标题
<script>
name=
"Mouse"
document.title=
"welcome to "+name+
"‘s House"
document.write(document.title)
</script>
6.显示修改日期
<script>
document.write(
"本页面最后修改时间是"+document.lastModified)
</script>
7.查看当前文档的URL
<script>
document.write(
"本页面的URL:"+document.URL)
</script>
8.查看引用页
<script>
document.write(
"本页面的引用页是"+document.referrer)
</script>
9.打开新的浏览器窗口
<script>
window.open(
"*.htm",
"title",
"width=200,height=400,resizable=yes")
</script>
10.关闭远程窗口
close.html:
<script>
document.write(
"正文")
</script>
<form name=form1>
<input type=button name=button1va, , , lue=
"关闭" onclick=window.close()>
</form>
open.html
<script>
window.open(
"close.html",
"romote",
"width=200,height=400,resizable=yes")
</script>
11.打印窗口
<script>
document.write(
"正文")
</script>
<form name=form1>
<input type=button value=打印 onclick=window.print()>
</form>
12.移动窗口
<form name=form1>
水平方向<input type=text name=x value=20>
垂直方向<input type=text name=y value=50>
<input type=button value=
"移动窗口到…"onclick=window.moveTo(document.form1.x.value,document.form1.y.value)>
</form>
<form name=form1>
水平方向<input type=text name=x value=20>
垂直方向<input type=text name=y value=50>
<input type=button value=
"移动窗口"onclick=window.moveBy(document.form1.x.value,document.form1.y.value)>
</form>
13.改变窗口大小
<form name=form1>
水平方向<input type=text name=x value=200>
垂直方向<input type=text name=y value=500>
<input type=button value=
"改变窗口大小到….."onclick=window.resizeTo(document.form1.x.value,document.form1.y.value)>
</form>
<form name=form1>
水平方向<input type=text name=x value=200>
垂直方向<input type=text name=y value=500>
<input type=button value=
"改变窗口大小"onclick=window.resizeBy(document.form1.x.value,document.form1.y.value)>
</form>
14.用警告对话框通知用户
<script>
window.alert(
"welcome")
</script>
15.用提示对话框接受输入
<script>
name=window.prompt(
"输入姓名",
"姓名")
document.write(
" 欢迎您:"+name+
"来到这里")
</script>
16.用确认对话框使用户做出决定
<script>
like=window.confirm(
"你觉得好吗?")
if(like==
true)
document.write(
"谢谢你的夸奖")
else
document.write(
"希望得到你的夸奖")
</script>
第九章 使用字符串
1.使用字符串对象
<script>
mystring=
"gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"
document.write(mystring)
document.write(mystring.bold())
document.write(mystring.toUpperCase())
</script>
2.使用子字符串
<script>
str1=
"fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"
document.write(str1)
document.write(str1.substring(0,13)+
"<br>")
document.write(str1.substr (20,11)+
"<br>")
</script>
3.连接字符串
<script>
str1=
"may you find"
str2=
"peace,happiness and prosperity.<br>"
document.write(str1+
"<br>")
document.write(str2)
document.write(str1.concat(str2))
document.write(str1+=str2)
</script>
转到此处仅作备忘，可以速查
Javascript 常用函数【1】
标签：
原文地址：http://www.cnblogs.com/aiqingqing/p/4526275.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论（
0
）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
Spring Cloud 从入门到精通（一）Nacos 服务中心初探
2021-07-29
基础的排序算法
2021-07-29
SpringBoot|常用配置介绍
2021-07-29
关于 .NET 与 JAVA 在 JIT 编译上的一些差异
2021-07-29
C语言常用函数-toupper()将字符转换为大写英文字母函数
2021-07-29
《手把手教你》系列技巧篇（十）-java+ selenium自动化测试-元素定位大法之By class name（详细教程）
2021-07-28
4-1 YAML配置文件 注入 JavaBean中
2021-07-28
【python】 用来将对象持久化的 pickle 模块
2021-07-28
马拉车算法
2021-07-28
用Python进行冒泡排序
2021-07-28
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码！
