JavaScript网页交互技巧-优快云博客

本文介绍六种使用JavaScript增强网页互动性的方法，包括直接修改HTML输出、响应事件、更改页面内容和图片、验证用户输入，以及引入外部脚本，旨在提升网站用户体验。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。（<head>、<body>全部可以放置）

1、直接写入 HTML 输出流

谁.干什么.什么做
document.write("<p>这是一个段落。</p>");
</script>

2、对事件的反应

3、改变 HTML 内容

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

4、改变 HTML 图像

5、验证输入

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
   var x=document.getElementById("demo").value;
   if(x==""||isNaN(x))
   {
       alert("不是数字");
   }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

6、外部的 JavaScript

<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>