1.全选反选按钮
<!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;
text-align: center;
}
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="selectAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<!--每一个菜的选项-->
<tbody id="cai">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>招牌红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>笋干烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>特价双拼饭</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script>
//1 获取元素
var selectAll = document.getElementById("selectAll");//全选按钮
var cbs = document.getElementById("cai").getElementsByTagName("input");//下面的四个小选项
//2 给selectAll设置点击事件
selectAll.onclick = function () {
//根据当前selectAll的选中属性值，设置底部的四个cbs的状态
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
};
//3 当点击底部的某个cb时，可能会选中顶部的selectAll
for (var i = 0; i < cbs.length; i++) {
cbs[i].onclick = function () {
var flag = true;//假设本次点击后可以选中selectAll
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked == false) {
//设置条件为false
flag = false;
break;
}
}
selectAll.checked = flag;
};
}
</script>
</body>
</html>
2.选想卡切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<!-- <a href="images/1.jpg" id="link">图片</a> -->
<h2>
美女画廊
</h2>
<ul id="imagegallery">
<li data-src="images/1.jpg" title="第1张美女图">
<img src="images/1-small.jpg" width="100" alt="美女1"/>
</li>
<li data-src="images/2.jpg" title="第2张美女图">
<img src="images/2-small.jpg" width="100" alt="美女2"/>
</li>
<li data-src="images/3.jpg" title="第3张美女图">
<img src="images/3-small.jpg" width="100" alt="美女3"/>
</li>
<li data-src="images/4.jpg" title="第4张美女图">
<img src="images/4-small.jpg" width="100" alt="美女4"/>
</li>
</ul>
<div style="clear:both"></div>
<!-- 显示的大图区域 -->
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<!-- 内容显示区域 -->
<p id="des">选择一个图片</p>
<script>
/*
项目分析
1.事件源:是每一个上面的小图片
2.事件类型:点击事件
3.事件执行的函数
3.1 每次点击事件要改变的是本图片的一个透明度
3.2 底下的每一个大图片都一一对应的改变
3.3 下面的字体展示每一张图片的标题
*/
var imgs = document.querySelectorAll('li>img');
var lis = document.querySelectorAll('li');
var image = document.getElementById('image');
var des = document.getElementById('des')
imgs.forEach(function(ele,i){
ele.onclick=function(){
imgs.forEach(function(ele,i){
ele.style.opacity=0.5;
})
this.style.opacity=1;
image.src=lis[i].getAttribute('data-src')
des.innerText=lis[i].getAttribute('title')
}
})
</script>
</body>
</html>
3.选想卡切换，对应tab栏切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<!-- 顶部被操作选项卡标题 -->
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<!-- 底部对应变化的内容区域 -->
<div class="main selected"><img src="images/guojidapai.jpg" alt=""/></div>
<div class="main"><img src="images/guozhuangmingpin.jpg" alt=""/></div>
<div class="main"><img src="images/qingjieyongpin.jpg" alt=""/></div>
<div class="main"><img src="images/nanshijingpin.jpg" alt=""/></div>
</div>
</div>
</body>
<script>
/*
效果：
1.鼠标移入上面的某个分类(tab)，就会把下面的对应的商品进行切换
2.某个分类的顶部边框变得和别人不一样
思路：
给每个分类注册鼠标移入事件，在移入事件里面，把自己的边框变得和别人不一样，
- 给自己添加一个class - active
- 把其他的变成普通的
找到对应的商品，把对应的商品显示出来
- 要根据索引，找到对应的商品
- 把对应的商品的类名如果要显示加一个 selected，如果要隐藏，就移除selected
步骤：
1. 获取元素
2. 注册鼠标移入事件
3. 在事件处理程序里面
3.1 把自己变成有一个红色的边框 - 加一个class - active
3.2 把其他的兄弟元素变普通 - 移除class - active
3.3 找到对应的商品，显示出来 - 加一个class - selected
3.4 把其他的商品隐藏 - 移除 selected - class
*/
// 获取元素
var tabs = document.querySelectorAll('.tab-item');
var goods = document.querySelectorAll('.main');
// 使用forEach的方式遍历
tabs.forEach(function(e,i){
e.onclick = function(){
// 清除当前展示效果
tabs.forEach(function(ele, i){
ele.classList.remove('active');
goods[i].classList.remove('selected');
}, 123);
// 设置标题变色
this.classList.add('active');
// 设置对应内容展示
goods[i].classList.add('selected');
}
});
</script>
</html>
4.模拟搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
fieldset, img, input, button {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul, ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#box {
width: 405px;
margin: 200px auto;
position: relative;
}
#txtSearch {
float: left;
width: 300px;
height: 32px;
padding-left: 4px;
border: 1px solid #b6b6b6;
border-right: 0;
}
#btnSearch {
float: left;
width: 100px;
height: 34px;
font: 400 14px/34px "microsoft yahei";
color: white;
background: #3385ff;
cursor: pointer;
}
#btnSearch:hover {
background: #317ef3;
}
#pop {
width: 303px;
border: 1px solid #ccc;
padding: 0px;
position: absolute;
top: 34px;
}
#pop ul li {
padding-left: 5px;
}
#pop ul li:hover {
background-color: #CCC;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="txtSearch">
<input type="button" value="百度一下" id="btnSearch">
</div>
<script>
//模拟词库
var datas = ["a", "abc", "abbbb", "abxxxx", "xyz", "abcdef", "abzzzz"];
//步骤分析：
//1 当键盘按键抬起时触发效果(keyup)
//2 先根据当前输入内容，获取到可以显示的词
//2.1 能满足条件的词必须以当前输入的内容为开头（ 词库词.indexOf(输入内容) ）
//3 创建结构即可
//3.1 提前设置好的样式对结构的创建也有要求 ( div，id设置为pop，内部结构为ul和li )
//4 细节处理
//实现：
//1 获取元素
var box = document.getElementById("box");
var txt = document.getElementById("txtSearch");
//2 给txt设置keyup事件
txt.onkeyup = function () {
//3 根据当前输入内容，到词库中匹配到满足条件的词
var resultArr = [];//用于保存取出的词
for (var i = 0; i < datas.length; i++) {
if (datas[i].indexOf(this.value) == 0) {
//将词取出
resultArr.push(datas[i]);
}
}
//--------------
//对可能已经存在的pop结构进行删除
//如果页面中已经存在了旧的列表，这个标签一定具有id，叫pop
var pop = document.getElementById("pop");
//检测pop的值，如果为null，不需要删除，如果不是null，删除即可
if (pop) {
box.removeChild(pop);
}
//---------------
//如果当前没有输入内容，不进行新的结构创建
if (txt.value == "") {
return;
}
//如果没有匹配到词，不需要进行后续的结构创建
if (resultArr.length == 0) {
return;
}
//---------------
//4 根据取出的词创建结构(需要考虑样式问题)
var div = document.createElement("div");
div.id = "pop";
box.appendChild(div);
var list = document.createElement("ul");
div.appendChild(list);
//遍历取出的词，进行li的创建
var li;
for (var i = 0; i < resultArr.length; i++) {
li = document.createElement("li");
setText(li, resultArr[i]);
list.appendChild(li);
}
};
function setText(element, xinText) {
if (typeof element.innerText == "string") {
//说明支持innerText属性
element.innerText = xinText;
} else {
//说明支持textContent
element.textContent = xinText;
}
}
</script>
</body>
</html>
5.微博发布带时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微博发布效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.weibo {
width: 600px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 10px;
}
.weibo-text {
width: 590px;
height: 140px;
padding: 5px;
border: 1px solid #ccc;
outline: none;
resize: none;
}
.weibo-text:focus {
border-color: #f60;
}
.weibo-btn {
width: 80px;
height: 30px;
background-color: #f90;
color: #fff;
border: 0 none;
margin-top: 5px;
border-radius: 3px;
cursor: pointer;
outline: 0 none;
}
.weibo-list {
padding-top: 10px;
}
.weibo-list li {
font-size: 14px;
line-height: 30px;
border-bottom: 1px dotted #ccc;
overflow: hidden;
}
.weibo-list li p {
float: left;
}
.weibo-list li span {
float: right;
cursor: pointer;
}
.weibo-list li input {
height: 24px;
line-height: 24px;
width: 300px;
font-size: 14px;
border: 0 none;
}
</style>
</head>
<body>
<div class="weibo">
<!-- 用来输入内容的文本域 -->
<textarea id="txt" class="weibo-text"></textarea>
<!-- 发布按钮 -->
<input class="weibo-btn" value="发布" type="button" id="btn">
<!-- 用于放置微博信息的父元素 -->
<ul class="weibo-list" id="list">
<!-- <li>
<p>快来收了这九款用上就停不下来的应用吧！！</p>
<span>删除</span>
</li>
<li>
<p>超级详细的云南大理自助游攻略</p>
<span>删除</span>
</li>
<li>
<p>外国最近很火的舞蹈，舒服简单自然，太棒了！</p>
<span>删除</span>
</li> -->
</ul>
</div>
</body>
<script>
/*
通过本地存储事件微博发布的功能分析
- 点击发布按钮进行结构创建相关操作(之前设置过的部分)
- 将新发布的微博信息保存到本地存储中
- localStorage.setItem()
- 一会儿可能会关了浏览器再开，或者会刷新页面
- 读取本地存储中可能存在的所有微博信息
- localStorage.getItem()
- 根据读取的数据，在ul中创建li的微博内容
*/
// 创建新微博功能实现：
// 1 获取元素
var txt = document.getElementById('txt'); // 文本域
var btn = document.getElementById('btn'); // 发布按钮
var list = document.getElementById('list'); // 放置新微博的ul
// 2 给发布按钮设置点击事件
btn.onclick = function () {
// 3 检测是否输入了内容（检测没有输入时的情况）
if (txt.value === '') {
alert('不好意思，您忘记输入内容了~');
return;
}
// 4 根据输入的内容，创建微博结构 li>p{内容}
var text = document.createElement('p');
text.innerText = txt.value;
var li = document.createElement('li');
li.appendChild(text); // 将内容p放入到li中
// - 设置删除按钮(两种创建方式均可使用)
var time = formatDate();
li.innerHTML += '<span class="del">删除</span><span>' + time + '</span>';
// 5 将li添加到ul中的最前面位置
list.insertBefore(li, list.children[0]);
// --- 本地存储：将新数据添加到本地存储中保存
var value = txt.value; // 要保存的微博信息内容
// 例如：在本地存储中采用以下形式保存数据
/* [
{content : '这是第一条微博的内容', time : '2018-3-6'},
{content : '这是第二条微博的内容', time : '2018-3-16'},
{content : '这是第三条微博的内容', time : '2018-3-26'},
{content : '这是第四条微博的内容', time : '2018-3-26'},
] */
// 实际存储数据时，情况有2种，首次存储和后期存储
// - 先获取localStorage中的数据，判断是否具有数据
var datas = localStorage.getItem('wbDatas'); // 查查我有没有账户
if (datas === null) {
// 先开个户，然后往里存钱
// 初次存储操作
datas = [{
content: value,
time: time
}];
} else {
// 已经存在账户并且还有钱，将新的钱累加的保存在账户中
// 后期存储操作
// 第二次取出的内容为：'[{"content":"123","time":"2019-7-9 11:9:5"}]'
datas = JSON.parse(datas);
// 因为结构设置时将新结构放在最前面展示了
// - 数据存储时也要在最前面保存
datas.unshift({
content: value,
time: formatDate()
});
}
// 将处理后的数据转换为JSON格式保存到本地存储
var jsonStr = JSON.stringify(datas);
localStorage.setItem('wbDatas', jsonStr);
// 6 将文本域内容清空
txt.value = '';
};
// 通过事件委托设置删除按钮的操作
list.onclick = function (e) {
var tar = e.target;
if (tar.className === 'del') {
this.removeChild(tar.parentNode);
}
};
// --- 本地存储：页面加载时，读取本地存储中的数据并进行列表创建
// 1 从本地存储中获取存在的微博信息
var jsonStr = localStorage.getItem('wbDatas');
// 2 检测是否存在微博信息，如果有，再进行创建操作
if (jsonStr !== null) {
// 3 将JSON格式的字符串转换为js的数据类型
var datas = JSON.parse(jsonStr);
// 4 遍历datas，进行微博结构的创建操作
// li*6>p{内容}+span.del{删除}+span{时间}
var str = '';
for (var i = 0; i < datas.length; i++) {
str +=
'<li>\
<p>' + datas[i].content + '</p>\
<span class="del">删除</span>\
<span>' + datas[i].time + '</span>\
</li>';
}
// 5 将拼接好的结构设置给list的innerHTML属性
list.innerHTML = str;
}
// 随便设置一个函数处理日期格式：
function formatDate() {
var d = new Date();
return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d
.getMinutes() + ':' + d.getSeconds();
}
</script>
</html>
6.注册协议倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 750px;
height: 500px;
padding-top: 100px;
border: 1px solid #666;
margin: 0 auto;
text-align: center;
}
textarea {
font-size: 20px;
}
</style>
</head>
<body>
<div id="dv">
<textarea name="tt" id="" cols="60" rows="15">
网易邮箱帐号服务条款
最后修订时间：2016年8月31日
【注意】欢迎申请使用广州网易计算机系统有限公司及其他合作运营主体（下列简称为“网易公司”或“网易”）提供的服务。
请您（下列简称为“用户”）仔细阅读以下全部内容（特别是粗体下划线标注的内容）。
如用户不同意本服务条款任意内容，请勿注册或使用网易服务。
如用户通过进入注册程序并勾选“我同意网易邮箱帐号服务条款”，即表示用户与网易公司已达成协议，自愿接受本服务条款的所有内容。
此后，用户不得以未阅读本服务条款内容作任何形式的抗辩。
1.服务条款的确认和接纳
网易服务涉及到的网易产品的所有权以及相关软件的知识产权归网易公司所有。网易公司所提供的服务必须按照其发布的公司章程，服务条款和操作规则严格执行。本服务条款的效力范围及于网易公司的一切产品和服务，用户在享受网易公司任何单项服务时，应当受本服务条款的约束。
</textarea>
<br/>
<br>
<!-- 需要进行操作的复选框 -->
<!-- <label><input type="checkbox" id="cb">同意以上协议</label> -->
<br>
<br>
<!-- 操作后产生变化的按钮 -->
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled"/>
</div>
<script>
/*
功能分析:
- 通过间隔定时器设置，每个一秒计数减1(例如从5开始)
- 将新的计数的时间设置为按钮的内容
- 时间到0后
- 将按钮启用： xx.disabled = false;
- 设置按钮内容为'注册'
- 将定时器清除
*/
// 1 获取元素
var btn = document.getElementById('btn');
// 2 设置间隔定时器
var count = 5; // 设置计数的默认值为5
var timer = setInterval(function () {
// 设置计数-1
count--;
// 将计数的内容显示到按钮内容中
btn.value = '请仔细阅读协议(' + count + ')';
// 3 判断count值是否为0，设置后续操作
if (count === 0) {
// - 将按钮启用：
btn.disabled = false;
// - 设置按钮内容为'注册'
btn.value = '注册';
// - 将定时器清除
clearInterval(timer);
}
}, 1000);
</script>
</body>
</html>