1. 登录验证
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="08-登录成功界面.html" method="get" onsubmit="return login()">
<div id="tv_msg"></div>
<p>用户<input type="text" name="" id="tv_uname"></p>
<p>密码<input type="text" name="" id="tv_upwd"></p>
<p>
<input type="submit" name="" id="" value="登录">
</p>
</form>
<script>
function login(){
//根据标签获取节点对象 根据节点获取值
var uname = document.getElementById("tv_uname").value;
if(uname == null || uname == "") {
document.getElementById("tv_msg").innerHTML="请输入用户名";
return false;
}
var upwd = document.getElementById("tv_upwd").value;
if(upwd == null || upwd == "") {
document.getElementById("tv+msg").innerHTML="请输入密码";
return false;
}
return true;
}
</script>
</body>
</html>
2. 全选反选全不选
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<div>
<input type="button" name="" id="" value="全选" onclick="selectAll()"/>
<input type="button" name="" id="" value="全不选" onclick="selectNot()"/>
<input type="button" name="" id="" value="反选" onclick="reverse()"/>
</div>
<table border="1px" width="70%" align="center" cellpadding="1px" cellspacing="1px">
<tr>
<th>选择</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="tv_class"></td>
<td>0001</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="tv_class"></td>
<td>0002</td>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="" class="tv_class"></td>
<td>0003</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
<script>
function selectAll() {
var arrays = document.getElementsByClassName("tv_class");
for(var i = 0; i< arrays.length; i++) {
arrays[i].checked=true;
}
}
function selectNot() {
var arrays = document.getElementsByClassName("tv_class");
for(var i = 0; i< arrays.length; i++) {
arrays[i].checked=false;
}
}
function reverse() {
var arrays = document.getElementsByClassName("tv_class");
for(var i = 0; i< arrays.length; i++) {
arrays[i].checked=!arrays[i].checked;
}
}
</script>
</body>
</html>
3. 轮播图
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/xxx_01.jpg" id="tv_img"/>
<script>
//定义一个变量记录序号
var v = 1;
function changeImg() {
if(v < 3){
v++;
}else {
v=1;
}
document.getElementById("tv_img").src="img/xxx_0"+v+".jpg";
}
setInterval("changeImg()",1000);
</script>
</body>
</html>
4. 时钟
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="tv_div"></div>
<script>
window.onload = showTime();
function showTime() {
//实例化Date对象
var d = new Date();
//获取时分秒
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
if(s<10){
s="0"+ s;
}
var t = h+":"+m+":"+s;
document.getElementById("tv_div").innerHTML=t;
}
setInterval("showTime()",1000);
</script>
</body>
</html>
5. 请认真阅读60秒
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" name="" id="btn" value="点击开始阅读"/>
<script>
var time = 60;
$("#btn").click(function(){
var t = setInterval(function(){
if(time > 0) {
$("#btn").prop("disabled",true) // 禁用输入
time--;
$("#btn").val("请认真阅读" + "(" + time + ")秒");
} else {
clearInterval(t); //清除定时
$("#btn").val("确认阅读完成");
$("#btn").prop("disabled",false);
time = 0;
}
},1000); //每隔1秒执行一次showInfo方法
});
</script>
</body>
</html>
6. 隔行变色
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1px" width="70%" align="center" cellpadding="1px" cellspacing="0px" id="t_col">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品描述</th>
</tr>
<tr>
<td>01</td>
<td>猪脚饭</td>
<td>15</td>
<td>吃不完</td>
</tr>
<tr>
<td>02</td>
<td>猪肉面</td>
<td>17</td>
<td>猪肉贵了</td>
</tr>
<tr>
<td>03</td>
<td>茄子豆角饭</td>
<td>15</td>
<td>味道可以</td>
</tr>
</table>
<script>
var tColor = document.all['t_col'];
for(var i = 0; tColor.rows.length;i++){
tColor.rows[i].bgColor = (i%2==0) ? 'white' : 'red';
}
</script>
</body>
</html>
7. 鼠标移入展开列表
<body>
<div id="menu" class="pos"> <a href="#">我的当当</a>
<ul id="menu-ul" style="display:none;">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的礼品卡</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</div>
<script>
document.getElementById("menu").onmouseover = function () { document.getElementById("menu-ul").style.display = "block" }; document.getElementById("menu").onmouseout = function () { document.getElementById("menu-ul").style.display = "none" };
</script>
</body>
浙公网安备 33010602011771号