JS(JavaScript)是一種非常強大的編程語言,早在1995年就被創建出來,并且現在已經得到了廣泛的應用。JS 是一種具有異常靈活性的編程語言,它可以幫助程序員們開發出非常復雜的應用程序。在本教程中,我們將著重介紹一些 JS 案例,這些案例將幫助程序員們更好地理解和學習 JS 編程。
第一種 JS 案例:基礎計算器
這個案例的目的是為了展示使用 JS 開發一個基礎的計算器應用程序。程序可以接受用戶的輸入并計算出結果。以下是這個應用程序的代碼:
<!DOCTYPE html> <html> <head> <title>計算器</title> <script> function calculate(){ var num1 = parseInt(document.calculator.number1.value); var num2 = parseInt(document.calculator.number2.value); var operator = document.calculator.operator.value; if(operator == "+"){ document.calculator.answer.value=num1+num2; }else if(operator == "-"){ document.calculator.answer.value=num1-num2; }else if(operator == "*"){ document.calculator.answer.value=num1*num2; }else if(operator == "/"){ document.calculator.answer.value=num1/num2; }else{ alert("不支持此操作符,請輸入+、-、*、/"); } } </script> </head> <body> <h2>計算器</h2> <form name="calculator"> <input type="number" placeholder="數字1" id="number1" name="number1"> <select name="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="number" placeholder="數字2" id="number2" name="number2"> <input type="button" value="計算" onclick="calculate()"> <br> <input type="number" placeholder="結果" id="answer" name="answer"> </form> </body> </html>這個程序應該可以很容易地看懂。首先,我們定義了一個函數 calculate() 。當用戶點擊計算按鈕時,此函數將被觸發。這個函數獲取用戶在文本框中輸入的數值,并執行相應的計算操作(加、減、乘、除)。最終,計算結果將會顯示在結果文本框中。如果用戶輸入了無效的操作符,當用戶點擊計算按鈕時,程序將會顯示一個錯誤消息。 第二種 JS 案例:圖像滑動 這個案例的目的是為了展示如何使用 JS 以及 HTML 和 CSS 來開發一個圖像滑動應用程序。以下是這個應用程序的代碼:
<!DOCTYPE html> <html> <head> <title>圖像滑動</title> <style> .slide-container{ position: relative; width: 550px; height: 350px; overflow: hidden; margin: 0 auto; } .slide-img{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; transition: transform 2s; } .active{ transform: translateX(-110%); } .slide-img:nth-child(1){ background-image: url('img1.jpg'); } .slide-img:nth-child(2){ background-image: url('img2.jpg'); } .slide-img:nth-child(3){ background-image: url('img3.jpg'); } </style> </head> <body> <h2>圖像滑動</h2> <div class="slide-container"> <div class="slide-img active"></div> <div class="slide-img"></div> <div class="slide-img"></div> </div> <script> var sliderImages = document.querySelectorAll('.slide-img'); setInterval(function(){ var nextSlide = sliderImages[1]; nextSlide.classList.add('active'); sliderImages[0].classList.remove('active'); sliderImages[0].parentNode.appendChild(sliderImages[0]); },3000); </script> </body> </html>這個程序的工作原理也很簡單。當用戶加載應用程序時,JS 會啟動一個計時器。每三秒鐘,計時器將會觸發一次,并且 JS 代碼將會自動更新文檔中的圖片元素。這就是圖像滑動效果是如何實現的。當程序開始運行時,第一張圖像將會顯示在屏幕上,然后第二張圖像將會滑動到屏幕上。當第二張圖像到達屏幕后,程序將會把第一張圖像從文檔中移除,并且把它添加到文檔底部。這樣,程序就可以循環顯示圖像。 結論 本教程提供了兩個非常有用的 JS 案例,這將幫助你更好地理解和學習如何使用 JS。如果你是初學者,并且正在學習 JS 編程,這些案例將為你提供非常多的幫助。并且,如果你掌握了 JS 編程,這些案例也可以幫助你更好地理解 JS 功能。無論你是什么水平的編程人員,JS 都是一個非常重要的技能,在這個時代中,幾乎所有的應用程序都會涉及到 JS。