1.百度换肤案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(img/百度换肤1.jpg) no-repeat;
background-size: 100%;
}
ul {
width: 880px;
margin: auto;
}
li {
list-style-type: none;
float: left;
}
img {
height: 120px;
width: 220px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="img/百度换肤1.jpg" /></li>
<li><img src="img/百度换肤2.jpg" /></li>
<li><img src="img/百度换肤3.jpg" /></li>
<li><img src="img/百度换肤4.jpg" /></li>
</ul>
<script>
//案例分析：1.给一组元素注册事件
//2.给4个图片利用循环注册点击事件
//3.当点击这个图片，让页面背景改为当前图片
//4.核心算法：把当前图片的src路径取过来，给body作为背景即可
var imgs = document.querySelector('.baidu').querySelectorAll('img');//不会
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
//this.src就是点击图片的路径
console.log(this.src);
//把路径this.src给body
document.body.style.backgroundImage = 'url(' + this.src + ')';//这一步就很牛逼么不是
}
}
</script>
</body>
</html>2.表单全选，取消全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" id='choose_all_btn'>全选</button>
<div>
<input type="checkbox" name="t">珍珠
<input type="checkbox" name="t">椰果
<input type="checkbox" name="t">啵啵
<input type="checkbox" name="t">冰淇淋
</div>
<script>
//1.全选和取消全选做法： 让所有复选框的checked属性（选中状态） 跟随 全选按钮即可
//获取元素
var chooseAll = document.getElementById('choose_all_btn');
var tt = document.getElementsByName('t');
//注册事件
chooseAll.onclick = function () {
//this.check 可以得到当前复选框的选中状态 如果是true就是选中，false就是未选中
console.log(this.checked);
for (var i = 0; i < tt.length; i++) {
tt[i].checked = this.checked;
}
}
//2.下面复选看看需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否
//有没有没选中的，如果有一个没选中的，上面全选就选不中。
//3.可以设置一个变量来控制全选是否选中
for (var i = 0; i < tt.length; i++) {
tt[i].onclick = function () {
//flag控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都要循环检查4个小按钮是否被全选中
for (var i = 0; i < tt.length; i++) {
if (!tt[i].checked) {
flag = false;
break;//退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环
}
}
chooseAll.checked = flag;
}
}
</script>
</body>
</html>3.动态生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成表格</title>
<style type="text/css">
table {
width: 250px;
height: 100px;
border: #000000 1px solid;
border-collapse: collapse;
text-align: center;
margin: 50px auto;
}
th,
td {
border: #000000 1px solid;
}
thead {
background-color: #A5A5A5;
font: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>魏璎珞</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="javascipt:;">删除</a></td>
</tr>
<tr>
<td>弘历</td>
<td>JavaScript</td>
<td>90</td>
<td><a href="javascipt:;">删除</a></td>
</tr>
<tr>
<td>傅恒</td>
<td>JavaScript</td>
<td>99</td>
<td><a href="javascipt:;">删除</a></td>
</tr>
<tr>
<td>明玉</td>
<td>JavaScript</td>
<td>89</td>
<td><a href="javascipt:;">删除</a></td>
</tr> -->
</tbody>
</table>
<script>
//案例分析：1.因为学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据，数据我们采取对象形式存储
//2.所有的数据都是放到tbody里面的行里面
//3.因为行很多，我们需要循环创建多个行（对应多少人）
//4.每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
//5.最后一列单元格是删除，需要单独创建单元格。
//开始啦！第一步先去准备好学生的数据
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 90
}, {
name: '容音',
subject: 'JavaScript',
score: 120
}, {
name: '尔晴',
subject: 'JavaScript',
score: 10
}
];
//2.往tbody里面创建行：有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) {//外面的for循环管行tr
//创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//行里面创建单元格td（跟数据有关系的3个单元格） 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
for (var k in datas[i]) {//里面的for循环管列td
var td = document.createElement('td');
//把对象里面的属性值给td
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
//创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
//删除操作
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//点击a 删除当前a所在的行（链接的爸爸的爸爸） node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode);
}
}
// for(var k in obj){
// k得到的是属性名
// obj[k]得到是属性值
// }
</script>
</body>
</html>4.仿京东密码小眼睛切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 300px;
margin: 100px auto;
border-bottom: #7FFFD4 1px solid;
}
.box input {
width: 250px;
height: 50px;
border: 0;
outline: 0;
/* 这玩意老子倒是没想到 */
}
#eye {
width: 30px;
float: right;
margin-top: 15px;
}
#neye {
width: 30px;
float: right;
margin-top: 15px;
display: none;
}
</style>
</head>
<body>
<!-- 仿京东隐藏明文案例的<body>部分 -->
<div class="box">
<label for=''><img src="img/闭眼.jpg" id="eye" alt="" /></label>
<input type="password" id="pwd" name="password" value="" />
</div>
<script>
//仿京东显示隐藏密码明文案例
//核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
//一个按钮两个状态，点击一次切换成文本框，继续点击一次切换为密码框
//算法：利用一个flag变量，来判断flag的值，如果为1就切换成文本框，如果是0就切换为密码框
//1.获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
var flag = 0;
eye.onclick = function () {
//点击一次之后，flag一定要变化
if (flag == 0) {
pwd.type = 'text'; //呦呦呦，这一步，记下来记下来！！！！！
eye.src = 'img/睁眼.jpg';
flag = 1;
} else {
pwd.type = 'password';
eye.src = 'img/闭眼.jpg';
flag = 0;
}
}
</script>
</body>
</html>5.仿淘宝关闭二维码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#close_btn {
width: 15px;
height: 20px;
border: 1px solid black;
text-align: center;
position: relative;
left: 125px;
bottom: 28px;
}
</style>
</head>
<body>
<!-- 仿淘宝关闭二维码案例 -->
<div class="box">
淘宝二维码<br />
<img src="img/淘宝.png" alt="" />
<div id="close_btn">×</div>
</div>
<script>
//案例：仿淘宝关闭二维码案例
//当鼠标点击二维码关闭的时候，则关闭整个二维码
//核心思路：利用样式的显示和隐藏完成，display:none隐藏元素 display:block显示元素
//②点击按钮，就让这个二维码盒子隐藏起来即可
var btn = document.getElementById('close_btn');
var box = document.querySelector('.box');
btn.onclick = function() {
box.style.display = 'none';
}
</script>
</body>
</html>
6.分时问候
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/上午好.jpg" alt="" title="上午好"/><br />
<div>上午好</div>
<script>
// 分时问候案例：上午打开页面，显示上午好，显示上午图片，下午晚上同理
// 根据系统不同时间来判断，所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// 需要一个div元素，显示不同问候语，修改元素内容即可
// 1.获取元素
var img=document.querySelector('img');
var div=document.querySelector('div');
// 2.得到当前的小时数
var date=new Date();
var h=date.getHours();
console.log(h);
// 3.判断小时数改变图片和文字信息
if(h<12){
img.src='img/上午好.jpg';
div.innerHTML='上午好！';
}else if (h<18){
img.src='img/中午好.jpg';
div.innerHTML='中午好!';
}else{
img.src='img/晚上好.jpg';
div.innerHTML='晚上好!';
}
// 总结：innerHTML别写错啦！！！！
</script>
</body>
</html>
7.跟随鼠标的兔兔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
width: 80px;
height: 70px;
position: absolute;
top: 2px
}
</style>
</head>
<body>
<img src="img/love.gif" alt="" />
<script>
//案例分析：1.鼠标不断移动，使用鼠标移动事件：mousemove
//2.在页面中移动，给document注册事件
//3.图片要移动距离，而且不占位置，我们使用绝对定位即可
//4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
var pic=document.querySelector('img');
document.addEventListener('mousemove',function(e){
//1.mousemove只要我们鼠标移动1px 就会触发这个事件
//2.核心：
var x=e.pageX;
var y=e.pageY;
console.log('x坐标是'+x,'y坐标是'+y);
//3.千万不要忘记给left和top添加px单位
pic.style.left = x+'px';
pic.style.top=y+'px';
})
</script>
</body>
</html>
8.简单版发布删除留言
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
textarea {
border: pink 1px solid;
}
ul {
width: 300px;
height: 20px;
}
li {
width: 300px;
height: 20px;
background-color: #FFC0CB;
color: #e30071;
margin-bottom: 3px;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name='textarea' id="">123</textarea>
<button>发布</button>
<br /><br />
<ul>
</ul>
<script>
//核心思路：点击按钮之后，就动态创建一个li，添加到ul里面
//创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
//如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (text.value == '') {
alert('您没有输入内容');
return false;
} else {
//console.log(text.value);
//1.创建元素
var li = document.createElement('li');
//先有li才能赋值
li.innerHTML = text.value + '<a href="javascriot:;">删除</a>';
//2.添加元素
//ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
//3.删除元素 删除的当前链接的li 它的父亲
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
//node.removeChild(child);删除的是li 当前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
//删除留言
//案例分析：1.当我们把文本域里面的值赋值给li时，多添加一个删除的链接
//2.需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
//3.阻止链接跳转需要添加javascriptvoid(0);或者javascript:;
</script>
</body>
</html>9.排他思想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//排他思想：如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
//1.所有元素全部清除样式（干掉其他人）
//2.给当前元素设置样式（留下我自己）
//3.注意顺序不能颠倒，先干到其他人，再设置自己
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
//1.先把所有按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//2.然后让当前元素背景颜色为pink 留下老子自己
this.style.background = 'pink';
}
}
</script>
</body>
</html>10.显示隐藏文本框内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input{
border: 2px solid #e2231a;
color: #bfbfbf;
}
</style>
</head>
<body>
<input type="text" value="手机" />
<script>
//当鼠标点击文本时，里面的默认文字隐藏，当鼠标离开文本时，里面的文字显示
//案例分析：1.首先表单需要2个新事件，获得焦点onfocus 失去焦点onblur
//2.如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
//3.如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
var text=document.querySelector('input');
text.onfocus=function(){
//console.log('得到焦点');
if(this.value === '手机'){
this.value = '';
}
//获得焦点需要把文本框里面的文字颜色变黑
this.style.color='#0c0c0c';
}
text.onblur=function(){
//console.log('失去焦点');
if(this.value === ''){
this.value='手机';
}
this.style.color='#bfbfbf';
}
</script>
</body>
</html>
11.tab栏切换布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab(标签)</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.tab {
margin: 0 auto;
width: 500px;
/* border: 1px solid #000000; */
}
.tab_list {
width: 500px;
height: 50px;
/* border: #A5A5A5 1px solid; */
/* background-color: #e9e9e9; */
margin: 0 auto;
margin-top: 50px;
}
li {
list-style-type: none;
float: left;
padding: 0px 15px;
height: 50px;
line-height: 50px;
border-top: #999999 1px solid;
border-bottom: #999999 1px solid;
background-color: #dbdbdb;
}
.tab_list .current {
color: #fff;
background-color: #E2231A;
}
.item {
display: none;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
<!-- 第一个模块默认显示 -->
商品介绍模块内容
</div>
<div class="item">
规格与包装模快内容
</div>
<div class="item">
售后保障模快内容
</div>
<div class="item">
商品评价（50000）模快内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
//案例分析：①Tab栏切换2个大的模块
//②上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
//③下面的模块内容，会跟随上面的选项卡变化，所以下面模块化写到点击事件里面
//④规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
//⑤核心思路：给上面的tab_list里面的所有li添加自定义属性，属性值从0开始编号
//⑥当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
//开始的五个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
//干掉所有人 其余li清除 class这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
//留下我自己
this.className = 'current';
//2.下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
//干掉所有人 让其余的item这些div隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
扫一扫
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
