javascript 范例
导读：JavaScript 范例JavaScript 是一种解释性语言，用于 Web 页面上的动态交互和动态效果，常用于表单验证、页面特效等。下面将介绍一些 JavaScript 范例。1. 验证表单表单验证是网页开发中经常用到的功能。以下是一个...
JavaScript 范例JavaScript 是一种解释性语言，用于 Web 页面上的动态交互和动态效果，常用于表单验证、页面特效等。下面将介绍一些 JavaScript 范例。1. 验证表单表单验证是网页开发中经常用到的功能。以下是一个简单的表单验证范例：form name="myForm">
label>
用户名：/label>
input type="text" name="username">
br>
label>
密码：/label>
input type="password" name="password">
br>
input type="button" value="提交" onclick="checkForm()">
/form>
script>
function checkForm() {
var username = document.myForm.username.value;
var password = document.myForm.password.value;
if (username === '') {
alert('请输入用户名！');
return false;
}
if (password === '') {
alert('请输入密码！');
return false;
}
return true;
}
/script>
上述代码中，利用了表单元素的 value 属性来获取表单输入的值，并用 if 语句判断输入是否为空，如果为空，则使用 alert() 方法弹出提示框，返回 false 阻止表单提交，如果输入不为空，则返回 true 允许表单提交。2. 加载更多在一个商品列表页面中，为了避免一次性加载过多商品而导致页面加载缓慢，常采用分页加载的方式，用户可以点击“加载更多”按钮来加载更多商品。以下是一个加载更多的 JavaScript 范例：div id="goodsList">
ul>
li>
商品1/li>
li>
商品2/li>
li>
商品3/li>
li>
商品4/li>
li>
商品5/li>
li>
商品6/li>
li>
商品7/li>
li>
商品8/li>
li>
商品9/li>
li>
商品10/li>
/ul>
button onclick="loadMore()">
加载更多/button>
/div>
script>
var curPage = 1;
var totalPages = 3;
function loadMore() {
curPage++;
if (curPage = totalPages) {
var $goodsList = document.getElementById('goodsList');
var $ul = $goodsList.querySelector('ul');
var $li = document.createElement('li');
$li.innerHTML = '商品' + (curPage * 10 - 9);
$ul.appendChild($li);
}
else {
alert('已经到底了！');
curPage--;
}
}
/script>
以上代码中，首先定义两个变量 curPage 和 totalPages，curPage 表示当前页数，totalPages 表示总页数。loadMore() 函数中，curPage 自增，当 curPage 小于等于 totalPages 时，动态创建一个商品 li 元素并插入到商品列表的 ul 元素中，商品名称为“商品”+当前商品序号。当 curPage 大于 totalPages 时，弹出提示框“已经到底了！”并将 curPage 减 1，避免连续点击“加载更多”按钮导致 curPage 值过大。总结JavaScript 范例有很多，上述只列举了两个简单的例子。开发者可以根据需求来学习和应用 JavaScript，丰富页面交互和动态效果，提高用户体验。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： javascript 范例
本文地址： https://pptw.com/jishu/535943.html