常用的js代码汇总

### 常用JS代码知识点解析 #### 一、文本框焦点问题 在网页开发中，文本框的焦点控制非常重要，它可以改善用户体验，使交互更加友好。以下是一些与文本框焦点相关的事件： 1. **`onblur`**: 当文本框失去焦点时触发。 2. **`onfocus`**: 当文本框获得焦点时触发。 3. **`onchange`**: 当文本框中的内容发生变化时触发。 4. **`onselect`**: 当文本框中的内容被选中时触发。 例如： ```html <input type="text" value="请输入内容" onfocus="if (value == '请输入内容') {value = ''}" onblur="if (value == '') {value = '请输入内容'}"> ``` 此示例中，当文本框获得焦点时，如果默认文本“请输入内容”仍然存在，则将其清空；当文本框失去焦点时，如果没有输入任何内容，则恢复为默认文本。 #### 二、网页按钮样式调整 网页按钮的样式可以通过CSS进行自定义，以达到更好的视觉效果。以下是一些样式的调整方法： 1. **颜色调整**：通过`background-color`和`color`属性来设置背景色和文字颜色。 2. **鼠标悬停效果**：使用`onmouseover`和`onmouseout`事件来改变鼠标悬停时的按钮颜色。 3. **边框样式**：通过`border`属性设置边框的颜色、宽度等。 4. **尺寸调整**：通过`height`和`width`属性来设置按钮的高度和宽度。 例如： ```html <input type="button" name="submit1" value="提交" size=10 class=s02 style="background-color: rgb(235, 207, 22); color: #666666"> ``` #### 三、鼠标移入移出时颜色变化 为了增强用户体验，可以为按钮添加鼠标悬停时的颜色变化效果。这可以通过JavaScript的`onmouseover`和`onmouseout`事件来实现： ```html <input type="submit" value="提交" name="b1" onmouseout="this.style.color='blue'" onmouseover="this.style.color='red'" class="button"> ``` #### 四、使窗口变成指定的大小 可以通过JavaScript来改变浏览器窗口的大小。此功能在某些场景下非常有用，比如创建弹窗或调整布局： ```javascript <script> window.resizeTo(300, 283); </script> ``` #### 五、文字滚动效果 为了让页面更具动态感，可以使用`<marquee>`标签来实现文字的滚动效果。通过设置`direction`、`scrollamount`和`scrolldelay`等属性来控制滚动方向、速度和延迟时间。 ```html <marquee direction="up" scrollamount="1" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" height="60"> <tr> <td> 共和国 </td> </tr> </marquee> ``` #### 六、状态栏显示页面状态 在用户鼠标悬停在页面元素上时，可以通过JavaScript来更改浏览器状态栏显示的内容： ```html <base onmouseover="window.status='网站建设 http://www.admin5.cn/'; return true"> ``` #### 七、点击文字实现单选按钮的选定 为了提高用户体验，可以通过点击标签来选择对应的单选按钮，而不是直接点击按钮本身： ```html <label for="a03"> <input type="radio" name="regtype" value="a03" id="a03"> 情侣: 一次注册两个账户 </label> ``` #### 八、打印网页 可以通过JavaScript调用`window.print()`方法来打印当前页面： ```html <a href="javascript:window.print()"> 打印 </a> ``` #### 九、线型输入框 为了使输入框看起来更整洁，可以通过CSS来设置边框样式： ```html <input type="text" name="key" size="12" value="关键词" onfocus="this.select()" onmouseover="this.focus()" class="line"> ``` #### 十、显示文档最后修改日期 可以使用JavaScript来获取并显示文档的最后修改日期： ```javascript <script language="javascript"> function hi(str) { document.write(document.lastModified); alert("hi" + str + "!"); } </script> ``` #### 十一、鼠标悬停触发事件 通过在HTML标签中添加`onmouseover`事件，可以在鼠标悬停到元素上时触发特定的JavaScript函数： ```html <a href="" onmouseover="hello()">link</a> <script language="javascript"> function hello() { alert("哈罗!"); } </script> ``` #### 十二、根据网络状况调整内容加载 虽然示例中未给出具体代码，但可以根据网络状况来调整内容加载的方式。这通常涉及到使用JavaScript检测网络速度，并据此决定是否加载某些资源（如图片、视频等）或使用不同的加载策略。