DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。
javascript有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；
DOM（文档对象模型）是HTML和XML的应用程序接口（API）。
Window对象包含属性：document、location、navigator、screen、history、frames
浏览器运行时中的两个不同的概念。
1、BOM 浏览器对象模型
Browser Object Model（浏览器对象模型），提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）
用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。 比如 alert();弹出一个窗口,这属于BOM
2、DOM 文档对象模型
Document Object Model（文档对象模型），DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。
DOM是Document ，简称文档对象模型。是用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。document.getElementById("").value; 这属于DOM
一 .Bom对象
1.bom简介： bom ：browser object model 浏览器对象模型
js把浏览器抽象成一个window对象，运行我们使用js来模拟浏览器的行为、
2.JS三种方式弹框：
1. 警告框：提示信息
alert()
2. 确认框：确认信息
confirm()
3. 输入框：输入信息
prompt()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-js三个弹框</title>
</head>
<body>
<!--
JS三个弹框
-->
<script>
// 1. 警告框：提示信息
// alert('哈哈');
// 2. 确认框：确认信息
/*let result = confirm('您确定要删除吗？');
if(result==true){
console.log('用户点击确定');
}else{
console.log('用户点击取消');
}*/
// 3. 输入框：输入信息（了解）
let result = prompt('请输入你的年龄');
if(result!=null){
console.log(`用户输入的值：${result}`);
}else{
console.log('你点击了取消按钮');
}
</script>
</body>
</html>3.二种定时器方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-js二个定时器</title>
</head>
<body>
<!--
JS两个定时器
1）一次性定时器
创建：let 定时器对象 = setTimeout('函数()',毫秒);
关闭：clearTimeout(定时器对象)
2）循环性定时器
创建：let 定时器对象 = setInterval(函数,毫秒);
关闭：clearInterval(定时器对象);
-->
<button id="btn1">取消打印时间</button>
<button id="btn2">取消打印自然数</button>
<script>
// 1. 定时5秒之后在控制台打印当前时间
function fun1() {
console.log(new Date().toLocaleString());
}
let timeout = setTimeout('fun1()',5000);
// 2. 点击按钮取消打印时间
document.getElementById('btn1').onclick=function () {
clearTimeout(timeout);
}
// 3. 每隔2秒在控制台打印递增自然数
let num = 1;
function fun2() {
console.log(num++);
}
let interval = setInterval(fun2,2000);
// 4. 点击按钮取消打印自然数
document.getElementById('btn2').onclick=function () {
clearInterval(interval)
}
</script>
</body>
</html>3.Location对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-location对象</title>
</head>
<body>
<!--
location地址
1）获取当前窗口地址
location.href
2）刷新当前页面
location.reload()
3）跳转页面（重点）
location.href='新页面地址'
-->
<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button>
<script>
// 1.获取当前窗口的地址
function addr() {
console.log(location.href);
}
// 2.刷新当前页面
function refresh() {
location.reload();
}
// 3.跳转到新页面
function jump() {
location.href='https://www.jd.com';
}
</script>
</body>
</html>二.Dom对象
1.文档对象模型（Document Object Model）
作用：把所有页面标签抽象成为一个Document对象，我们可以使用js动态修改标签及属性内容。
2.dom获取元素
* 第一种：es6之前获取方式
1）获取一个
document.getElementById(id属性值)
2）获取多个（了解）
document.getElementsByTagName(标签名) 根据标签名获取，返回数组对象
document.getElementsByClassName(class属性值) 根据class属性获取，返回数组对象
document.getElementsByName(name属性值) 根据name属性获取，返回数组对象
* 第二种：es6可根据CSS选择器获取
1）获取一个
document.querySelector(id选择器)
2）获取多个
document.querySelectorAll(css选择器)
标签
class
属性
后代
并集
父子
....<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-dom获取元素</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
密码 <input type="password" name="password"> <br/>
生日 <input type="date" name="birthday"><br/>
性别
<input type="radio" name="gender" value="male" class="radio">男 
<input type="radio" name="gender" value="female" class="radio"/>女<br/>
爱好
<input type="checkbox" name="hobby" value="smoke">烟
<input type="checkbox" name="hobby" value="drink">酒
<input type="checkbox" name="hobby" value="perm">烫头<br/>
头像 <input type="file" name="pic"><br/>
学历
<select name="edu">
<option value="0">请选择</option>
<option value="1">入门</option>
<option value="2">精通</option>
<option value="3">放弃</option>
</select><br/>
简介
<textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
// 1.获取id="username"的标签对象
console.log(document.getElementById('username'));
console.log(document.querySelector('#username'));
// 2.获取class="radio"的标签对象数组
console.log(document.getElementsByClassName('radio'));
console.log(document.querySelectorAll('.radio'));
// 3.获取所有的option标签对象数组
console.log(document.getElementsByTagName('option'));
console.log(document.querySelectorAll('option'));
// 4.获取name="hobby"的input标签对象数组
console.log(document.getElementsByName('hobby'));
console.log(document.querySelectorAll('input[name="hobby"]')); // css的属性选择器
// 5.获取文件上传选择框
console.log(document.querySelectorAll('form input[type="file"]'));
// 注意：为什么获取id使用这种方案？
// document.getElementById('username').onclick 有提示
// document.querySelector('#username').onfo 没有提示
</script>
</body>
</html>3.dom操作内容
1. 获取或者修改元素（标签）的纯文本内容
语法：
js对象.innerText;2. 获取或者修改元素的html超文本内容
语法：
js对象.innerHTML;
3. 获取或者修改包含自身的html内容
语法：
js对象.outerHTML;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-dom操作内容</title>
<style>
#myDiv {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">程序猿最讨厌的事：<br>写注释、写文档……</div>
<script>
let myDiv = document.getElementById('myDiv');
// 1.innerText操作div内容
// 1.1 获取纯文本
// console.log(myDiv.innerText);
// 1.2 设置纯文本
// myDiv.innerText='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖
// myDiv.innerText+='别人不写注释，别人不写文档'; // 追加
// 2.innerHTML操作div内容
// 2.1 获取超文本内容
console.log(myDiv.innerHTML);
// 2.2 设置超文本
// myDiv.innerHTML='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖
// myDiv.innerHTML+='<h1>别人不写注释，别人不写文档</h1>'; // 追加
// 3.outerHTML操作div （扩展）
myDiv.outerHTML = '<p>我摇身一变，成了小P</p>';
</script>
</body>
</html>4.Dom属性操作
1. 获取文本框的值,单选框或复选框的选中状态
语法:
js对象.属性名 获取属性值
js对象.属性名='新属性值'
2. 给元素设置自定义属性
语法:
js对象.setAttribute(属性名,属性值)
2. 获取元素的自定义属性值
语法:
js对象.getAttribute(属性名)
4. 移除元素的自定义属性
语法:
js对象.removeAttribute(属性名)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-dom操作属性</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="西亚"/> <br/>
爱好
<input type="checkbox" name="hobby" value="smoke">烟
<input type="checkbox" name="hobby" value="drink">酒
<input type="checkbox" name="hobby" value="perm">烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
// 1.获取文本框预定义的属性值
let username = document.getElementById('username');
console.log(username);
console.log(username.type); // text
console.log(username.name); // username
console.log(username.value); // 西亚
// 2.给文本框设置自定义属性（了解） [新增、修改]
username.setAttribute('zidingyi','我是自定义属性');
// 3.获取文本框自定义属性（了解）
console.log(username.getAttribute('zidingyi'));
// 4.移出文本框自定义属性（了解）
username.removeAttribute('zidingyi')
username.removeAttribute('value')
</script>
</body>
</html>
5.Dom操作样式
1. 设置一个css样式
语法:
js对象.style.样式名='样式值'
特点：样式名按照驼峰式命名
css格式：font-size
js格式：fontSize
2. 批量设置css样式
语法:
js对象.style.cssText='css样式字符串'
缺点：让开发者痛苦，有耦合性
3. 通过class设置样式
语法:
js对象.className='class选择器名'
特点：解耦<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-dom操作样式</title>
<style>
#p1{ background-color: red;}
.mp {
color: green;
font-size: 30px;
font-family: 楷体;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3" >3. 通过class设置样式</p>
<script>
let p1 = document.getElementById("p1");//获取段落标签
let p2 = document.getElementById("p2");//获取段落标签
let p3 = document.getElementById("p3");//获取段落标签
// 1. 设置一个css样式
p1.style.backgroundColor='black';
p1.style.color='white';
// 2. 批量设置css样式
p2.style.cssText='border:1px solid red;font-size:20px;';
// 3. 通过class设置样式
p3.className='mp mpp';
</script>
</body>
</html>
6.Dom操作元素-标签
1. 创建一个标签对象
语法：
document.createElement(标签名称)
2. 给父标签添加一个子标签
语法：
父标签对象.appendChild(子标签对象)<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-dom操作元素</title>
</head>
<body>
<ul id="star">
<li>古力</li>
<li>迪丽</li>
</ul>
<script>
// 添加一个新列表项 <li>马尔</li>
// 方式一
document.getElementById('star').innerHTML+='<li>马尔</li>';
// 方式二
// 1.1 创建li标签
let li = document.createElement('li');
li.innerText='小：都要'
console.log(li);
// 1.2 父标签添加子标签
document.getElementById('star').appendChild(li);
</script>
</body>
</html>三.正则表达式
作用：根据定义好的规则，过滤文本内容；
在js中使用正则表达式
1.创建方式
1）let rege = new RegExp(“正则表达式字符串”);
2）let rege = /正则表达式/;
2.验证方法
1）正则对象.test(字符串)
符合正则规则就返回true，否则false
2）字符串对象.match(正则对象)
返回字符串中符合正则规则的内容。
3. 了解下正则修饰符
4. 在线正则表达式
https://tool.oschina.net/regex/#<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-正则表达式</title>
</head>
<body>
<script>
// 1.创建正则对象
let reg1 = new RegExp('\\d+'); // 规则只能是纯数字
console.log(reg1.test('abc')); // false
console.log(reg1.test('123321')); // true
// 2.直接使用正则表达式
let reg2 = /\d+/;
console.log(reg2.test('abc')); // false
console.log(reg2.test('123321')); // true
console.log("a1".match(reg2)); // 表示获取字符串符合正则规则那部分内容
</script>
<script>
//正则表达式修饰符
let regi = /[amn]/i;//不区分大小写匹配amn ignore 忽略大小写
let resi = "ABC".match(regi);//从"ABC"中匹配regi模式字符串
console.log(resi);
let regg = /\d/g;//全局查找数字 global 全局
let resg = "1 plus 2 equals 3".match(regg);
console.log(resg);
let regm = /^\d/m;//多行匹配开头的数字 （^ 限定开始 $ 限定结束） multpart 多行
let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);
console.log(resm);
</script>
<script>
console.log('-------------------------------')
// 以邮箱举例
let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
console.log(emailReg.test('sadfsadf')); // false
console.log(emailReg.test('ys_123@163.com')); // true
// 以手机号举例
let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
console.log(phoneReg.test('123123')); // false
console.log(phoneReg.test('18312332199')); // true
</script>
</body>
</html>
四.综合案例
1.表单校验：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单校验</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/b.jpg);
}
.regist {
border: 7px inset #ccc;
width: 700px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
.warn {
color: red;
font-size: 12px;
display: none;
}
</style>
<!--
表单校验
1. 两次密码输入一致
2. 邮箱格式正确
3. 手机号格式正确
4. 提交表单时校验表单项是否合法.
总结:
form表单的 onsubmit 事件 表单提交之前触发
-->
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" id="myForm">
<table width="700px" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
id="loginnamewarn" class="warn">用户名不能为空</span></td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span
id="pwdwarn" class="warn">密码不一致</span></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="email" type="text" name="email" size="50"/> <span id="emailwarn"
class="warn">邮箱格式有误</span>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="50"/></td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td align="right">电话号码</td>
<td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"
class="warn">手机格式有误</span>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">辽宁</option>
<option value="2">江苏</option>
</select>
<select id="cityId" style="width:150px">
<option>----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode"/></td>
<td><img src="../img/checkMa.png"/></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input id="rebtn" type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
// . 两次密码输入一致
// .获取密码框和确认密码框的js对象
let pwd1 = document.getElementById('pwd1');
let pwd2 = document.getElementById('pwd2');
// 校验密码是否一致的方法
function checkPwd() {
let boo = pwd1.value == pwd2.value;
if(boo == true){// 密码一致
document.getElementById('pwdwarn').style.display='none';
}else{// 密码不一致
document.getElementById('pwdwarn').style.display='inline';
}
return boo;
}
// 给确认密码框绑定失去焦点事件
pwd2.onblur=checkPwd; // 这里绑定函数，不能加括号
// 邮箱格式正确
// 定义邮箱正则表达式
let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
// 2.2 获取邮箱的js对象
let email = document.getElementById('email');
// 2.3 定义校验函数（方法）
function checkEmail() {
let boo = emailReg.test(email.value);
if(boo == true){ // 校验通过
document.getElementById('emailwarn').style.display='none';
}else{ // 校验不通过
document.getElementById('emailwarn').style.display='inline';
}
return boo;
}
// 给邮箱绑定失去焦点事件
email.onblur=checkEmail;
// 表单提交时 会触发这个 onsubmit事件
document.getElementById('myForm').onsubmit=function () {
return checkPwd()&&checkEmail(); // 返回true可以提交，返回false表单不做任何操作
}
// 准备数据
var data = new Array();
data['北京'] = ['顺义区', '昌平区', '朝阳区'];
data['河北'] = ["保定","石家庄","廊坊"];
data['辽宁'] = ["沈阳","铁岭","抚顺"];
let provinceId = document.getElementById("provinceId");//获取省下拉列表
let cityId = document.getElementById("cityId");//获取市下拉列表
// 1.页面加载成功后，初始化省份数据
window.onload=function () {
for(let index in data){ // 索引for
console.log(index);
provinceId.innerHTML+=`<option value="${index}">${index}</option>`;
}
}
// 2.给省份下拉框绑定onchange事件
provinceId.onchange=function () {
// 清空上一次选择城市信息
cityId.innerHTML='<option value="">----请-选-择-市----</option>';
console.log(this.value);// 当前用户选中的value值 ，它就是二维数组的索引
console.log(data[this.value]); // 城市列表
let citys = data[this.value];
for(let city of citys){ // 增强for
cityId.innerHTML+=`<option value="${city}">${city}</option>`;
}
}
</script>
</body>
</html>隔行换色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>隔行变色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<!--
隔行变色
1. 表格奇偶行颜色不同
2. 鼠标移入颜色高亮
-->
<script>
let oldColor;
// 获取所有tr的js对象 数组
let trs = document.querySelectorAll('table tr'); // 注意：这里使用的后代选择器 ，这里是js的一个tbody坑 table>tr
// 普通for循环
for (let i = 0; i < trs.length; i++) {
if(i%2==0){//偶数索引（奇数行）
trs[i].style.backgroundColor='lightgrey';
}else{ // 奇数索引（偶数行）
trs[i].style.backgroundColor='skyblue';
}
trs[i].onmouseover=function () { // 鼠标移入某一行
oldColor=trs[i].style.backgroundColor// 获取当前行的颜色
trs[i].style.backgroundColor='pink';
}
trs[i].onmouseout=function () {// 鼠标移出某一行
trs[i].style.backgroundColor=oldColor;
}
}
</script>
</body>
</html>
其他案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>儿童身高预测</title>
<style type="text/css">
#content{
margin: 0 auto;
width: 600px;
border: orange solid 2px;
background-color: bisque;
}
#content div{
margin-left: 15px;
margin-top: 15px;
margin-bottom: 10px;
}
h3,h5{
margin-left: 15px;
}
.lookresult{
margin: 0 auto;
width: 550px;
height: 45px;
background-color: white;
border: orange dashed 1px;
line-height: 45px;
text-align: left;
padding-left: 15px;
}
#resultheight{
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div id="content">
<h3>儿童身高预测</h3>
<div>儿童性别：<input type="radio" name="sex" value="female" id="female" checked="true"><label for="female">男孩</label>
<input type="radio" name="sex" value="male" id="male"><label for="male">女孩</label></div>
<div><label for="batherheight">爸爸的身高：</label><input type="text" id="batherheight">厘米</div>
<div><label for="motherheight">妈妈的身高：</label><input type="text" id="motherheight">厘米</div>
<div>
<button id="lookheihgt">查看结果</button>
<button id="reloadheight">重新测试</button>
</div>
<h5>测试结果</h5>
<div class="lookresult">小孩的身高是：<span id="resultheight">0</span>厘米</div>
</div>
</div>
<script>
//查看结果
document.getElementById("lookheihgt").onclick = function () {
let sex = document.querySelector("input[name='sex']:checked").value;
let batherHeight = document.getElementById("batherheight").value;
let montherHeight = document.getElementById("motherheight").value;
if (batherHeight == "" || isNaN(batherHeight)) {
alert("输入父亲身高不是数字");
return;
}
if (montherHeight == "" || isNaN(montherHeight)) {
alert("输入母亲身高不是数字");
return;
}
if (batherHeight>250||batherHeight<55){
alert("父亲身高必须是55--250之间！");
return;
}
if (montherHeight>250||montherHeight<55){
alert("母亲身高必须是55--250之间！");
return;
}
let height=0 ;
if (sex == "male") {
//女儿身高
height = (parseFloat(batherHeight*0.923)+parseFloat(montherHeight))/2;
}else if(sex== "female"){
//儿子身高
height = ((parseFloat(batherHeight) +parseFloat(montherHeight))/2)*1.08;
}
document.getElementById("resultheight").innerText = Math.round(height*100)/100;
};
//重新测试
document.getElementById("reloadheight").onclick = function () {
document.getElementById("batherheight").value ="";
document.getElementById("motherheight").value="";
document.getElementById("resultheight").innerText="0";
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态添加表格</title>
</head>
<body>
<div>
<label for="row">行：</label><input type="text" value="0" id="row">
<label for="col">列：</label> <input type="text" value="0" id="col">
<button id="rowscols">生成表格</button>
</div>
<div id="rowcolstable">
</div>
<script>
document.getElementById("rowscols").onclick = function () {
let rowsId = document.getElementById("row").value;
let colsId = document.getElementById("col").value;
if (rowsId < 1 || colsId < 1) {
alert("生成表格的行或者列不能小于1");
return;
}
let tables = `<table style="border: blue solid 1px;border-collapse: collapse">`;
for (let i=0;i<rowsId;i++){
tables+='<tr>';
for (let j = 0; j < colsId; j++) {
tables+=`<td style="border: blue solid 5px;">传智播客</td>`;
}
tables+='</tr>';
}
tables += `</table>`;
document.getElementById("rowcolstable").innerHTML=tables;
document.getElementById("row").value="";
document.getElementById("col").value="";
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>添加行数据</title>
<style type="text/css">
div{
margin:0 auto;
text-align: center;
width: 600px;
}
table{
border: black solid 1px;
border-collapse: collapse;
}
td{
width: 200px;
border: black solid 3px;
}
</style>
</head>
<body>
<div>
学生信息
<table id="studentInfo">
<tr>
<td>学号</td>
<td>姓名</td>
<td>操作</td>
</tr>
<tr>
<td>itcast001</td>
<td>张三</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td>itcast002</td>
<td>lisi</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</div>
<br>
<div>
<label for="xuehao">学号：</label><input type="text" value="" id="xuehao">
<label for="xingming">姓名：</label> <input type="text" value="" id="xingming">
<button id="addxuesheng">添加一行数据</button>
</div>
<script>
document.getElementById("addxuesheng").onclick = function () {
let xuehao = document.getElementById("xuehao").value;
let xingming = document.getElementById("xingming").value;
if (xuehao.length<1||xingming.length<1) {
alert("学号或者姓名不能为空！");
return;
}
let str=`<tr><td>${xuehao}</td><td>${xingming}</td><td><a href="#">删除</a></td></tr>`;
document.getElementById("studentInfo").innerHTML+=str;
document.getElementById("xuehao").value="";
document.getElementById("xingming").value="";
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 600px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#">
<table width="600" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60" /> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60" /> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60" /> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email" size="60" /> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="60" /> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td align="right">电话号码</td>
<td colspan="2"><input type="text" name="phone" size="60" /> </td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" style="width:150px">
<option value="">----请-选-择-省----</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode" /> </td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
//城市选择
let data = new Array();
data["北京"]=["海淀","朝阳","东城","昌平","顺义"];
data["上海"]=["越秀","长鸣","聪明"];
data["郑州"]=["中原","金水","管城","上街","新郑"];
data["西安"]=["襄阳","咸阳","东边","西边"];
let provinceId = document.getElementById("provinceId");
let cityId = document.getElementById("cityId");
window.onload=function () {
for (let provice in data){
provinceId.innerHTML+=`<option value="${provice}">${provice}</option>`;
}
}
provinceId.onchange = function () {
console.log(this.value);
if (this.value == "") {
cityId.innerHTML=`<option value="">----请-选-择-市----</option>`;
return;
}
let citys = data[this.value];
cityId.innerHTML=`<option value="">----请-选-择-市----</option>`;
for (let city of citys) {
cityId.innerHTML+=`<option value="${city}">${city}</option>`;
}
}
</script>
</body>
</html>
参考：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
