检测用户名和密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bg {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" id="txtUserName"> <br>
<input type="password" id="txtUserPassword"> <br>
<input type="button" value=" 登 录 " id="btnLogin">
<script>
// 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
var btnLogin = document.getElementById('btnLogin');
btnLogin.onclick = function () {
// 检测用户名是否是3-6位，密码是否是6-8位
var txtUserName = document.getElementById('txtUserName');
var txtUserPassword = document.getElementById('txtUserPassword');
//检测用户名是否是3-6位
if (txtUserName.value.length < 3 || txtUserName.value.length > 6) {
txtUserName.className = 'bg';
return;
} else {
txtUserName.className = '';
}
// 密码是否是6-8位
if (txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
txtUserPassword.className = 'bg';
return;
} else {
txtUserPassword.className = '';
}
//
console.log('执行登录');
}
</script>
</body>
</html>
设置下拉框的选中项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="设置" id='btnSet'>
<select id="selCities">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">杭州</option>
<option value="4">郑州</option>
<option value="5">武汉</option>
</select>
<script>
// 1 给按钮注册事件
var btnSet = document.getElementById('btnSet');
btnSet.onclick = function () {
// 2 获取下拉框中的所有option
var selCities = document.getElementById('selCities');
var options = selCities.getElementsByTagName('option');
// 3 随机生成索引
// Math.random() -> [0, 1)
// Math.random() * 5 -> [0, 5)
var randomIndex = parseInt(Math.random() * options.length);
// 4 根据索引获取option，并让option选中
var option = options[randomIndex];
option.selected = true;
}
</script>
</body>
</html>
搜索文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.gray {
color: gray;
}
.black {
color: black;
}
</style>
</head>
<body>
<input type="text" class="gray" value="请输入搜索关键字" id="txtSearch">
<input type="button" value="搜索" id="btnSearch">
<script>
// 当文本框获得焦点，如果文本框里的内容是 请输入搜索关键字 清空文本框，并且让字体变为黑色
var txtSearch = document.getElementById('txtSearch');
// 获取焦点的事件 focus
txtSearch.onfocus = function () {
if (this.value === '请输入搜索关键字') {
this.value = '';
this.className = 'black';
}
}
// 当文本框失去焦点，如果文本框里的内容为空 还原文本框里的文字，并且让字体变为灰色
// 失去焦点的事件 blur
txtSearch.onblur = function () {
// 判断文本框中的内容为空
// if (this.value === '')
if (this.value.length === 0 || this.value === '请输入搜索关键字') {
this.value = '请输入搜索关键字';
this.className = 'gray';
}
}
</script>
</body>
</html>
全选反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
< 
