<input type="button" value="点击弹窗2" id="btn2">
<script>
document.getElementById("btn2").onclick = function(){
alert("点我干嘛");
}
</script>
var timer = setInterval(function () {
alert();
}, 3000);
var timer = setTimeout(function () {
alert();
}, 2000);
function stopTimer(){
clearTimeout(timer);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<!--
需求：页面上有图片，每间隔2秒钟换一张显示。图片是：1~5
分析：
1. 需要有一个img标签，用于显示图片
2. 每间隔2秒钟做一件事：setInterval
3. 要做的事情：js代码修改img的src属性值document.getElementById("image").src = "图片路径";
-->
<img src="../img/1.jpg" alt="" id="image">
<script>
var picName = 1;
setInterval(function () {
picName++;
if (picName > 5) {
picName = 1;
}
document.getElementById("image").src = "../img/"+picName+".jpg";
}, 2000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时广告</title>
</head>
<body>
<!--
要求：打开页面时，广告图片是隐藏的；
页面打开2秒后，广告图片显示
图片显示3秒后，广告图片隐藏
分析：
1. 图片需要一个img标签。图片要设置隐藏 display:none; 如果要显示，设置display的值不是none
2. 延迟2秒/延迟3秒，使用 setTimeout
3. js代码让元素显示/隐藏：元素对象.style.display = "none";
-->
<img id="ad" src="../img/ad.jpg" alt="" style="width:100%;display:none ">
<script>
var ad = document.getElementById("ad");
setTimeout(function () {
ad.style.display = "";
setTimeout(function () {
ad.style.display = "none";
}, 3000);
}, 2000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form action="#" method="get" id="myform" onsubmit="return checkForm()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
<td class="left">用户名：</td>
<td class="center">
<!--每个input都隐含有value属性，默认值是：""-->
<input id="user" name="user" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 输入长度大于6个字符 -->
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<!-- 不能为空， 与密码相同 -->
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 邮箱格式要正确：下节课使用正则表达式校验 -->
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空，1开头，11位全是数字：下节课使用正则表达式校验 -->
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 要正确的日期格式 -->
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
<!--
要求：当表单被提交时，要校验每个表单项的值是否符合要求。
如果符合，就允许提交
如果不符合，就阻止提交，并弹窗提示错误原因
分析：
监听提交事件：onsubmit
监听到提交事件之后，要有能力阻止提交的继续执行：onsubmit="return false"
需要校验表单项数据，如果不符合时，再阻止提交
-->
<script>
function checkForm(){
var userInput = document.getElementById("user");
var userValue = userInput.value;
if (userValue === "") {
alert("用户名不能为空");
return false;
}else if(userValue.length < 5){
alert("用户名最少5位");
return false;
}else if(userValue.length > 10){
alert("用户名最多10位");
return false;
}
return true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<input type="button" value="获取username标签" id="btn1">
<input type="button" value="获取所有性别的标签" id="btn2">
<input type="button" value="获取所有下拉选项" id="btn3">
<input type="button" value="获取所有地址下拉选项" id="btn4">
<input type="button" value="获取类名为inputItem的标签" id="btn5">
<form action="#" method="get">
用户名：<input type="text" name="username" id="username" value="lisi" class="inputItem"> <br>
密码：<input type="password" name="password" id="password" class="inputItem"> <br>
性别：
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女 <br>
地址：
<select name="address" id="address">
<option value="sz">深圳市</option>
<option value="gz">广州市</option>
<option value="dg">东莞市</option>
<option value="hz">惠州市</option>
</select><br>
学历：
<select name="edu" id="edu">
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select>
</form>
<script>
document.getElementById("btn1").onclick = function () {
var username = document.getElementById("username");
console.log(username);
}
document.getElementById("btn2").onclick = function () {
var sexes = document.getElementsByName("sex");
for (var i = 0; i < sexes.length; i++) {
console.log(sexes[i]);
}
}
document.getElementById("btn3").onclick = function () {
var opts = document.getElementsByTagName("option");
for (var i = 0; i < opts.length; i++) {
console.log(opts[i]);
}
}
document.getElementById("btn4").onclick = function () {
var address = document.getElementById("address");
var opts = address.getElementsByTagName("option");
for (var i = 0; i < opts.length; i++) {
console.log(opts[i]);
}
}
document.getElementById("btn5").onclick = function () {
var items = document.getElementsByClassName("inputItem");
for (var i = 0; i < items.length; i++) {
console.log(items[i]);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>增删改标签</title>
</head>
<body>
<input type="button" value="清除下拉选项，然后添加“深圳市”选项" onclick="setCity()">
<hr>
<select name="city" id="city">
<option value="nn">南宁市</option>
<option value="lz">柳州市</option>
</select>
<script>
function setCity() {
var opts = document.getElementsByTagName("option");
var city = document.getElementById("city");
for (var i = opts.length-1; i>=0; i--) {
opts[i].remove();
}
var opt = document.createElement("option");
opt.innerHTML = "深圳市";
city.appendChild(opt);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作标签体</title>
</head>
<body>
<!--
标签体：开始标签和结束标签中间的全部内容
-->
<div id="div1">
黑马程序员
<span>JavaEE63期</span>
</div>
<hr>
<input type="button" value="清除下拉选项，然后添加“深圳市”选项" onclick="setCity()">
<hr>
<select name="city" id="city">
<option value="">--选择市--</option>
<option value="nn">南宁市</option>
<option value="lz">柳州市</option>
</select>
<script>
var div1 = document.getElementById("div1");
var html = div1.innerHTML;
div1.innerHTML = "<h1>传智播客</h1>";
function setCity() {
var city = document.getElementById("city");
city.innerHTML = "<option value=\"\">--选择市--</option>";
var opt = document.createElement("option");
opt.innerHTML = "深圳市";
city.appendChild(opt);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性</title>
</head>
<body>
<!--
要求：
鼠标按住按钮时，显示密码
松手鼠标弹起时，隐藏密码
分析：
事件：onmousedown监听鼠标按键按下
把密码框的type属性值设置为text
事件：onmouseup监听鼠标按键弹起
把密码框的type属性值重置为password
-->
<input type="password" id="password" class="inputItem" xx="yy">
<input type="button" value="查看密码" onmousedown="showPwd()" onmouseup="hidePwd()">
<hr>
<input type="button" value="获取密码框的类名" onclick="getClassName()">
<input type="button" value="设置密码框的类名" onclick="setClassName()">
<input type="button" value="删除密码框的类名" onclick="removeClassName()">
<script>
function showPwd() {
document.getElementById("password").type = "text";
}
function hidePwd() {
document.getElementById("password").type = "password";
}
var pwd = document.getElementById("password");
function getClassName() {
var className = pwd.getAttribute("class");
console.log(className);
var xx = pwd.getAttribute("xx");
console.log(xx);
}
function setClassName() {
pwd.setAttribute("class", "item");
pwd.setAttribute("xx", "xxxxx");
pwd.setAttribute("type", "text");
}
function removeClassName() {
pwd.removeAttribute("class");
pwd.removeAttribute("xx");
pwd.removeAttribute("type");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select name="province" id="province" onchange="changeCity()">
<option value="">--选择省--</option>
<option value="0">广东省</option>
<option value="1">广西省</option>
<option value="2">山东省</option>
<option value="3">山西省</option>
</select>
<select name="city" id="city">
<option value="">--选择市--</option>
</select>
<!--
要求：
当省的选项变化时，在市里显示对应的省
分析：
什么时候：省的选项变化时，onchange事件监听
做什么事：得到省的值，找到省对应的各个市，把市插入到市的下拉框里
获取省下拉框的值：省标签对象.value 广东0， 广西1，山东2，山西3
找到省对应的市（数组）：cities[省的值]
遍历每个市：
创建一个option标签：document.createElement("") : <option></option>
设置option的标签体：市的名称
设置option的value值：市的名称
插入到dom树：插入到city里边
-->
<script>
var cities = [
["广州市","深圳市","惠州市"],
["桂林市","柳州市","南宁市"],
["济南市","烟台市","秦皇岛"],
["太原市","阳泉市","大同市"]
];
function changeCity() {
var city = document.getElementById("city");
city.innerHTML = "<option value=\"\">--选择市--</option>";
var pro = document.getElementById("province").value;
var myCities = cities[pro];
for (var i = 0; i < myCities.length; i++) {
var cityName = myCities[i];
var opt = document.createElement("option");
opt.innerHTML = cityName;
opt.value = cityName;
city.appendChild(opt);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td, th {
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
</tr>
</table>
<!--
要求：1~6行，要求奇数行和偶数行分别设置不同的背景色
1. 奇数行设置背景颜色
2. 偶数行设置背景颜色
分析：
获取到奇数行，偶数行 %2 结果是0，说明是偶数；否则是奇数
分别设置不同背景颜色
获取所有的行
循环遍历：索引%2判断奇偶
奇数行：设置背景颜色
偶数行：设置背景颜色
-->
<script>
var rows = document.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
if (i % 2 === 0) {
rows[i].style.backgroundColor = "lightblue";
}else{
rows[i].style.backgroundColor = "lightgreen";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table {
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td, th {
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th style="width:100px;">
<input type="checkbox" id="checkall" title="全选/全消" onclick="check()" />
<input type="button" value="反选" onclick="inverse()">
</th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<input type="checkbox" class="item"/>
</td>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" class="item"/>
</td>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" class="item"/>
</td>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" class="item"/>
</td>
<td>4</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" class="item"/>
</td>
<td>5</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" class="item"/>
</td>
<td>6</td>
<td></td>
<td></td>
</tr>
</table>
<!--
全选全消需求：
点击checkall的时候，如果checkall是选中状态，所有的item都设置为选中状态；
点击checkall的时候，如果checkall是未选中状态，所有的item都设置为未选中状态；
分析：
什么时候：点击checkall的时候，使用事件onclick监听
做什么：
获取到checkall的选中状态：checked属性值
获取所有的item
循环遍历每个item，设置选中状态为：checkall的选中状态
反选要求：
点击“反选”按钮时，要求所有的item选中状态，取反
分析：
什么时候：点击“反选”按钮时：使用事件onclick监听
做什么：
获取所有的item
循环遍历，每个item的选中状态值（checked属性值），取出，取反，设置回去
-->
<script>
function check() {
var checked = document.getElementById("checkall").checked;
var items = document.getElementsByClassName("item");
for (var i = 0; i < items.length; i++) {
items[i].checked = checked;
}
}
function inverse() {
var items = document.getElementsByClassName("item");
for (var i = 0; i < items.length; i++) {
items[i].click();
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子时钟</title>
</head>
<body>
<!--
要求：
页面有个h1 标签，在标签里要实时显示当前时间
分析：
1. 打开页面时，h1里显示当前时间：
通过js代码，得到当前时间，显示到h1标签里
2. 点击“开始”按钮，时间开始走
每秒钟，显示一次当前时间。定时器
3. 点击“暂停”按钮，时间暂停
清除定时器
-->
<input type="button" value="开始" id="startBtn" onclick="start()">
<input type="button" value="暂停" id="stopBtn" onclick="stop()">
<h1 id="clock"></h1>
<script>
var clock = document.getElementById("clock");
clock.innerHTML = new Date().toLocaleString();
start();
var timer;
function start() {
timer = setInterval(function () {
clock.innerHTML = new Date().toLocaleString();
}, 1000);
document.getElementById("startBtn").disabled = true;
}
function stop() {
clearInterval(timer);
document.getElementById("startBtn").disabled = false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form action="#" method="get" id="myform" onsubmit="return checkForm()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- 不能为空， 输入长度必须介于 5 和 10 之间 -->
<td class="left">用户名：</td>
<td class="center">
<!--每个input都隐含有value属性，默认值是：""-->
<input id="user" name="user" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 输入长度大于6个字符 -->
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<!-- 不能为空， 与密码相同 -->
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 邮箱格式要正确：下节课使用正则表达式校验 -->
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空，1开头，11位全是数字：下节课使用正则表达式校验 -->
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 要正确的日期格式 -->
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="date" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
<!--
要求：当表单被提交时，要校验每个表单项的值是否符合要求。
如果符合，就允许提交
如果不符合，就阻止提交，并弹窗提示错误原因
分析：
监听提交事件：onsubmit
监听到提交事件之后，要有能力阻止提交的继续执行：onsubmit="return false"
需要校验表单项数据，如果不符合时，再阻止提交
-->
<script>
function checkForm(){
var userInput = document.getElementById("user");
var userValue = userInput.value;
if (userValue === "") {
alert("用户名不能为空");
return false;
}else if(userValue.length < 5){
alert("用户名最少5位");
return false;
}else if(userValue.length > 10){
alert("用户名最多10位");
return false;
}
var emailInput = document.getElementById("email");
var emailValue = emailInput.value;
if (emailValue === "") {
alert("邮箱不能为空");
return false;
}
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (!reg.test(emailValue)) {
alert("邮箱格式不正确");
return false;
}
return true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
table：表格本身
border：边框线
width：表格的宽度
bgcolor：背景颜色
cellspacing：单元格之间的间隔
align：表格的水平位置
tr： 表格里的行，一个表格里可以有多个行
align：行里内容的水平位置
td： 行里的单元格，一行里可以有多个单元格
align：单元格里内容的水平位置
valign 属性规定单元格中内容的垂直排列方式。
top 对内容进行上对齐。
middle 对内容进行居中对齐（默认值）。
bottom 对内容进行下对齐。
baseline 与基线对齐。
th： 行里的表头单元格，是一种特殊的td。用法和td完全一样，只是自带样式：居中并加粗
caption：表格的标题，加在table标签里的
练习：创建一个4行4列的表格 table[border="1"]>tr*4>td*4
-->
<table border="1" width="500px" bgcolor="yellow" cellspacing="0" align="center">
<tr align="center">
<td align="right">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<hr>
<!--
要求：创建一个4行4列的表格，用来显示学员信息
-->
<table border="1" cellspacing="0" width="500px">
<caption>JavaEE63期学员信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<hr>
<!--
要求：创建一个4行4列的表格，其中：
1-1 和 1-2 合并 colspan="2"
2-4 和 3-4 合并
3-2、3-3、4-2、4-3 合并
单元格合并的步骤：
1. 确定用哪个属性：跨行用rowspan，跨列用colspan
2. 确定属性值是几：要合并几个单元格，值就是几
3. 确定属性加在哪：要合并的单元格，最前边的那个单元格上
4. 删除被合并掉的单元格
-->
<table border="1" width="500px" cellspacing="0" align="center">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td rowspan="2">2-4</td>
</tr>
<tr>
<td>3-1</td>
<td colspan="2" rowspan="2">3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-4</td>
</tr>
</table>
</body>
</html>```
78
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
