javascript教程 10例子

小丁哥日常 09-04 547

前言：

今天咱们对“js0001js”可能比较看重，姐妹们都需要了解一些“js0001js”的相关资讯。那么小编在网摘上收集了一些关于“js0001js””的相关文章，希望大家能喜欢，咱们快快来了解一下吧！

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

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

//能够改变 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; }}

//变量function onClickEvent04(){ //隐藏 divNone(); var x = 7; var y = 8; var z = x + y; document.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 + " 岁。";}

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

//字符串方法function onClickEvent07(){ //隐藏 divNone(); var str = "Hello JavaScript, welcome to learn javascript"; 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 onClickEvent08(){ //隐藏 divNone(); var cars = ["Audi", "BMW", "porsche"]; document.getElementById("demo").innerHTML = cars;}

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

//随机function onClickEvent10(){ //隐藏 divNone(); 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>JavaScript实例案例</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">你好javascript</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/javascript"> //随机 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 JavaScript, welcome to learn javascript"; 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 JavaScript"; } //显示日期 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>

本文地址：http://www.longkongtuishu.com/ca6fcDWsCA1cFDVE.html

标签： #js0001js