javascript实例讲解

JavaScript 是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互 过程只是通过浏览器对 调入 HTML 文档中的 JavaScript 源代码进行解释执行来完成 的，即使是必须调用 CGI 的部分，浏览器只将 用户输入验证后的信息提交给远程的 服务器，大大减少了服务器的开销。 ### JavaScript实例讲解 #### JavaScript简介 JavaScript是一种广泛应用于网页开发中的脚本语言，它主要运行在客户端的浏览器上。这使得网页能够实现更加丰富的交互功能，例如数据验证、动态内容生成等，而无需频繁地与服务器进行通信。这种方式极大地提高了用户体验，并减轻了服务器端的压力。 #### JavaScript的工作原理 在描述中提到，JavaScript是通过浏览器对HTML文档中的源代码进行解释执行来完成用户在浏览过程中填表、验证等交互操作的。即使是那些需要调用CGI（通用网关接口）的部分，也仅仅只需要将用户输入验证后的信息提交给远程服务器，而不是每次都需要重新加载整个页面或请求服务器处理，这显著减少了服务器的负担。 #### JavaScript实例：日期星期显示 下面是一个简单的JavaScript实例，用于显示当前日期及星期几： ```javascript todayDate = new Date(); date = todayDate.getDate(); month = todayDate.getMonth() + 1; // 月份是从0开始的 year = todayDate.getYear(); document.write("今天是"); document.write("<br>"); if (navigator.appName == "Netscape") { document.write(1900 + year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write("<br>"); } if (navigator.appVersion.indexOf("MSIE") != -1) { document.write(year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日"); document.write("<br>"); } if (todayDate.getDay() == 5) document.write("星期五"); if (todayDate.getDay() == 6) document.write("星期六"); if (todayDate.getDay() == 0) document.write("星期日"); if (todayDate.getDay() == 1) document.write("星期一"); if (todayDate.getDay() == 2) document.write("星期二"); if (todayDate.getDay() == 3) document.write("星期三"); if (todayDate.getDay() == 4) document.write("星期四"); ``` ### 分析 此段代码通过`new Date()`创建了一个当前时间的对象，并从中获取到了具体的日期、月份以及年份。由于JavaScript中的月份是从0开始计算的，因此在获取月份时需要加1。此外，为了兼容不同的浏览器（如Netscape和Internet Explorer），代码中使用了条件语句来确保日期格式正确显示。对于星期几的判断，代码根据`getDay()`方法返回的值（0表示星期日，1表示星期一，以此类推）来进行相应的输出。 #### JavaScript实例：动态数字时钟 接下来是一个动态数字时钟的示例代码： ```javascript function Time() { if (!document.layers && !document.all) return; var Timer = new Date(); var hours = Timer.getHours(); var minutes = Timer.getMinutes(); var seconds = Timer.getSeconds(); var noon = "AM"; if (hours > 12) { noon = "PM"; hours -= 12; } if (hours == 0) hours = 12; if (minutes <= 9) minutes = "0" + minutes; if (seconds <= 9) seconds = "0" + seconds; myclock = "<font size='4' face='Arial' color=blue>" + hours + ":" + minutes + ":" + seconds + "" + noon + "</b></font>"; if (document.layers) { document.layers.position.document.write(myclock); document.layers.position.document.close(); } else if (document.all) { position.innerHTML = myclock; } setTimeout("Time()", 1000); // 每1000毫秒，调用一次Time函数，即一秒动一次。 } ``` ### 分析 这个动态数字时钟的实现同样考虑了不同浏览器之间的差异。首先检查浏览器是否支持`document.layers`或者`document.all`，这两个属性分别对应的是Netscape和Internet Explorer特有的API。代码中使用了`getHours()`、`getMinutes()`和`getSeconds()`来获取当前的时间，并根据这些值构建了时钟的字符串形式。值得注意的是，为了区分上午和下午，引入了变量`noon`，并根据小时数进行了相应的调整。最后通过`setTimeout`函数实现了每隔一秒刷新时间的功能，从而实现了动态显示的效果。 以上两个实例展示了如何利用JavaScript来增强网页的交互性和动态性，包括日期星期的显示和动态时钟的实现。这些基本的编程技巧不仅有助于提高用户的体验，也是学习JavaScript不可或缺的一部分。