JavaScript实现简单版删除留言功能

先，看实现的效果，效果视频如下：

分析

1.当我们把文本域里面的值赋值给 li 的时候，多添加一个删除的链接

2.需要把所有的链接获取过来，当我们点击当前链接的时候，删除当前链接所在的 li

3.我们只需要在之前写的那个版面上添加一段删除元素的代码就行了

代码

什么要清除浮动？

一开始css的浮动，其本质是用来做一些文字混排效果的，但是后来被我们拿来做布局用，就出现了很多问题。

清除浮动的本质： 为解决父级元素因为子级浮动引起高度为0的问题

我们很多时候不方便给父盒子的高度，因为我们不清除有多少子盒子，有多少内容。经常的做法会让内容撑开父盒子的高度。但是如果父盒子中有子盒子浮动了之后，就会影响到后面的盒子，因为浮动元素脱离了标准流。会把后面还在标准流的盒子覆盖，解决这个问题的方法就要清除浮动

原理图

如何清除浮动？

清除浮动其实叫做 闭合浮动 更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器 { clear : 属性值 ; }
/*属性值为left,清除左侧浮动的影响
  属性值为right,清除右侧浮动的影响
  属性值为both,同时清除左右两侧浮动的影响*/
复制代码

1. 额外标签法

1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标签，结构化比较差，所以不推荐使用。下面三种写法都适用：

<!--写法一：直接用style-->
<div style="clear:both"></div>

<!--写法二：使用clear类-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--写法三：可以使用br等别的块级元素来清除浮动-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 内部标签法

把div放进父盒子里，这样盒子会撑开，一般也不会用。

2. overflow

给父级元素添加overflow样式方法。

这种方法代码比较简洁，可以通过触发BFC方式，但是因为本身overflow的本质是 溢出隐藏 的效果，所以有的时候也会有一些问题存在，比如内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上这句话，就可以清除浮动   overflow = hidden|auto|scroll 都可以实现*/
  }
复制代码

3. 伪元素法（最常用）

3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动思想，结构语义化正确。父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别，要进行兼容，使用zoom:1触发hasLayout来清除浮动

代表网站：百度、淘宝、网易等

.clearfix:after{
    content:".";  /*尽量不要为空，一般写一个点*/
    height:0;     /*盒子高度为0，看不见*/
    display:block;    /*插入伪元素是行内元素，要转化为块级元素*/
    visibility:hidden;      /*content有内容，将元素隐藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7识别 */
}
复制代码

3.2 after伪元素空余字符法

父元素中加一个类名为clearfix，也需要兼容IE6-IE7

在Unicode字符里有一个“零宽度空格”，即U+200B，代替“.”，可以减少代码量，不再使用visibility:hidden
代表网站：阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
复制代码

3.3 使用before和after双伪元素清除浮动（推荐）

这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix,需要兼容IE6-IE7

代表网站：小米、腾讯

 .clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
复制代码

三种方法总结

©copyright burning.

最后在这里说一下，目前在职web前端开发，如果你现在在学习web前端，在整个前端入门的学习过程当中，有遇见任何关于学习方法，学习路线，学习效率等方面的问题，或者缺乏基础入门的视频教程，前端面试题，学习手册，开发工具，PDF文档书籍教程，都可以随时关注并私信我：前端，系统自动坚持会发送交流圈子，可以来自行获取下载。

作者：顽皮的雪狐七七
链接：https://juejin.cn/post/6901903789197197325
来源：掘金

DOM增删改1:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="style/css.css" />

<script>

/*

参数：

id 要绑定单击事件的按钮的id

callback 事件的响应函数

*/

function myClick(id, callback){

var btn = document.getElementById(id);

btn.onclick = callback;

}

window.onload = function () {

//创建广州节点

var gz = document.createElement('li');

var txt = document.createTextNode('广州');

gz.appendChild(txt);

// 创建一个"广州"节点,添加到#city下

myClick('btn01',function () {

// <li>广州</li>

// 创建一个li元素节点对象

// document.createElement() 用来根据标签名创建一个元素节点对象

// var gz = document.createElement('li');

// 创建一个"广州"文本节点对象

// document.createTextNode() 用来根据一个文本内容创建一个文本节点对象

// var txt = document.createTextNode('广州');

// 将txt设置为gz的子节点

// 父节点.appendChild(子节点) 将一个节点设置为另一个节点的子节点

// gz.appendChild(txt);

// 获取id为city的元素

var city = document.getElementById('city');

// 将gz添加到city中

city.appendChild(gz);

});

// 将"广州"节点插入到#bj前面

myClick('btn02',function () {

//获取bj节点

var bj = document.getElementById('bj');

var gz = document.createElement('li');

var txt = document.createTextNode('广州');

gz.appendChild(txt);

/*

父节点.insertBefore(前边的节点, 后边的节点)

- 用来将一个节点插入到指定节点前边

*/

// 获取id为city的元素

var city = document.getElementById('city');

city.insertBefore(gz, bj);

});

// 使用"广州"节点替换#bj节点

myClick('btn03',function () {

//获取bj节点

var bj = document.getElementById('bj');

//创建广州节点

var gz = document.createElement('li');

var txt = document.createTextNode('广州');

gz.appendChild(txt);

//获取id为city的元素

var city = document.getElementById('city');

/*

父节点.replaceChild(新节点, 旧节点)

- 使用一个新的节点替换旧节点

*/

city.replaceChild(gz, bj);

});

// 删除#bj节点

myClick('btn04',function () {

// 获取id为bj的元素

var bj = document.getElementById('bj');

// 获取id为city的元素

var city = document.getElementById('city')

// 父节点.removeChild(子节点)

// city.removeChild(bj);

// 子节点.parentNode.removeChild(子节点)

bj.parentNode.removeChild(bj);

});

// 读取#city内的HTML代码

myClick('btn05',function () {

var city = document.getElementById('city');

alert(city.innerHTML);

});

// 设置#bj内的HTML代码

myClick('btn06',function () {

var bj = document.getElementById('bj');

bj.innerHTML = '深圳';

});

// 创建一个"广州"节点,添加到#city下

myClick('btn07',function () {

// 获取city

var city = document.getElementById('city');

// 修改city的innerHTML

// city.innerHTML += '<li>广州</li>';

// 创建一个li元素

var gz = document.createElement('li');

// 设置gz中的文本内容

gz.innerHTML = '广州';

// 将li设置city的子节点

city.appendChild(gz);

});

//为bj绑定一个单击响应函数

var bj = document.getElementById('bj');

bj.onclick = function () {

alert(123);

};

};

</script>

</head>

<body>

<div id="total">

<div class="inner">

<p>

你喜欢哪个城市?

</p>

<ul id="city">

<li id="bj">北京</li>

<li>上海</li>

<li>东京</li>

<li>首尔</li>

</ul>

</div>

</div>

<div id="btnList">

<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>

<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>

<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>

<div><button id="btn04">删除#bj节点</button></div>

<div><button id="btn05">读取#city内的HTML代码</button></div>

<div><button id="btn06">设置#bj内的HTML代码</button></div>

<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>

</div>

</body>

</html>

2DOM增删改表格练习复杂1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>添加删除记录练习</title>

<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />

<script type="text/javascript">

window.onload = function () {

// 将删除tr的函数单独提取

function delA() {

// 删除员工 点击哪个超链接，就要删除哪个超链接所在的tr

// 在这个响应函数中，点击哪个超链接，this就是哪个超链接

// alert(this);

// 获取当前超链接所在的tr

var tr = this.parentNode.parentNode;

// 获取被删除员工的name

// var name = tr.firstElementChild.innerHTML;

// var name = tr.children[0].innerHTML;

var name = tr.getElementsByTagName('td')[0].innerHTML;

//弹出一个提示框

// confirm() 用来弹出一个带有确认和取消的对话框

// confirm() 会根据用户的不同选择返回不同的值

// 点击确认，返回true，点击取消返回false

if(confirm('确认删除【'+name+'】吗？')){

// 删除tr

tr.parentNode.removeChild(tr);

}

// 点击超链接后，会发生页面的跳转，这个是超链接的默认行为

// 如果不希望发生默认行为，可以在响应函数的最后return 一个 false

// 取消默认行为

return false;

}

/*

点击超链接以后，删除员工

*/

// 获取所有的超链接

var links = document.getElementsByTagName('a');

// 遍历links

for(var i=0; i<links.length; i++){

// 为超链接绑定单击响应函数

links[i].onclick = delA;

}

/*

点击提交按钮后，添加员工

*/

var addEmpButton = document.getElementById('addEmpButton');

addEmpButton.onclick = function () {

// 获取用户填写 姓名 邮件 薪资

var name = document.getElementById('empName').value;

var email = document.getElementById('email').value;

var salary = document.getElementById('salary').value;

/*

<tr>

<td>Tom</td>

<td>tom@tom.com</td>

<td>5000</td>

<td><a href="javascript：;">Delete</a></td>

</tr>

*/

// 创建一个tr

var tr = document.createElement('tr');

// 创建四个td

var nameTd = document.createElement('td');

var emailTd = document.createElement('td');

var salaryTd = document.createElement('td');

var aTd = document.createElement('td');

// 创建一个超链接

var link = document.createElement('a');

// 为超链接添加属性

link.href = 'javascript：;';

// 为超链接绑定删除的事件

link.onclick = delA;

// 创建四个文本节点

var nameTxt = document.createTextNode(name);

var emailTxt = document.createTextNode(email);

var salaryTxt = document.createTextNode(salary);

var delTxt = document.createTextNode('Delete');

// 将文本节点添加到元素中

nameTd.appendChild(nameTxt);

emailTd.appendChild(emailTxt);

salaryTd.appendChild(salaryTxt);

link.appendChild(delTxt);

aTd.appendChild(link);

// 将四个td添加到tr中

tr.appendChild(nameTd);

tr.appendChild(emailTd);

tr.appendChild(salaryTd);

tr.appendChild(aTd);

// 获取id为employeeTable的table

var tbody = document.querySelector('#employeeTable tbody');

tbody.appendChild(tr);

};

};

</script>

</head>

<body>

<table id="employeeTable">

<tr>

<th>Name</th>

<th>Email</th>

<th>Salary</th>

<th> </th>

</tr>

<tr>

<td>Tom</td>

<td>tom@tom.com</td>

<td>5000</td>

<td><a href="javascript：;">Delete</a></td>

</tr>

<tr>

<td>Jerry</td>

<td>jerry@sohu.com</td>

<td>8000</td>

<td><a href="javascript：;">Delete</a></td>

</tr>

<tr>

<td>Bob</td>

<td>bob@tom.com</td>

<td>10000</td>

<td><a href="deleteEmp?id=003">Delete</a></td>

</tr>

</table>

<div id="formDiv">

<h4>添加新员工</h4>

<table>

<tr>

<td class="word">name: </td>

<td class="inp">

<input type="text" name="empName" id="empName" />

</td>

</tr>

<tr>

<td class="word">email: </td>

<td class="inp">

<input type="text" name="email" id="email" />

</td>

</tr>

<tr>

<td class="word">salary: </td>

<td class="inp">

<input type="text" name="salary" id="salary" />

</td>

</tr>

<tr>

<td colspan="2" align="center">

<button id="addEmpButton">

Submit

</button>

</td>

</tr>

</table>

</div>

</body>

</html>

3DOM增删改表格练习简化式2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>添加删除记录练习</title>

<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />

<script type="text/javascript">

window.onload = function () {

// 将删除tr的函数单独提取

function delA() {

// 删除员工 点击哪个超链接，就要删除哪个超链接所在的tr

// 在这个响应函数中，点击哪个超链接，this就是哪个超链接

// alert(this);

// 获取当前超链接所在的tr

var tr = this.parentNode.parentNode;

// 获取被删除员工的name

// var name = tr.firstElementChild.innerHTML;

// var name = tr.children[0].innerHTML;

var name = tr.getElementsByTagName('td')[0].innerHTML;

//弹出一个提示框

// confirm() 用来弹出一个带有确认和取消的对话框

// confirm() 会根据用户的不同选择返回不同的值

// 点击确认，返回true，点击取消返回false

if(confirm('确认删除【'+name+'】吗？')){

// 删除tr

tr.parentNode.removeChild(tr);

}

// 点击超链接后，会发生页面的跳转，这个是超链接的默认行为

// 如果不希望发生默认行为，可以在响应函数的最后return 一个 false

// 取消默认行为

return false;

}

/*

点击超链接以后，删除员工

*/

// 获取所有的超链接

var links = document.getElementsByTagName('a');

// 遍历links

for(var i=0; i<links.length; i++){

// 为超链接绑定单击响应函数

links[i].onclick = delA;

}

/*

点击提交按钮后，添加员工

*/

var addEmpButton = document.getElementById('addEmpButton');

addEmpButton.onclick = function () {

// 获取用户填写 姓名 邮件 薪资

var name = document.getElementById('empName').value;

var email = document.getElementById('email').value;

var salary = document.getElementById('salary').value;

/*

<tr>

<td>Tom</td>

<td>tom@tom.com</td>

<td>5000</td>

<td><a href="javascript：;">Delete</a></td>

</tr>

*/

// 创建一个tr

var tr = document.createElement('tr');

// 通过innerHTML向tr中添加内容

tr.innerHTML = '<td>'+name+'</td>' +

'<td>'+email+'</td>' +

'<td>'+salary+'</td>' +

'<td><a href="javascript：;">Delete</a></td>';

//为超链接绑定一个单击响应函数

tr.getElementsByTagName('a')[0].onclick = delA;

// 获取id为employeeTable的table

var tbody = document.querySelector('#employeeTable tbody');

tbody.appendChild(tr);

};

};

</script>

</head>

<body>

<table id="employeeTable">

<tr>

<th>Name</th>

<th>Email</th>

<th>Salary</th>

<th> </th>

</tr>

<tr>

<td>Tom</td>

<td>tom@tom.com</td>

<td>5000</td>

<td><a href="javascript：;">Delete</a></td>

</tr>

<tr>

<td>Jerry</td>

<td>jerry@sohu.com</td>

<td>8000</td>

<td><a href="javascript：;">Delete</a></td>

</tr>

<tr>

<td>Bob</td>

<td>bob@tom.com</td>

<td>10000</td>

<td><a href="deleteEmp?id=003">Delete</a></td>

</tr>

</table>

<div id="formDiv">

<h4>添加新员工</h4>

<table>

<tr>

<td class="word">name: </td>

<td class="inp">

<input type="text" name="empName" id="empName" />

</td>

</tr>

<tr>

<td class="word">email: </td>

<td class="inp">

<input type="text" name="email" id="email" />

</td>

</tr>

<tr>

<td class="word">salary: </td>

<td class="inp">

<input type="text" name="salary" id="salary" />

</td>

</tr>

<tr>

<td colspan="2" align="center">

<button id="addEmpButton">

Submit

</button>

</td>

</tr>

</table>

</div>

</body>

</html>

4DOM表格练习的this和作用域相关问题:

1-- let块作用域包含function后:

<script type="text/javascript">

window.onload = function () {

/*

点击超链接以后，删除员工

*/

// 获取所有的超链接

// var links = document.getElementsByTagName('a');

var links = document.querySelectorAll('a');

// 遍历links

for(let i=0; i<links.length; i++){

// 将当前元素的索引，作为对象的属性存储

// links[i].index = i;

// 为超链接绑定单击响应函数

// (function (i) {

// links[i].onclick = function () {

// alert(i);

// // 希望当点击哪个超链接，i就是哪个超链接的索引

// // 点击第一个超链接i为0. 点击第二个超链接i为1，以此类推

// // alert(this.index);

//

// return false;

// };

// })(i);

links[i].onclick = function () {

/*

即使可以正常获取到i的值，下边的写法也是不正确的

getElementsByTagName() 获取到的是一个实时更新的数组

当删除或增加一个元素后，数组会实时更新，也就是元素的索引会发生变化

*/

var tr = links[i].parentNode.parentNode;

var name = tr.getElementsByTagName('td')[0].innerHTML;

if(confirm('确认删除【'+name+'】吗？')){

tr.parentNode.removeChild(tr);

}

return false;

};

}

};

</script>

2:直接访问:i=3 实际索引只有0,1,2—因为循环先执行完了,函数内的i只能获取到3----只能利用闭包,或块作用域包含它才可--

<script type="text/javascript">

window.onload = function () {

/*

点击超链接以后，删除员工

*/

// 获取所有的超链接

var links = document.getElementsByTagName('a');

// 遍历links

for(var i=0; i<links.length; i++){

alert('for 执行了 '+i);

// 为超链接绑定单击响应函数

links[i].onclick = function () {

alert('onclick 执行了 '+i); // i的值是3

// var tr = links[i].parentNode.parentNode;

// var name = tr.getElementsByTagName('td')[0].innerHTML;

// if(confirm('确认删除【'+name+'】吗？')){

// // 这么写行不行？

// // 创建一个表格时，如果在table中不指定thead tbody tfoot这些标签时

// // 浏览器会自动添加tbody标签，并将所有的tr都放入到tbody标签中

// // tr的父元素是tbody而不是table

// // var employeeTable = document.getElementById('employeeTable');

// // 删除tr

// tr.parentNode.removeChild(tr);

// }

return false;

};

}

};

</script>

5DOM操作css:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>操作样式</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

margin-top: 50px;

transition: all 1s;

}

</style>

<script>

window.onload = function () {

//点击按钮后，改变box1的样式

// 为按钮绑定一个单击响应函数

var btn = document.getElementById('btn');

// 获取box1

var box1 = document.getElementById('box1');

var w = 100;

btn.onclick = function () {

w += 100;

// 修改box1的样式

// 可以直接通过box1.style属性来修改其样式

// 语法：元素.style.样式名 = 样式值

box1.style.width = w+'px';

box1.style.height = w+'px';

// 注意 类似于 xxx-yyy 这种属性，必须将其修改为驼峰命名法

// 将-号去掉，-后的字母改大写 xxxYyy borderLeftWidth

box1.style.backgroundColor = 'yellow';

};

};

</script>

</head>

<body>

<button id="btn">点我一下</button>

<div id="box1"></div>

</body>

</html>

6DOM读取css样式:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>操作样式</title>

<style>

#box1{

height: 100px;

background-color: orange;

margin-top: 50px;

transition: all 1s;

}

</style>

<script>

window.onload = function () {

//点击按钮后，改变box1的样式

// 为按钮绑定一个单击响应函数

var btn = document.getElementById('btn');

// 获取box1

var box1 = document.getElementById('box1');

var w = 100;

btn.onclick = function () {

// 通过style属性所设置的样式都是内联样式，所以一般设置完成后会立即生效

// 读取元素的样式 通过style属性所读取的样式，也是内联样式

// 读取语法：对象.style.样式名 (一般不会使用这种方式来读取属性)

// alert(box1.style.width);

/*

getComputedStyle() 用来读取元素当前的样式

需要两个参数：

第一个，要获取样式的元素

第二个，要获取的伪元素，如果不需要获取伪元素的可以省略或传null

返回值：

返回一个对象作为返回值，

对象中存储了当前元素所有的生效的样式

这个对象也是一个实时更新对象

通过getComputedStyle()读取的样式都是只读的，无法修改

该函数支持IE9及以上浏览器

*/

var cs = getComputedStyle(box1);

// alert(cs.width);

// alert(cs.backgroundColor);

// cs.width = '300px'; 不能修改的

alert(cs.width);

// box1.style.width = parseInt(cs.width) * 2 + 'px';

};

};

</script>

</head>

<body>

<button id="btn">点我一下</button>

<div id="box1"></div>

</body>

</html>

7:DOM操作css样式2:

<style>

#box1{

width: 100px;

height: 100px;

margin: 50px;

background-color: orange;

padding: 20px;

border: 10px red solid;

overflow: auto;

}

#box2{

width: 350px;

height: 500px;

background-color: yellow;

}

</style>

<script>

window.onload = function () {

var box1 = document.getElementById('box1');

var btn01 = document.getElementById('btn01');

btn01.onclick = function () {

// 盒子的内部大小

// clientWidth 元素宽度（内容区+内边距）

// clientHeight 元素高度（内容区+内边距）

// 这两个属性返回的值就是数字可以直接用来计算

// 盒子的整个大小

// offsetWidth 获取元素的宽度（内容区+内边距+边框）

// offsetHeight 获取元素的高度（内容区+内边距+边框）

// alert(box1.clientWidth);

/*

offsetParent 获取元素的定位父元素

- 获取离当前元素最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位则返回body

offsetLeft 获取当前元素距离定位元素的左侧偏移量

offsetTop 当前元素距离定位元素上侧的距离

*/

// alert(box1.offsetParent);

// alert(box1.offsetLeft);

// alert(box1.offsetTop);

// scrollHeight 用来获取元素滚动区域的高度

// scrollWidth 用来获取滚动区域的宽度

// alert(box1.scrollWidth);

// 这两个值可以修改，以改变滚动条的位置

// scrollTop 垂直滚动条的位移

// scrollLeft 水平滚动条的位移

// 当元素的scrollHeight减去scrollTop等于元素clientHeight时，说明垂直滚动条已经滚动到底了

alert(box1.scrollHeight - box1.scrollTop === box1.clientHeight);

// alert(box1.clientHeight);

// box1.scrollLeft = 25;

};

};

</script>

</head>

<body>

<button id="btn01">点我一下</button>

<div id="box3" style="position:relative; border: 5px black dotted;">

<div id="box1">

<div id="box2"></div>

</div>

</div>

</body>

8关于用户协议阅读到底的操作练习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#info{

width: 300px;

height: 400px;

background-color: #bfa;

overflow: auto;

}

</style>

<script>

window.onload = function () {

//当协议的滚动条拖动到底时，使多选框可用，当多选框选中时，使提交按钮可用

// 获取info

var info = document.getElementById('info');

// 获取ck input

var ck = document.getElementById('ck');

// 获取注册按钮

var re = document.getElementById('re');

// scroll事件会在元素的滚动条滚动时触发

info.onscroll = function () {

// console.log(Math.round(info.scrollHeight - info.scrollTop), info.clientHeight);

//因为谷歌浏览器缩放,会导致数字不精确, 所以用Math.round四舍五入取整!

// 检查垂直滚动条是否滚动到底

if(Math.round(info.scrollHeight - info.scrollTop) === info.clientHeight){

// 等式满足证明滚动条滚动到底，滚动到底说明用户已经阅读完协议

// 使多选框可用，表单项的disabled属性用来设置元素是否禁用

// 如果设置true，则表示禁用元素，设置为false则表示启用元素

ck.disabled = false;

}

};

// 接收协议后，使注册按钮可用

ck.onclick = function () {

// 使注册按钮可用

re.disabled = !ck.checked;

};

};

</script>

</head>

<body>

<h2>欢迎用户注册，请仔细阅读以下协议：</h2>

<p id="info">

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

亲爱的用户，欢迎注册我们的网站，你必须要遵守以下协议，要不然你就别注册

</p>

<input id="ck" type="checkbox" disabled> 我已仔细阅读，并遵守以上协议

<input id="re" type="button" value="注册" disabled>

</body>

</html>

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#文章首发挑战赛#

在线咨询

上一篇：第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
下一篇：以英国数据新闻理念变迁看数据新闻教育的未来走向

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商