js 实用小例子

根据给定文件的信息，我们可以提炼出一系列与JavaScript相关的实用知识点，涵盖了从基本的页面操作到时间处理、状态显示以及动画效果等多方面的应用。以下是对这些知识点的详细解析： ### 知识点一：自动播放音频或视频 通过在HTML中嵌入`<embed>`标签并设置`autostart`属性为`true`，可以实现音频或视频的自动播放。例如： ```html <embed src="your_media_file_path" hidden="true" autostart="true" loop="true"> ``` 这行代码将使媒体文件在页面加载时自动播放，并且循环播放。 ### 知识点二：全屏显示网页 使用JavaScript调整窗口大小和位置至屏幕的最大尺寸，可以实现网页的全屏显示： ```javascript self.moveTo(0, 0); self.resizeTo(screen.availWidth, screen.availHeight); ``` 这段代码首先将窗口移动到屏幕左上角，然后调整其大小与屏幕可用宽度和高度一致。 ### 知识点三：显示当前时间和文档最后修改时间 利用VBS脚本或JavaScript，可以显示系统当前时间或文档的最后修改时间： ```html <script language="vbscript">document.write(Now())</script> <script>document.write(document.lastModified)</script> ``` 前者使用VBS脚本输出当前时间，后者使用JavaScript获取并显示文档的最后修改时间。 ### 知识点四：动态引入CSS样式表 通过在`<style>`标签内使用`@import`语句，可以动态引入外部CSS文件： ```html <style>@import url("ie.css")</style> ``` 这样做的好处是可以在不刷新整个页面的情况下更新页面样式。 ### 知识点五：实现全屏功能按钮 添加一个按钮，当点击时，打开当前页面的新窗口并设置为全屏模式： ```html <input type="button" name="fullscreen" value="全屏显示" onclick="window.open(document.location,'big','fullscreen=yes')"> ``` 这个按钮可以让用户方便地进入全屏浏览模式。 ### 知识点六：显示动态状态信息 使用`setTimeout`函数每隔一段时间更新页面状态栏显示的时间： ```javascript function see() { window.setTimeout("see()", 1000); today = new Date(); self.status = today.toString(); } ``` 这段代码会每秒更新一次状态栏中的当前时间，展示了如何在网页中实现动态时钟的效果。 ### 知识点七：关闭当前窗口 通过`<a>`标签结合JavaScript的`window.close()`方法，可以创建一个链接来关闭当前浏览器窗口： ```html <a href="javascript:window.close()">[关闭窗口]</a> ``` 点击这个链接时，当前窗口将被关闭。 ### 知识点八：历史记录导航 利用HTML表单按钮和`history.go()`方法，可以实现后退、刷新和前进的功能： ```html <input type="button" value="后退" onclick="history.go(-1)"> <input type="button" value="刷新" onclick="history.go(0)"> <input type="button" value="前进" onclick="history.go(+1)"> ``` 这三个按钮分别对应浏览器的历史记录导航操作。 ### 知识点九：定时器与动画效果 - 使用`setTimeout`和`setInterval`函数可以创建延时执行的代码块或周期性执行的动画效果。 - 示例代码演示了如何实现文本滚动动画、数字计时器以及简单显示和隐藏元素的动画。 - 文本滚动动画通过逐字符显示字符串来实现。 - 数字计时器使用`setInterval`每秒更新计数器。 - 显示/隐藏元素动画通过切换元素的`display`属性来实现。 这些知识点覆盖了JavaScript在网页开发中的多种实用场景，从简单的页面操作到更复杂的动态效果和定时处理，为前端开发者提供了丰富的工具和技巧。