页面加载后的转换

页面加载后的转换是指在页面加载完成后，通过程序的操作改变页面的内容、样式或行为。页面加载后的转换可以增加用户体验、提高页面的交互性和动态性。

常见的页面加载后的转换方式

动态效果

动态效果可以增加页面的生动性和吸引力，例如图片的变化、文字的滚动等。

1. 图片的变化

<img id="myImage" src="image1.jpg" onclick="changeImage()" width="200" height="100">

<script>
function changeImage() {
    var image = document.getElementById("myImage");
    if (image.src.match("image1")) {
        image.src = "image2.jpg";
    } else {
        image.src = "image1.jpg";
    }
}
</script>

2. 文字的滚动

<div id="myDIV" style="border:1px solid black;height:70px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

<script>
var myVar = setInterval(myTimer, 50);

function myTimer() {
    var elem = document.getElementById("myDIV");
    var pos = elem.scrollTop;
    elem.scrollTop = pos + 1;
}
</script>

表单操作

表单是网页中最常用的交互元素之一，可以通过代码的操作实现表单的自动填充、校验、提交等功能。

1. 自动填充表单

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="button" value="Fill" onclick="fillForm()">
</form>

<script>
function fillForm() {
    document.getElementById("fname").value = "John";
    document.getElementById("lname").value = "Doe";
}
</script>

2. 表单校验

<form onsubmit="return validateForm()">
  <input type="text" id="fname" name="fname"><br>
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
    var x = document.getElementById("fname").value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>

AJAX 请求

AJAX 是一种在不重新加载整个网页的情况下，通过后台发送请求、获取数据并动态更新页面的技术。在网页中使用 AJAX 可以提高网页的响应速度和用户体验。

<div id="myDIV"></div>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("myDIV").innerHTML = this.responseText;
    }
};
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
</script>

总结

页面加载后的转换是通过程序的操作改变页面的内容、样式或行为，提高用户体验和页面的交互性。常见的页面加载后的转换方式包括动态效果、表单操作和 AJAX 请求等。