Javscript是一門廣泛使用于互聯網的編程語言。它可以被用于創建互動式網站,增強用戶體驗。以下是Javascript可以做的一些事情的舉例。
1. 表單驗證
<script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("名字必須填寫"); return false; } } </script> <form name="myForm" onsubmit="return validateForm()"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>
2. 動態效果
<button onclick="myFunction()">點我</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World!"; } </script> <p id="demo"></p>
3. 輪播圖與畫廊
<script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; } </script> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img3.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
4. 數據展示與圖表
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chart"></div> <script> var options = { chart: { type: 'bar' }, series: [{ name: 'sales', data: [30,40,45,50,49,60,70,91,125] }], xaxis: { categories: ['Jan','Feb','Mar','Apr','May','Jun', 'Jul', 'Aug', 'Sep'] } } var chart = new ApexCharts( document.querySelector("#chart"), options ); chart.render(); </script>
總結來說,Javascript可以做很多事情,包括表單驗證、動態效果、輪播圖與畫廊、數據展示與圖表等等。這些功能可以讓我們的網站更加生動,增強用戶體驗。