//顯示 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 內(nèi)容 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; }
//創(chuàng)建對(duì)象 function onClickEvent05(){ //隱藏 divNone(); var person = { firstName : "liveorverday", lastName : "Scandy", age : 30, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " 現(xiàn)在 " + person.age + " 歲。"; }
//提示 function onClickEvent06(){ //隱藏 divNone(); alert("這是個(gè)提示信息!!"); }
//字符串方法 function onClickEvent07(){ //隱藏 divNone(); var str = "Hello JavaScript, welcome to learn javascript"; var strv=""; //方法返回字符串中指定文本首次出現(xiàn)的索引(位置) var pos = str.indexOf("welcome"); strv=strv+"indexOf:"+pos; //方法返回指定文本在字符串中最后一次出現(xiàn)的索引 var pos01 = str.lastIndexOf("welcome"); strv=strv+";lastIndexOf:"+pos01; //檢索字符串中的字符串 var pos02 = str.search("welcome"); strv=strv+";search:"+pos02; //slice() 提取字符串的某個(gè)部分并在新字符串中返回被提取的部分 var pos03 = str.slice(18,25); strv=strv+";slice:"+pos03; // substring() 無(wú)法接受負(fù)的索引 var pos04 = str.substring(18,25); strv=strv+";substring:"+pos04; //substr() 方法 開(kāi)始位置,第二個(gè)參數(shù)規(guī)定被提取部分的長(zhǎng)度。 var pos05 = str.substr(18,7); strv=strv+";substr:"+pos05; //replace() 方法用另一個(gè)值替換在字符串中指定的值 替換字符串內(nèi)容 var pos06 = str.replace("welcome","liveorverday"); strv=strv+";replace:"+pos06; //toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě) var pos07 = str.toUpperCase(); strv=strv+";toUpperCase:"+pos07; //toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě) var pos08 = str.toLowerCase(); strv=strv+";toLowerCase:"+pos08; //concat() 連接兩個(gè)或多個(gè)字符串 可用于代替加運(yùn)算符。下面兩行是等效的 var live="連接liveorverday"; var pos09 = str.concat("",live); strv=strv+";concat:"+pos09; //trim() 方法刪除字符串兩端的空白符 var pos10 = str.trim(); strv=strv+";trim:"+pos10; //charAt() 方法返回字符串中指定下標(biāo)(位置)的字符串 var pos11 = str.charAt(0); strv=strv+";charAt:"+pos11; //charCodeAt() 方法返回字符串中指定索引的字符 unicode 編碼 var pos12 = str.charCodeAt(0); strv=strv+";charCodeAt:"+pos12; //length 字符串的長(zhǎng)度 var pos13 = str.length; strv=strv+";length:"+pos13; document.getElementById("demo").innerHTML = strv; }
//數(shù)組 function onClickEvent08(){ //隱藏 divNone(); var cars = ["Audi", "BMW", "porsche"]; document.getElementById("demo").innerHTML = cars; }
//數(shù)組排序 function onClickEvent09(){ //隱藏 divNone(); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); document.getElementById("demo").innerHTML = fruits; }
//隨機(jī) 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實(shí)例案例</h2> 例子一 : <button type="button" onclick="onClickEvent01()">顯示日期和時(shí)間</button> <br/> 例子二 : <button type="button" onclick="onClickEvent02()">改變 HTML 內(nèi)容</button> <br/> 例子三 : <button type="button" onclick="onClickEvent03()">能夠改變 HTML 屬性值</button> <br/> 例子四 : <button type="button" onclick="onClickEvent04()">變量</button> <br/> 例子五 : <button type="button" onclick="onClickEvent05()">創(chuàng)建對(duì)象</button> <br/> 例子六 : <button type="button" onclick="onClickEvent06()">提示信息</button> <br/> 例子七 : <button type="button" onclick="onClickEvent07()">字符串方法</button> <br/> 例子八 : <button type="button" onclick="onClickEvent08()">數(shù)組</button> <br/> 例子九 : <button type="button" onclick="onClickEvent09()">數(shù)組排序</button> <br/> 例子十 : <button type="button" onclick="onClickEvent10()">隨機(jī)</button> <br/> <!--顯示結(jié)果--> <div style="height: 100px;"></div> 顯示結(jié)果 <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"> //隨機(jī) function onClickEvent10(){ //隱藏 divNone(); document.getElementById("demo").innerHTML = Math.random(); } //數(shù)組排序 function onClickEvent09(){ //隱藏 divNone(); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); document.getElementById("demo").innerHTML = fruits; } //數(shù)組 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=""; //方法返回字符串中指定文本首次出現(xiàn)的索引(位置) var pos = str.indexOf("welcome"); strv=strv+"indexOf:"+pos; //方法返回指定文本在字符串中最后一次出現(xiàn)的索引 var pos01 = str.lastIndexOf("welcome"); strv=strv+";lastIndexOf:"+pos01; //檢索字符串中的字符串 var pos02 = str.search("welcome"); strv=strv+";search:"+pos02; //slice() 提取字符串的某個(gè)部分并在新字符串中返回被提取的部分 var pos03 = str.slice(18,25); strv=strv+";slice:"+pos03; // substring() 無(wú)法接受負(fù)的索引 var pos04 = str.substring(18,25); strv=strv+";substring:"+pos04; //substr() 方法 開(kāi)始位置,第二個(gè)參數(shù)規(guī)定被提取部分的長(zhǎng)度。 var pos05 = str.substr(18,7); strv=strv+";substr:"+pos05; //replace() 方法用另一個(gè)值替換在字符串中指定的值 替換字符串內(nèi)容 var pos06 = str.replace("welcome","liveorverday"); strv=strv+";replace:"+pos06; //toUpperCase() 把字符串轉(zhuǎn)換為大寫(xiě) var pos07 = str.toUpperCase(); strv=strv+";toUpperCase:"+pos07; //toLowerCase() 把字符串轉(zhuǎn)換為小寫(xiě) var pos08 = str.toLowerCase(); strv=strv+";toLowerCase:"+pos08; //concat() 連接兩個(gè)或多個(gè)字符串 可用于代替加運(yùn)算符。下面兩行是等效的 var live="連接liveorverday"; var pos09 = str.concat("",live); strv=strv+";concat:"+pos09; //trim() 方法刪除字符串兩端的空白符 var pos10 = str.trim(); strv=strv+";trim:"+pos10; //charAt() 方法返回字符串中指定下標(biāo)(位置)的字符串 var pos11 = str.charAt(0); strv=strv+";charAt:"+pos11; //charCodeAt() 方法返回字符串中指定索引的字符 unicode 編碼 var pos12 = str.charCodeAt(0); strv=strv+";charCodeAt:"+pos12; //length 字符串的長(zhǎng)度 var pos13 = str.length; strv=strv+";length:"+pos13; document.getElementById("demo").innerHTML = strv; } //提示 function onClickEvent06(){ //隱藏 divNone(); alert("這是個(gè)提示信息!!"); } //創(chuàng)建對(duì)象 function onClickEvent05(){ //隱藏 divNone(); var person = { firstName : "liveorverday", lastName : "Scandy", age : 30, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " 現(xiàn)在 " + 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 內(nèi)容 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>
function foo(b) {
var a = b;
return {
a: a,
change: function(b) {
console.log(a, b, this.a);
a = a + b + this.a;
},
output: function() {
console.log(a, this.a, b);
}
}
}
var x = foo(1);
console.log('change before:')
console.log(x.a); // 1;
x.output(); // 1, 1, 1
x.a = 3;
x.change(2); // 1, 2, 3
console.log('after change:');
console.log(x.a); // 3
x.output(); // 6, 3, 1
var x = foo(1); // 執(zhí)行后,x函數(shù)里面返回的對(duì)象,里面的屬性和值都在執(zhí)行過(guò)程中確定了,作用域范圍在代碼定義的位置。
console.log('change before:')
console.log(x.a); // 1;
// x.a = 1。因?yàn)閒oo()函數(shù)里面返回對(duì)象中屬性a被賦值為變量a,
// 而變量a在foo(1)執(zhí)行時(shí)被賦值為b也就是1
x.output();
// a = 1, this.a = 1, b = 1
// a, output函數(shù)沒(méi)有變量a,通過(guò)作用域鏈向上查找, 父函數(shù)foo中有變量a
// this.a, 函數(shù)執(zhí)行上下文的this指向函數(shù)的調(diào)用方也就是x對(duì)象,x被賦值為1
// b, output也是通過(guò)作用域鏈向上查找到foo里的變量b,是foo里面的形參變量
x.a = 3;
// 修改x.a為3,此時(shí)影響的只是x對(duì)象中的a屬性,并不影響foo函數(shù)作用域下a變量
x.change(2);
// a = 1, b = 2, this.a = 3
// a, 仍然是foo第一次被調(diào)用時(shí)的值,沒(méi)有被修改,仍然是1
// b,這個(gè)b是change函數(shù)的形參變量,不是外部的b, b被賦值為2
// this.a,此時(shí)this.a也就是x.a,已經(jīng)被修改為3
// 執(zhí)行這句后,foo作用域下的a變量被賦值為a+b+this.a=1+2+3=6
console.log('after change:');
console.log(x.a); // 3
// x.a沒(méi)有受到影響,依然是3
x.output();
// a = 6, this.a = 3, b = 1
// a在執(zhí)行change(2)時(shí)已經(jīng)被改成6了
// this.a就是x.a,因此是3
// b從output沿作用域開(kāi)始查找,值仍是1,b沒(méi)有被改過(guò)
.計(jì)算10的階乘:
// 計(jì)算10的階乘
// 聲明階乘,賦值
var jc = 1;
// 創(chuàng)建循環(huán)語(yǔ)句
for(i = 1;i <= 10;i++){
jc *= i;
}
// 打印結(jié)果
console.log(jc); // 3628800
2.計(jì)算圓的周長(zhǎng)、半徑:
// 假設(shè)半徑為80
var r = 80;
// 周長(zhǎng)公式
var h = 2*Math.PI*r;
// 結(jié)果保留3位小數(shù)
var h = h.toFixed(3);
// 面積公式
var s = Math.PI*r*r;
var s = s.toFixed(3);
3.為抵抗洪水,戰(zhàn)士共戰(zhàn)斗89小時(shí),計(jì)算89小時(shí)為多少天加多少小時(shí):
// 總小時(shí)數(shù)
var h = 89;
// 天數(shù)
var day = parseInt(h/24);
// 余下的小時(shí)數(shù)
var hour = h%24;
4.計(jì)算80華氏溫度等于多少攝氏度:
// 聲明華氏溫度hua,賦值80
var hua = 80;
// 計(jì)算攝氏度
var she = 5/9.0*(hua-32);
// 保留3位小數(shù)
she = she.toFixed(3);
5.90度轉(zhuǎn)化為弧度是多少(結(jié)果保留3位小數(shù)):
var angle = 90;
//計(jì)算弧度
var radian = Math.PI/180*angle;
//弧度值保留3位小數(shù)
var radian = radian.toFixed(3);
6.輸入分?jǐn)?shù),判定成績(jī)等級(jí)(if、switch兩種寫(xiě)法):
//if 寫(xiě)法:
// 手動(dòng)輸入一個(gè)成績(jī)
var ach = 10;
// 判斷語(yǔ)句
if(ach >= 0 && ach < 60){
console.log("成績(jī)不合格");
}else if(ach >=60 && ach < 80){
console.log("成績(jī)良好");
}else if(ach >=80 && ach < 100){
console.log("成績(jī)優(yōu)秀");
}else if(ach == 100){
console.log("太棒了孩子");
}else{
console.log("請(qǐng)輸入1-100的數(shù)字");
}
//手動(dòng)輸入一個(gè)成績(jī)
var ach= 88;
switch(true){
case ach >= 0 && ach < 60:
console.log("成績(jī)不合格");
break;
case ach >= 60 && ach < 80:
console.log("成績(jī)良好");
break;
case ach >= 80 && ach < 100:
console.log("成績(jī)優(yōu)秀");
break;
case ach == 100:
console.log("太棒了孩子");
break;
default:
console.log("請(qǐng)輸入1-100的數(shù)字");
}
7.輸入月份,顯示當(dāng)月天數(shù),利用case穿透:
//手動(dòng)賦值
var mon = 6;
//創(chuàng)建分支
switch(mon){
// 2月
case 2:
console.log("閏年29天、平年28天");
break;
// 31天
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log("本月有31天");
break;
// 30天
case 4:
case 6:
case 9:
case 11:
console.log("本月有30天");
break;
default:
console.log("請(qǐng)輸入1-12的數(shù)字");
}
8.根據(jù)日期,判斷這天是這年的第幾天(利用switch穿透):
var year = 2016;
var mon =2;
var day = 11;
var allday = 0;
switch(mon - 1){
case 11:
allday += 30;
case 10:
allday += 31;
case 9:
allday += 30;
case 8:
case 7:
allday += 31;
case 6:
allday += 30;
case 5:
allday += 31;
case 4:
allday += 30;
case 3:
allday += 31;
case 2:
if(year % 4 == 0 && year % 100 !=0 || year % 400 == 0){
allday += 29;
}else{
allday += 28;
}
case 1:
allday += 31;
break;
}
console.log(allday + day); // 42
9.入職薪水10k,每年漲幅5%,50年后工資多少?
var sal = 10;
// 創(chuàng)建循環(huán)
for(var i = 1;i <= 50;i++){
sal *= 1.05;
}
10.打印100以內(nèi)奇數(shù),并打印所有奇數(shù)之和:
var sum = 0;
// 創(chuàng)建循環(huán)
for(var i = 1;i <= 100;i++){
// 判斷條件
if(i % 2 ==1){
// 打印100內(nèi)奇數(shù)
console.log(i); // 1 3 5 7 ... 97 99
// 計(jì)算100內(nèi)奇數(shù)和
sum += i;
}
}
11.在頁(yè)面打印20-80 之間能被 3 整除的數(shù),每5個(gè)一行
var j =0;
// 創(chuàng)建循環(huán)
for(var i = 20;i <= 80;i++){
// 創(chuàng)建判斷
if(i % 3 == 0){
// 打印結(jié)果
document.write(i+" ");
j++;
// 結(jié)果5個(gè)換行
if(j % 5 == 0){
document.write("<br>");
}
}
}
12.打印100-200之間所有能被3或7整除的數(shù):
for(var i = 100;i <= 200;i++){
// 創(chuàng)建判斷體
if(i % 3 == 0 && i % 7 == 0){
// 打印結(jié)果
console.log("100-200之間所有能被3或7整除的數(shù)為:"+i); // 105 126 147 168 189
}
}
13.求1+2!+3!+…+20!的值:
// 聲明的初值為0
varsum = 0;
// 創(chuàng)建循環(huán)
for(var i = 0;i <= 20;i++){
// 聲明加數(shù)的初值為1
var num = 1;
// 創(chuàng)建內(nèi)部循環(huán)
for(var j = 1;j <= i;j++){
num *= j;
}
// 求每個(gè)加數(shù)和
sum += num;
}
14.求1/1-1/2+1/3-1/4…1/100的和:
var sum = 0;
// 創(chuàng)建循環(huán)
for(var i = 1;i <= 100;i++){
if(i % 2 == 1){
// 奇數(shù)倒數(shù)
sum += (1/i);
}else{
// 偶數(shù)倒數(shù)
sum -= (1/i);
}
}
15.有一個(gè)棋盤(pán),有64個(gè)方格,在第一個(gè)方格里面放一粒芝麻重量0.00001kg,第二個(gè)里面放兩粒,第三個(gè)里面放4粒,求棋盤(pán)上所有芝麻粒之和:
var sum = 0;
var chu;
// 創(chuàng)建循環(huán)
for(var i = 0;i < 64;i++){
// 2的i次方累加
sum += Math.pow(2,i);
}
// 換算
chu = sum * 0.00001;
16.99乘法表:
// 行
for(var i=1;i<=9;i++){
// 列
for(var j=1;j<=i;j++){
// 打印結(jié)果
document.write(i+"*"+j +"="+i*j+" ");
}
// 每行后換行
document.write("<br>");
}
17.編寫(xiě)一個(gè)函數(shù),計(jì)算兩個(gè)數(shù)的和差積商:
// 創(chuàng)建函數(shù)
function num(a,b,fh){
// 創(chuàng)建分支
switch(fh){
case "+":
console.log("兩個(gè)數(shù)的和為:" + a+b);
break;
case "-":
console.log("兩個(gè)數(shù)的差為:" + a-b);
break;
case "*":
console.log("兩個(gè)數(shù)的積為:" + a*b);
break;
case "/":
console.log("兩個(gè)數(shù)的商為:" + a/b);
break;
}
}
num(66,88,"*");
18.編寫(xiě)一個(gè)函數(shù),在頁(yè)面上打印一個(gè)N行M列的表格,表格內(nèi)容填充0-100的隨機(jī)數(shù)字:
// 創(chuàng)建函數(shù)
function bg(m,n){
// 打印表格標(biāo)簽
document.write("<table>");
// 創(chuàng)建行循環(huán)
for(var i=0;i<=m;i++){
// 輸出行標(biāo)簽
document.write("<tr>");
// 創(chuàng)建列循環(huán)
for(var j=0;j<=n;j++){
// 輸出列標(biāo)簽
document.write("<td>");
// 輸出隨機(jī)數(shù)字
document.write(Math.round(Math.random()*100));
document.write("</td>");
}
document.write("/<tr>");
}
document.write("</table>")
}
bg(5,5);
19.將一個(gè)籃球從5米高處下落,每次上升為原來(lái)的60%,求經(jīng)過(guò)多少次下落,高度小于0.1米:
var h = 5;
var cs= 1;
// 創(chuàng)建循環(huán)
while (true) {
h *= 0.6;
// 判斷
if(h < 0.1){
// 打印結(jié)果
console.log(cs);
// 終止
break;
}
// 次數(shù)
cs++;
}
20.在頁(yè)面輸入任意數(shù)字,點(diǎn)擊按鈕后計(jì)算該數(shù)字的階乘:
function jc (n){
if(n == 1){
return 1;
}
return jc(n - 1)*n;
}
var btn = document.getElementById("btn");
var ipt = document.getElementById("ipt");
btn.onclick = function(){
var m = parseInt(ipt.value);
var result = jc(m);
console.log("此數(shù)字的階乘為:"+result);
}
21.根據(jù)1,1,2,3,5,8,13,21…計(jì)算第10位(斐波那契):
function fn(n){
if(n === 1 || n === 2){
return 1;
}else{
return fn(n - 1) + fn(n - 2);
}
}
var num = fn(10);
22.編寫(xiě)一個(gè)函數(shù),輸入n為偶數(shù)時(shí),調(diào)用函數(shù)求1/2+1/4+1/6+…+1/n;當(dāng)輸入n為奇數(shù)時(shí),調(diào)用函數(shù)1/1+1/3+1/5+…+1/n:
function fn(n){
if (n == 1){
return 1;
}else if(n == 2){
return 1/2;
}
return 1/n + fn(n - 2);
}
var btn = document.getElementById("btn");
var ipt = document.getElementById("ipt");
btn.onclick = function(){
var n = parseInt(ipt.value);
var sum = fn(n);
console.log("和為:"+sum);
}
23.編寫(xiě)一個(gè)函數(shù),計(jì)算任意兩個(gè)數(shù)字之間所能組成的奇數(shù)的個(gè)數(shù),數(shù)字必須是個(gè)位數(shù),比如:計(jì)算0-3之間能組成的奇數(shù)是:01,03,13,21,23,31:
function num(n,m){
var count = 0; // 記錄奇數(shù)的個(gè)數(shù)
if (n > m){
var i = n;
n = m;
m = i;
}
console.log(n,m);
for(var j = n;j<=m;j++){
if(j%2 == 1){
for(var k=n;k<=m;k++){
var str = ""+k+j;
console.log(str);
// 每產(chǎn)生第一個(gè)奇數(shù),就++
count++;
}
}
}
return count;
}
24.編寫(xiě)一個(gè)函數(shù):4位數(shù),每位數(shù)字都加上5,然后用除以10的余數(shù)代替該數(shù)字,再將第一位和第四位交換,第二位和第三位交換,輸入原文,輸出密文.例:8848 → 3933:
// 創(chuàng)建函數(shù)
function fn(n){
var gw = parseInt(n/1) % 10;
var sw = parseInt(n/10) % 10;
var bw = parseInt(n/100) % 10;
var qw = parseInt(n/1000) % 10;
console.log("您輸入的原文是:" + qw,bw,sw,gw);
// 每位數(shù)字都加上5,然后用除以10
gw = (gw + 5) % 10;
sw = (sw + 5) % 10;
bw = (bw + 5) % 10;
qw = (qw + 5) % 10;
// 交換十位、百位
var num1 = sw;
sw = bw;
bw = num1;
// 交換個(gè)位、千位
var num2 = gw;
gw = qw;
qw = num2;
return "" + qw + bw + sw + gw;
}
console.log("密文為:" + fn(8848));
25.編寫(xiě)函數(shù)map(arr) 把數(shù)組中的每一位數(shù)字都增加30%,并返回一個(gè)新數(shù)組:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。