jascript实例教程

//显示 function divBlock(){ document.getElementById(“demo01″).style.display=”block”; } //隐藏function divNone(){ document.getElementById(“demo01″).style.display=”none”; }//显示日期function onClickEvent01(){ divNone(); document.getElementById(‘demo’).innerHTML = Date();}

//显示函数div block () {document。getelementbyid (“demo01 “)。风格。display = ” block}//隐藏函数div none () {document。getelementbyid (“demo01 “)。风格。display = ” none}//显示日期函数onclick event 01(){ div none()；document.getElementById(‘demo ‘)。innerHTML = Date()；}

//改变 HTML 内容function onClickEvent02(){ divNone(); document.getElementById(“demo”).innerHTML = “Hello JaScript”;}

//更改HTML内容函数onclick event 02(){ div none()；document.getElementById(“demo “)。innerHTML = ” Hello JaScript}

//能够改变 HTML 属性值var number=1;function onClickEvent03(){ //显示 divBlock(); //改图片大小 if(number==1){ document.getElementById(‘domeImage’).src=’images/0001.png’; //改字体大小 document.getElementById(“demo”).style.fontSize = “25px”; number=2; }else{ document.getElementById(‘domeImage’).src=’images/000.png’; //改字体大小 document.getElementById(“demo”).style.fontSize = “35px”; number=1; }}

HTML属性的值可以更改。var数= 1；函数onclick event 03(){//Display div block()；//更改图片大小if (number = = 1) {document。getelementbyid (‘domeimage ‘)。src =’ images/0001。png ‘；//更改文档的字体大小。getElementByid (“demo “)。风格。Fontsize = ” 25px数字= 2；} else { document . getelementbyid(‘ domeImage ‘)。src = ‘ images/000 . png ‘；//更改文档的字体大小。getElementByid (“demo “)。风格。Fontsize = ” 35px数字= 1；}}

//变量function onClickEvent04(){ //隐藏 divNone(); var x = 7; var y = 8; var z = x + y; document.getElementById(“demo”).innerHTML = “z 的值是：” + z;}

//变量函数onclick event 04(){//Hide div none()；var x = 7；var y = 8；var z = x+y；文档的价值。getelementbyid (“demo “)。innerhtml = “z是:”+z；}

//创建对象function onClickEvent05(){ //隐藏 divNone(); var person = { firstName : “liveorverday”, lastName : “Scandy”, age : 30, eyeColor : “blue” }; document.getElementById(“demo”).innerHTML = person.firstName + ” 现在 ” + person.age + ” 岁。”;}

//创建对象函数onclick event 05(){//Hide div none()；var person = { first name:” liveor verday “，lastName : “Scandy “，年龄:30，eye color:” blue ” }；文档。getelementbyid (“demo “)。innerhtml = person。名字+“现在”+person.age+“岁。”；}

//提示function onClickEvent06(){ //隐藏 divNone(); alert(“这是个提示信息！！”);}

//提示函数onclick event 06(){//hide div none()；Alert(“这是提醒！!”);}

//字符串方法function onClickEvent07(){ //隐藏 divNone(); var str = “Hello JaScript, welcome to learn jascript”; var strv=””; //方法返回字符串中指定文本首次出现的索引（位置） var pos = str.indexOf(“welcome”); strv=strv+”indexOf：”+pos; //方法返回指定文本在字符串中最后一次出现的索引 var pos01 = str.lastIndexOf(“welcome”); strv=strv+”；lastIndexOf：”+pos01; //检索字符串中的字符串 var pos02 = str.search(“welcome”); strv=strv+”；search：”+pos02; //slice() 提取字符串的某个部分并在新字符串中返回被提取的部分 var pos03 = str.slice(18,25); strv=strv+”；slice：”+pos03; // substring() 无法接受负的索引 var pos04 = str.substring(18,25); strv=strv+”；substring：”+pos04; //substr() 方法 开始位置，第二个参数规定被提取部分的长度。 var pos05 = str.substr(18,7); strv=strv+”；substr：”+pos05; //replace() 方法用另一个值替换在字符串中指定的值 替换字符串内容 var pos06 = str.replace(“welcome”,”liveorverday”); strv=strv+”；replace：”+pos06; //toUpperCase() 把字符串转换为大写 var pos07 = str.toUpperCase(); strv=strv+”；toUpperCase：”+pos07; //toLowerCase() 把字符串转换为小写 var pos08 = str.toLowerCase(); strv=strv+”；toLowerCase：”+pos08; //concat() 连接两个或多个字符串 可用于代替加运算符。下面两行是等效的 var live=”连接liveorverday”; var pos09 = str.concat(“”,live); strv=strv+”；concat：”+pos09; //trim() 方法删除字符串两端的空白符 var pos10 = str.trim(); strv=strv+”；trim：”+pos10; //charAt() 方法返回字符串中指定下标（位置）的字符串 var pos11 = str.charAt(0); strv=strv+”；charAt：”+pos11; //charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码 var pos12 = str.charCodeAt(0); strv=strv+”；charCodeAt：”+pos12; //length 字符串的长度 var pos13 = str.length; strv=strv+”；length：”+pos13; document.getElementById(“demo”).innerHTML = strv;}

//字符串方法函数onclick event 07(){//Hide div none()；var str = “你好JaScript，欢迎学习JaScript “；var strv =//方法返回指定文本在字符串中第一次出现的索引(位置)，var pos = str . index of(” welcome “)；strv = strv+” index of:”+pos；//方法返回索引var Pos01 = str。字符串中最后一个出现的指定文本的lastindexof(” welcome “)；strv = strv+”；lastIndexOf:”+pos 01；//检索字符串中的字符串var pos 02 = str . search(” welcome “)；strv = strv+”；搜索:“+pos 02；//slice()提取字符串的某一部分，返回新字符串中提取的部分var pos03 = str.slice(18，25)；strv = strv+”；切片:“+pos 03；// substring()不能接受负索引变量pos04 = str.substring(18，25)；strv = strv+”；子串:”+pos 04；//substr()方法的起始位置，第二个参数指定提取部分的长度。var pos05 = str.substr(18，7)；strv = strv+”；substr:”+pos 05；//replace()方法将字符串中指定的值替换为另一个值，以替换字符串内容var pos 06 = str。替换(” welcome “，” live over “)；strv = strv+”；替换:“+pos 06；//toUpperCase()将字符串转换成大写的var pos 07 = str . toupper case()；strv = strv+”；toupper case:“+pos 07；///toLowerCase()将字符串转换成小写的var pos 08 = str . toLowerCase()；strv = strv+”；to lower case:“+pos 08；//concat()连接两个或多个字符串，可以用来代替加法运算符。下面两行相当于var live = ” Connect liveorverdayvar pos09 = str.concat(“，live)；strv = strv+”；concat:”+pos 09；//trim()方法删除字符串两端的空白字符var pos 10 = str . trim()；strv = strv+”；trim:“+pos 10；//charAt()方法返回字符串中带有指定下标(位置)的字符串var pos 11 = str . charAt(0)；strv = strv+”；charAt:“+pos 11；//charCodeAt()方法返回字符串中具有指定索引的字符的unicode代码var pos 12 = str . charCodeAt(0)；strv = strv+”；charCodeAt:”+pos 12；//长度字符串var pos13 = str.length的长度；strv = strv+”；长度:“+pos 13；document.getElementById(“demo “)。innerHTML = strv}

//数组function onClickEvent08(){ //隐藏 divNone(); var cars = [“Audi”, “BMW”, “porsche”]; document.getElementById(“demo”).innerHTML = cars;}

//数组函数onclick event 08(){//Hide div none()；var cars = [“奥迪”、”宝马”、”保时捷”]；document.getElementById(“demo “)。innerHTML =汽车；}

//数组排序function onClickEvent09(){ //隐藏 divNone(); var fruits = [“Banana”, “Orange”, “Apple”, “Mango”]; fruits.sort(); document.getElementById(“demo”).innerHTML = fruits;}

//数组排序函数onclick event 09(){//hide div none()；var水果= [“香蕉”、”橘子”、”苹果”、”芒果”]；水果. sort()；document.getElementById(“demo “)。innerHTML =水果；}

//随机function onClickEvent10(){ //隐藏 divNone(); document.getElementById(“demo”).innerHTML = Math.random();}

//随机函数onclick event 10(){//Hide div none()；document.getElementById(“demo “)。innerHTML = math . random()；}

<!DOCTYPE html><html><meta charset=”UTF-8″><meta http-equiv=”Expires” content=”0″><meta http-equiv=”Pragma” content=”no-cache”><meta http-equiv=”Cache-control” content=”no-cache”><meta http-equiv=”Cache” content=”no-cache”><body><h2>JaScript实例案例</h2>例子一 : <button type=”button” onclick=”onClickEvent01()”>显示日期和时间</button> <br/>例子二 : <button type=”button” onclick=”onClickEvent02()”>改变 HTML 内容</button> <br/>例子三 : <button type=”button” onclick=”onClickEvent03()”>能够改变 HTML 属性值</button> <br/>例子四 : <button type=”button” onclick=”onClickEvent04()”>变量</button> <br/>例子五 : <button type=”button” onclick=”onClickEvent05()”>创建对象</button> <br/>例子六 : <button type=”button” onclick=”onClickEvent06()”>提示信息</button> <br/>例子七 : <button type=”button” onclick=”onClickEvent07()”>字符串方法</button> <br/>例子八 : <button type=”button” onclick=”onClickEvent08()”>数组</button> <br/>例子九 : <button type=”button” onclick=”onClickEvent09()”>数组排序</button> <br/>例子十 : <button type=”button” onclick=”onClickEvent10()”>随机</button> <br/><!–显示结果–><div style=”height: 100px;”></div>显示结果<div id=”demo”>你好jascript</div><div id=”demo01″ style=”display: none”><img id=”domeImage” border=”0″ src=”images/000.png” height=”20%” width=”20%” style=”text-align:center;”/></div></body></html><script type=”text/jascript”> //随机 function onClickEvent10(){ //隐藏 divNone(); document.getElementById(“demo”).innerHTML = Math.random(); } //数组排序 function onClickEvent09(){ //隐藏 divNone(); var fruits = [“Banana”, “Orange”, “Apple”, “Mango”]; fruits.sort(); document.getElementById(“demo”).innerHTML = fruits; } //数组 function onClickEvent08(){ //隐藏 divNone(); var cars = [“Audi”, “BMW”, “porsche”]; document.getElementById(“demo”).innerHTML = cars; } //字符串方法 function onClickEvent07(){ //隐藏 divNone(); var str = “Hello JaScript, welcome to learn jascript”; var strv=””; //方法返回字符串中指定文本首次出现的索引（位置） var pos = str.indexOf(“welcome”); strv=strv+”indexOf：”+pos; //方法返回指定文本在字符串中最后一次出现的索引 var pos01 = str.lastIndexOf(“welcome”); strv=strv+”；lastIndexOf：”+pos01; //检索字符串中的字符串 var pos02 = str.search(“welcome”); strv=strv+”；search：”+pos02; //slice() 提取字符串的某个部分并在新字符串中返回被提取的部分 var pos03 = str.slice(18,25); strv=strv+”；slice：”+pos03; // substring() 无法接受负的索引 var pos04 = str.substring(18,25); strv=strv+”；substring：”+pos04; //substr() 方法 开始位置，第二个参数规定被提取部分的长度。 var pos05 = str.substr(18,7); strv=strv+”；substr：”+pos05; //replace() 方法用另一个值替换在字符串中指定的值 替换字符串内容 var pos06 = str.replace(“welcome”,”liveorverday”); strv=strv+”；replace：”+pos06; //toUpperCase() 把字符串转换为大写 var pos07 = str.toUpperCase(); strv=strv+”；toUpperCase：”+pos07; //toLowerCase() 把字符串转换为小写 var pos08 = str.toLowerCase(); strv=strv+”；toLowerCase：”+pos08; //concat() 连接两个或多个字符串 可用于代替加运算符。下面两行是等效的 var live=”连接liveorverday”; var pos09 = str.concat(“”,live); strv=strv+”；concat：”+pos09; //trim() 方法删除字符串两端的空白符 var pos10 = str.trim(); strv=strv+”；trim：”+pos10; //charAt() 方法返回字符串中指定下标（位置）的字符串 var pos11 = str.charAt(0); strv=strv+”；charAt：”+pos11; //charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码 var pos12 = str.charCodeAt(0); strv=strv+”；charCodeAt：”+pos12; //length 字符串的长度 var pos13 = str.length; strv=strv+”；length：”+pos13; document.getElementById(“demo”).innerHTML = strv; } //提示 function onClickEvent06(){ //隐藏 divNone(); alert(“这是个提示信息！！”); } //创建对象 function onClickEvent05(){ //隐藏 divNone(); var person = { firstName : “liveorverday”, lastName : “Scandy”, age : 30, eyeColor : “blue” }; document.getElementById(“demo”).innerHTML = person.firstName + ” 现在 ” + person.age + ” 岁。”; } //变量 function onClickEvent04(){ //隐藏 divNone(); var x = 7; var y = 8; var z = x + y; document.getElementById(“demo”).innerHTML = “z 的值是：” + z; } //能够改变 HTML 属性值 var number=1; function onClickEvent03(){ //显示 divBlock(); //改图片大小 if(number==1){ document.getElementById(‘domeImage’).src=’images/0001.png’; //改字体大小 document.getElementById(“demo”).style.fontSize = “25px”; number=2; }else{ document.getElementById(‘domeImage’).src=’images/000.png’; //改字体大小 document.getElementById(“demo”).style.fontSize = “35px”; number=1; } } //改变 HTML 内容 function onClickEvent02(){ divNone(); document.getElementById(“demo”).innerHTML = “Hello JaScript”; } //显示日期 function onClickEvent01(){ divNone(); document.getElementById(‘demo’).innerHTML = Date(); } //显示 function divBlock(){ document.getElementById(“demo01″).style.display=”block”; } //隐藏 function divNone(){ document.getElementById(“demo01″).style.display=”none”; }</script>& lt！DOCTYPE html & gt& lthtml & gt& ltmeta charset=”UTF-8 ” >& ltmeta http-equiv = ” Expires ” content = ” 0 ” >& ltmeta http-equiv = ” Pragma ” content = ” no-cache ” & gt；& ltmeta http-equiv = ” Cache-control ” content = ” no-Cache ” & gt；& ltmeta http-equiv = ” Cache ” content = ” no-Cache ” & gt；& ltbody & gt& lth2 & gtJaScript实例案例