整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          javascript教程 10例子

          javascript教程 10例子

           //顯示
           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>
          

          TML 屬性

          HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。

          屬性總是以名稱/值對的形式出現,比如:name="value"。

          屬性總是在 HTML 元素的開始標簽中規定。

          屬性實例

          HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定:

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <a >

          This is a link</a>

          </body>

          </html>

          [/demo]

          更多 HTML 屬性實例

          屬性例子 1:

          <h1> 定義標題的開始。

          <h1 align="center"> 擁有關于對齊方式的附加信息。

          [demo]

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

          "http://www.w3.org/TR/html4/loose.dtd">

          <html>

          <head>

          <meta charset="UTF-8">

          </head>

          <body>

          <h1 align="center">This is heading 1</h1>

          <p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。</p>

          </body>

          </html>

          [/demo]

          屬性例子 2:

          <body> 定義 HTML 文檔的主體。

          <body bgcolor="yellow"> 擁有關于背景顏色的附加信息。

          [demo]

          <html>

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="Content-Type" content="text/html />

          <meta http-equiv="Content-Language" content="zh-cn" />

          </head>

          <body bgcolor="yellow">

          <h2>請看: 改變了顏色的背景。</h2>

          </body>

          </html>

          [/demo]

          屬性例子 3:

          <table> 定義 HTML 表格。(您將在稍后的章節學習到更多有關 HTML 表格的內容)

          <table border="1"> 擁有關于表格邊框的附加信息。

          HTML 提示:使用小寫屬性

          屬性和屬性值對大小寫不敏感。

          不過,萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

          而新版本的 (X)HTML 要求使用小寫屬性。

          始終為屬性值加引號

          屬性值應該始終被包括在引號內。雙引號是最常用的,不過使用單引號也沒有問題。

          在某些個別的情況下,比如屬性值本身就含有雙引號,那么您必須使用單引號,例如:

          name='Bill "HelloWorld" Gates'

          下面列出了適用于大多數 HTML 元素的屬性:

          屬性 值 描述

          class classname 規定元素的類名(classname)

          id id 規定元素的唯一 id

          style style_definition 規定元素的行內樣式(inline style)

          title text 規定元素的額外信息(可在工具提示中顯示)

          HTML 全局屬性

          HTML 屬性賦予元素意義和語境。

          下面的全局屬性可用于任何 HTML 元素。

          HTML 全局屬性

          屬性 描述

          accesskey 規定激活元素的快捷鍵。

          class 規定元素的一個或多個類名(引用樣式表中的類)。

          contenteditable 規定元素內容是否可編輯。

          contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。

          data-* 用于存儲頁面或應用程序的私有定制數據。

          dir 規定元素中內容的文本方向。

          draggable 規定元素是否可拖動。

          dropzone 規定在拖動被拖動數據時是否進行復制、移動或鏈接。

          hidden 規定元素仍未或不再相關。

          id 規定元素的唯一 id。

          lang 規定元素內容的語言。

          spellcheck 規定是否對元素進行拼寫和語法檢查。

          style 規定元素的行內 CSS 樣式。

          tabindex 規定元素的 tab 鍵次序。

          title 規定有關元素的額外信息。

          translate 規定是否應該翻譯元素內容。

          HTML 事件屬性

          Window 事件屬性

          針對 window 對象觸發的事件(應用到 <body> 標簽):

          屬性 值 描述

          onafterprint script 文檔打印之后運行的腳本。

          onbeforeprint script 文檔打印之前運行的腳本。

          onbeforeunload script 文檔卸載之前運行的腳本。

          onerror script 在錯誤發生時運行的腳本。

          onhaschange script 當文檔已改變時運行的腳本。

          onload script 頁面結束加載之后觸發。

          onmessage script 在消息被觸發時運行的腳本。

          onoffline script 當文檔離線時運行的腳本。

          ononline script 當文檔上線時運行的腳本。

          onpagehide script 當窗口隱藏時運行的腳本。

          onpageshow script 當窗口成為可見時運行的腳本。

          onpopstate script 當窗口歷史記錄改變時運行的腳本。

          onredo script 當文檔執行撤銷(redo)時運行的腳本。

          onresize script 當瀏覽器窗口被調整大小時觸發。

          onstorage script 在 Web Storage 區域更新后運行的腳本。

          onundo script 在文檔執行 undo 時運行的腳本。

          onunload script 一旦頁面已下載時觸發(或者瀏覽器窗口已被關閉)。

          Form 事件

          由 HTML 表單內的動作觸發的事件(應用到幾乎所有 HTML 元素,但最常用在 form 元素中):

          屬性 值 描述

          onblur script 元素失去焦點時運行的腳本。

          onchange script 在元素值被改變時運行的腳本。

          oncontextmenu script 當上下文菜單被觸發時運行的腳本。

          onfocus script 當元素失去焦點時運行的腳本。

          onformchange script 在表單改變時運行的腳本。

          onforminput script 當表單獲得用戶輸入時運行的腳本。

          oninput script 當元素獲得用戶輸入時運行的腳本。

          oninvalid script 當元素無效時運行的腳本。

          onreset script 當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。

          onselect script 在元素中文本被選中后觸發。

          onsubmit script 在提交表單時觸發。

          Keyboard 事件

          屬性 值 描述

          onkeydown script 在用戶按下按鍵時觸發。

          onkeypress script 在用戶敲擊按鈕時觸發。

          onkeyup script 當用戶釋放按鍵時觸發。

          Mouse 事件

          由鼠標或類似用戶動作觸發的事件:

          屬性 值 描述

          onclick script 元素上發生鼠標點擊時觸發。

          ondblclick script 元素上發生鼠標雙擊時觸發。

          ondrag script 元素被拖動時運行的腳本。

          ondragend script 在拖動操作末端運行的腳本。

          ondragenter script 當元素元素已被拖動到有效拖放區域時運行的腳本。

          ondragleave script 當元素離開有效拖放目標時運行的腳本。

          ondragover script 當元素在有效拖放目標上正在被拖動時運行的腳本。

          ondragstart script 在拖動操作開端運行的腳本。

          ondrop script 當被拖元素正在被拖放時運行的腳本。

          onmousedown script 當元素上按下鼠標按鈕時觸發。

          onmousemove script 當鼠標指針移動到元素上時觸發。

          onmouseout script 當鼠標指針移出元素時觸發。

          onmouseover script 當鼠標指針移動到元素上時觸發。

          onmouseup script 當在元素上釋放鼠標按鈕時觸發。

          onmousewheel script 當鼠標滾輪正在被滾動時運行的腳本。

          onscroll script 當元素滾動條被滾動時運行的腳本。

          Media 事件

          由媒介(比如視頻、圖像和音頻)觸發的事件(適用于所有 HTML 元素,但常見于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):

          屬性 值 描述

          onabort script 在退出時運行的腳本。

          oncanplay script 當文件就緒可以開始播放時運行的腳本(緩沖已足夠開始時)。

          oncanplaythrough script 當媒介能夠無需因緩沖而停止即可播放至結尾時運行的腳本。

          ondurationchange script 當媒介長度改變時運行的腳本。

          onemptied script 當發生故障并且文件突然不可用時運行的腳本(比如連接意外斷開時)。

          onended script 當媒介已到達結尾時運行的腳本(可發送類似“感謝觀看”之類的消息)。

          onerror script 當在文件加載期間發生錯誤時運行的腳本。

          onloadeddata script 當媒介數據已加載時運行的腳本。

          onloadedmetadata script 當元數據(比如分辨率和時長)被加載時運行的腳本。

          onloadstart script 在文件開始加載且未實際加載任何數據前運行的腳本。

          onpause script 當媒介被用戶或程序暫停時運行的腳本。

          onplay script 當媒介已就緒可以開始播放時運行的腳本。

          onplaying script 當媒介已開始播放時運行的腳本。

          onprogress script 當瀏覽器正在獲取媒介數據時運行的腳本。

          onratechange script 每當回放速率改變時運行的腳本(比如當用戶切換到慢動作或快進模式)。

          onreadystatechange script 每當就緒狀態改變時運行的腳本(就緒狀態監測媒介數據的狀態)。

          onseeked script 當 seeking 屬性設置為 false(指示定位已結束)時運行的腳本。

          onseeking script 當 seeking 屬性設置為 true(指示定位是活動的)時運行的腳本。

          onstalled script 在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。

          onsuspend script 在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。

          ontimeupdate script 當播放位置改變時(比如當用戶快進到媒介中一個不同的位置時)運行的腳本。

          onvolumechange script 每當音量改變時(包括將音量設置為靜音)時運行的腳本。

          onwaiting script 當媒介已停止播放但打算繼續播放時(比如當媒介暫停已緩沖更多數據)運行腳本

          .計算10的階乘:

          // 計算10的階乘
          
          // 聲明階乘,賦值
          
          var jc=1;
          
          // 創建循環語句
          
          for(i=1;i <=10;i++){
          
              jc *=i;
          
          }
          
          // 打印結果
          
          console.log(jc);    // 3628800

          2.計算圓的周長、半徑:

          // 假設半徑為80
          
          var r=80;
          
          // 周長公式
          
          var h=2*Math.PI*r;
          
          // 結果保留3位小數
          
          var h=h.toFixed(3);
          
          // 面積公式
          
          var s=Math.PI*r*r;
          
          var s=s.toFixed(3);

          3.為抵抗洪水,戰士共戰斗89小時,計算89小時為多少天加多少小時:

          // 總小時數
          
          var h=89;
          
          // 天數
          
          var day=parseInt(h/24);
          
          // 余下的小時數
          
          var hour=h%24;

          4.計算80華氏溫度等于多少攝氏度:

          // 聲明華氏溫度hua,賦值80
          
          var hua=80;
          
          // 計算攝氏度
          
          var she=5/9.0*(hua-32);
          
          // 保留3位小數
          
          she=she.toFixed(3);

          5.90度轉化為弧度是多少(結果保留3位小數):


          var angle=90;
          
              //計算弧度
          
              var radian=Math.PI/180*angle;
          
              //弧度值保留3位小數
          
              var radian=radian.toFixed(3);

          6.輸入分數,判定成績等級(if、switch兩種寫法):

          //if 寫法:
          
          // 手動輸入一個成績
          
          var ach=10;
          
          // 判斷語句
          
          if(ach >=0 && ach < 60){
          
              console.log("成績不合格");
          
          }else if(ach >=60 && ach < 80){
          
              console.log("成績良好");
          
          }else if(ach >=80 && ach < 100){
          
              console.log("成績優秀");
          
          }else if(ach==100){
          
              console.log("太棒了孩子");
          
          }else{
          
              console.log("請輸入1-100的數字");
          }
          //手動輸入一個成績
          
          var ach=88;
          
          switch(true){
          
             case ach >=0 && ach < 60:
          
             console.log("成績不合格");
          
             break;
          
             case ach >=60 && ach < 80:
          
             console.log("成績良好");
          
             break;
          
             case ach >=80 && ach < 100:
          
             console.log("成績優秀");
          
             break;
          
             case ach==100:
          
             console.log("太棒了孩子");
          
             break;
          
             default:
          
             console.log("請輸入1-100的數字");
          }

          7.輸入月份,顯示當月天數,利用case穿透:

          //手動賦值
          
              var mon=6;
          
              //創建分支
          
              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("請輸入1-12的數字");
          
              }

          8.根據日期,判斷這天是這年的第幾天(利用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;
          
          // 創建循環
          
          for(var i=1;i <=50;i++){
            
           sal *=1.05;
            
           }

          10.打印100以內奇數,并打印所有奇數之和:

          var sum=0;
          
          // 創建循環
          
          for(var i=1;i <=100;i++){
          
              // 判斷條件
          
              if(i % 2==1){
          
                  // 打印100內奇數
          
                  console.log(i);   // 1 3 5 7 ... 97 99
          
                  // 計算100內奇數和
          
                  sum +=i;
          
              }
          
          }

          11.在頁面打印20-80 之間能被 3 整除的數,每5個一行

          var j=0;
          
          // 創建循環
          
          for(var i=20;i <=80;i++){
          
             // 創建判斷
          
             if(i % 3==0){
          
                 // 打印結果
          
                 document.write(i+" ");
          
                 j++;
          
                 // 結果5個換行
          
                 if(j % 5==0){
          
                     document.write("<br>");
          
                 }
          
             }
          
          }

          12.打印100-200之間所有能被3或7整除的數:

          for(var i=100;i <=200;i++){
          
             // 創建判斷體
          
             if(i % 3==0 && i % 7==0){
          
                 // 打印結果
          
                 console.log("100-200之間所有能被3或7整除的數為:"+i);  // 105 126 147 168 189
          
             }
          
          }

          13.求1+2!+3!+…+20!的值:

          // 聲明的初值為0
          
          varsum=0;
          
          // 創建循環
          
          for(var i=0;i <=20;i++){
          
              // 聲明加數的初值為1
          
              var num=1;
          
              // 創建內部循環
          
              for(var j=1;j <=i;j++){
          
                  num *=j;
          
              }
          
              // 求每個加數和
          
              sum +=num;     
          
          }

          14.求1/1-1/2+1/3-1/4…1/100的和:

          var sum=0;
          
          // 創建循環
          
          for(var i=1;i <=100;i++){
          
              if(i % 2==1){
          
                  // 奇數倒數
          
                  sum +=(1/i);
          
              }else{
          
                  // 偶數倒數
          
                  sum -=(1/i); 
          
              }
          
          }

          15.有一個棋盤,有64個方格,在第一個方格里面放一粒芝麻重量0.00001kg,第二個里面放兩粒,第三個里面放4粒,求棋盤上所有芝麻粒之和:

          var sum=0;
          
          var chu;
          
          // 創建循環
          
          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++){
          
                  // 打印結果
          
                  document.write(i+"*"+j +"="+i*j+"  ");
          
              }
          
              // 每行后換行
          
          document.write("<br>");
          
          }

          17.編寫一個函數,計算兩個數的和差積商:


          // 創建函數
          
          function num(a,b,fh){
          
             // 創建分支
          
             switch(fh){
          
                 case "+":
          
                 console.log("兩個數的和為:" + a+b);
          
                 break;
          
                 case "-":
          
                 console.log("兩個數的差為:" + a-b);
          
                 break;
          
                 case "*":
          
                 console.log("兩個數的積為:" + a*b);
          
                 break;
          
                 case "/":
          
                 console.log("兩個數的商為:" + a/b);
          
                 break;
          
             }
          
          }
          
          num(66,88,"*");

          18.編寫一個函數,在頁面上打印一個N行M列的表格,表格內容填充0-100的隨機數字:


          // 創建函數
          
          function bg(m,n){
          
              // 打印表格標簽
          
              document.write("<table>");
          
              // 創建行循環
          
              for(var i=0;i<=m;i++){
          
                  // 輸出行標簽
          
                  document.write("<tr>");
          
                      // 創建列循環
          
                      for(var j=0;j<=n;j++){
          
                          // 輸出列標簽
          
                          document.write("<td>");
          
                              // 輸出隨機數字
          
                              document.write(Math.round(Math.random()*100));
          
                          document.write("</td>");
          
              }
          
                  document.write("/<tr>");
          
              }
          
              document.write("</table>")
          
          }
          
          bg(5,5);

          19.將一個籃球從5米高處下落,每次上升為原來的60%,求經過多少次下落,高度小于0.1米:

          var h=5;
          
          var cs=1;
          
          // 創建循環
          
          while (true) {
          
              h *=0.6;
          
              // 判斷
          
              if(h < 0.1){
          
                  // 打印結果
          
                  console.log(cs);
          
                  // 終止
          
                  break;
          
              }
          
              // 次數
          
              cs++;
          
          }

          20.在頁面輸入任意數字,點擊按鈕后計算該數字的階乘:

          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("此數字的階乘為:"+result);
          
          }

          21.根據1,1,2,3,5,8,13,21…計算第10位(斐波那契):

          function fn(n){
          
             if(n===1 || n===2){
          
                 return 1;
          
             }else{
          
                 return fn(n - 1) + fn(n - 2);
          
             }
          
          }
          
          var num=fn(10);

          22.編寫一個函數,輸入n為偶數時,調用函數求1/2+1/4+1/6+…+1/n;當輸入n為奇數時,調用函數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.編寫一個函數,計算任意兩個數字之間所能組成的奇數的個數,數字必須是個位數,比如:計算0-3之間能組成的奇數是:01,03,13,21,23,31:

          function num(n,m){
          
           var count=0;   // 記錄奇數的個數
          
           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);
          
                       // 每產生第一個奇數,就++
          
                       count++;
          
                   }
          
               }
          
           }
          
           return count;
          
          }

          24.編寫一個函數:4位數,每位數字都加上5,然后用除以10的余數代替該數字,再將第一位和第四位交換,第二位和第三位交換,輸入原文,輸出密文.例:8848 → 3933:

          // 創建函數
          
          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);
          
             // 每位數字都加上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;
          
             // 交換個位、千位
          
             var num2=gw;
          
                 gw=qw;
          
                 qw=num2;
          
             return "" + qw + bw + sw + gw;
          
          }
          
          console.log("密文為:" + fn(8848));

          25.編寫函數map(arr) 把數組中的每一位數字都增加30%,并返回一個新數組:


          主站蜘蛛池模板: 97久久精品无码一区二区天美 | 视频一区二区三区人妻系列| 日韩少妇无码一区二区三区| 国产在线aaa片一区二区99| 亚洲国产精品综合一区在线 | 亚洲AV无码一区二区三区在线 | 中文人妻无码一区二区三区| 国产精品无码一区二区三区在 | 天堂资源中文最新版在线一区| 无码国产精品一区二区高潮| 99精品国产一区二区三区2021 | 日韩在线一区二区| 中文字幕在线视频一区| 国产成人免费一区二区三区| 亚洲高清日韩精品第一区| 国产日韩精品一区二区三区在线| 国产伦精品一区二区三区视频小说| 亚洲一区二区三区在线观看蜜桃| 美女啪啪一区二区三区| 久久影院亚洲一区| 亚洲国产成人久久一区WWW | 中文字幕无码一区二区三区本日 | 精品国产一区二区三区久久影院| 亚洲一区二区在线视频| 国产一区二区免费| 国产一区二区三精品久久久无广告| 久久精品国内一区二区三区| 国产一区二区三区乱码网站| 亚洲午夜在线一区| 青青青国产精品一区二区| 国产成人精品一区二区秒拍| 亚洲日韩精品一区二区三区无码 | 精品一区二区三区AV天堂| 亚洲AV无码一区二区三区鸳鸯影院 | 亚洲狠狠久久综合一区77777| 无码精品久久一区二区三区| 日韩精品一区二区三区老鸭窝| 精品国产免费一区二区三区 | 天天视频一区二区三区| 国产成人精品一区二区三区免费 | 国产精品一区二区三区高清在线|