图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="1.webp" alt="" id="flower" width="200px">
<br>
<button id="nex">上一张</button>
<button id="end">下一张</button>
</body>
<script>
// 获取获取的标签对象
var flower = document.getElementById('flower')
var nex = document.getElementById('nex') // 上一张
var end = document.getElementById('end') // 下一张
let p_index = 0 // 起始显示值
let p_list = ['1.webp', '2.webp', '3.webp'] // 图片的列表
// 上一张
nex.onclick = function () {
if (p_index === 0) { // 当初始索引小于0时，复制为图片列表中长度-1
p_index = p_list.length -1
}else {
p_index --
}
flower.setAttribute('src', p_list[p_index]) // 根据索引显示图片
}
// 初始索引0 当点击上一张时,出发条件,将索引赋值为 图片列表长度-1，显示图片列表 末尾图片
// 以此类推
// 下一张
end.onclick = function () {
if (p_index === p_list.length-1) { // 当索引大于图片列表的长度时，初始化为0号索引
p_index = 0
}else {
p_index++
}
flower.setAttribute('src', p_list[p_index])
}
// 根据条件列表的长度=2,初始索引为0,当点击下一张时,索引+1=1(无法满足发条件)
// 在点击下一张时(无法满足发条件)索引+1 = 2,就会显示当前图片列表最后一张
// 在点击时满足条件,索引被赋值为0,也就是显示第一张图
</script>
</html>
图片的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">隐藏</button>
<br>
<img src="1.webp" alt="" width="200" id="img">
</body>
<script>
var btn = document.getElementById('btn')
var img = document.getElementById('img')
let is_show = true // 根据这个属性控制当前的显示于隐藏
btn.onclick = function () {
if(is_show){ // true 隐藏
btn.innerText = '隐藏' // 修改按钮的文本
img.style.display = 'none' //将图片隐藏
}else { // false 显示
btn.innerText = '显示'
img.style.display = ''
}
is_show = !is_show // 将变量赋值为取当前反值
}
</script>
</html>
// 主要根据变量去控制，在点击后重新赋值为反值
// true 隐藏 false 显示
// 修改标签的display = none 隐藏
// 修改btn标签的文本，显示不同的文本
淘宝小图切换大图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
list-style: none;
padding: 0;
margin: 0;
}
ul {
overflow: hidden;
}
ul li {
float: left;
height: 50px;
width: 50px;
margin-left: 10px;
margin-top: 10px;
border: 3px solid #fff;
}
.active {
border-color: red;
/* 默认边框颜色样式，当鼠标悬浮时li，那么那个li标签就会存在这个类 */
}
</style>
<body>
<img src="1.webp" alt="" width="400px" id="bigimg">
<ul>
<li class="active">
<a href="">
<img src="1.webp" alt="" width="46" class="smallimg">
</a>
</li>
<li>
<a href="">
<img src="2.webp" alt="" width="46" class="smallimg">
</a>
</li>
<li>
<a href="">
<img src="3.webp" alt="" width="46" class="smallimg">
</a>
</li>
</ul>
</body>
<script>
// 1.获取大图的img标签
var binimg = document.getElementById('bigimg') // 大图对象
var smallimg = document.getElementsByClassName('smallimg') // 全部小图对象
// 遍历小图的集合
for (let i = 0; i < smallimg.length; i++) {
// 遍历集合给每个img添加事件
// 添加鼠标悬浮事件
smallimg[i].onmouseover = function () {
// 1.在悬浮时清除全部li的边框颜色
for (let j = 0; j < smallimg.length; j++){
smallimg[j].parentNode.parentNode.setAttribute('class','')
}
// 2.在设置当前悬浮上的img父级li的外边框颜色
let li = smallimg[i].parentNode.parentNode // 找到li标签添加类
li.setAttribute('class','active') // 每一个悬浮在当前img上添加外边框颜色
// 3.修改 大图的src属性，先获取悬浮到img小图的src赋值给大图的src
binimg.setAttribute('src',smallimg[i].getAttribute('src')) // 获取小图的src赋值给大图 重点
}
}
</script>
</html>
//使用使用鼠标悬浮事件，循环给每个小图赋值事件，当悬浮小图时获取小图的src属性，赋值给大图对象的src
// 边框样式，先在悬浮事件中清除全部的样式属性,在对悬浮的小图添加样式
关闭小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="qe_code">
<img src="1.webp" alt="" id="code" height="100">
<span id="close">X</span>
</div>
</body>
<script>
var close = document.getElementById('close') // 获取x的对象
close.onclick =function () { // 赋值点击事件，当点击时，当整个盒子隐藏
document.getElementById('qe_code').style.display = 'none'
}
</script>
</html>
淘宝小图切大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#box{
border: 1px solid #ccc;
width: 430px;
height: 70px;
padding-top: 430px;
background: url("1.webp") no-repeat ;
}
#box ul li{
margin-left: 15px;
display: inline-block;
}
</style>
<body>
<div id="box">
<ul>
<li class="item">
<img src="1.webp" alt="" width="70">
</li>
<li class="item">
<img src="2.webp" alt="" width="70">
</li>
<li class="item">
<img src="3.webp" alt="" width="70">
</li>
</ul>
</div>
</body>
<script>
var item = document.getElementsByClassName('item') // ul中的全部li标签 列表
var box = document.getElementById('box') // 获取div盒子的对象
for (let i=0;i<item.length;i++){ // 循环li
item[i].onmouseover = function () { // 对每个li 赋值鼠标悬浮事件
// 1.获取item标签下面的全部字标签
let list_child = item[i].childNodes // 获取li 下的全部字标签(只有一个img,但是根据兼容性会获取文本标签)
for (let j=0;j<list_child.length;j++){ // 循环li下的子标签
if(list_child[j].nodeType === 1){ // 剔除文本标签,获取img元素标签
let src = list_child[j].getAttribute('src') // 元素标签就是li 下的img标签 获取img中的src
box.style.background = `url(${src}) no-repeat ` // 赋值给div盒子作为背景图
}
}
}
}
</script>
</html>
百度换肤效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#skin {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("1.webp");
/*设置背景图居中*/
background-position: center 0;
/*设置背景图不平铺*/
background-repeat: no-repeat;
}
#skin-photo {
height: 100%;
width: 100%;
/*设置相对定位*/
position: relative;
/*显示等级*/
z-index: 100;
}
#skin-photo ul {
background-color: #ffffff;
width: 640px;
height: 150px;
margin: 0 auto;
/*设置背景颜色为透明白色,最后一个0.5,背景颜色的透明程度*/
background-color: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
#skin-photo ul li {
margin-top: 15px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="skin"></div>
<div id="skin-photo">
<ul>
<li class="webp" >
<img src="1.webp" alt="" width="200">
</li>
<li class="webp">
<img src="2.webp" alt="" width="200">
</li>
<li class="webp">
<img src="3.webp" alt="" width="200">
</li>
</ul>
</div>
</body>
<script>
// 设置背景属性
//1.找到当前背景的div标签对象
var skin = document.getElementById('skin')
//2.找到点击切换的小图的全部
var webp = document.getElementsByClassName('webp')
// 3.对小图进行循环赋值点击事件
for (let i = 0; i < webp.length; i++) {
webp[i].onclick = function () {
// 4.当点击时获取当前标签下子标签img的src属性/剔除文本标签获取元素标签
webp[i].childNodes.forEach(( value, key, parent)=>{
if (value.nodeType === 1){
srcs = value.getAttribute('src')//获取src属性
skin.style.backgroundImage = `url(${srcs})` // 将点击的图片的src赋值给背景div,让背景跟着变化
}
})
}
}
</script>
</html>
全选与反选
input中的checkbox,怎么知道他已经选中了,通过checked=true 来判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#panel{
height: 100%;
width: 200px;
background-color: rgba(0,255,255,0.5);
padding: 0 15px;
border-radius: 3px;
}
.panel-title{
padding-top: 10px;
}
.panel-footer{
padding-bottom: 10px;
}
</style>
<body>
<div id="panel">
<div class="panel-title">
<h3>千千音乐盒</h3>
<hr>
</div>
<div class="panel-content">
<input type="checkbox"> 后来 <br>
<input type="checkbox"> 香水有毒 <br>
<input type="checkbox"> 垃圾有毒 <br>
<input type="checkbox"> 饭菜有毒 <br>
<input type="checkbox"> 粑粑有毒 <br>
</div>
<div class="panel-footer">
<hr>
<button id="allselect">全选</button>
<button id="cancelselect">取消选中</button>
<button id="reverseselect">反选</button>
</div>
</div>
</body>
<script>
//1.获取全部的复选框checkbox
var inputs = document.getElementsByTagName('input')
// 2.获取当前点击按钮对象
var allselect = document.getElementById('allselect')
var cancelselect = document.getElementById('cancelselect')
var reverseselect = document.getElementById('reverseselect')
// 3.对按钮设置点击事件
allselect.onclick = function (){
for (let i=0;i<inputs.length;i++){
if (! inputs[i].checked){ // 判断当前的checked 为false 全部改为true全部选中
inputs[i].checked = true
}
}
}
cancelselect.onclick = function (){
for (let i=0;i<inputs.length;i++){
if (inputs[i].checked){ // 判断当前的checked 为true 全部改为false全部取消选中
inputs[i].checked = false
}
}
}
reverseselect.onclick = function (){
//反选,true 变为false false变为true
for (let i=0;i<inputs.length;i++){
// 不用判断直接赋值当前 取反 的值就可以
inputs[i].checked = !inputs[i].checked //!inputs[i].checked取当前的反值
}
}
</script>
</html>
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#tip{
font-size: 12px;
color: darkcyan ;
}
</style>
<body>
<div id="box">
<label>你的成绩</label>
<input type="text" placeholder="请输入你的成绩" id="score">
<span id="tip">请输入你的成绩</span>
</div>
</body>
<script>
var score = document.getElementById('score') // 获取input框
var tip = document.getElementById('tip') // 获取提示对象
// 设置失去焦点事件
score.onblur = function (){
// 获取对应input输入的内容
val = parseFloat(score.value) // 转换为数值小数
// 验证内容
if (isNaN(val)){
tip.style.color = 'red'
tip.innerText = '输入的成绩不正确'
score.style.borderColor = 'red' // 给input设置边框红色
}else if(0 <= val && val <= 100){
tip.innerText = '输入的成绩正确'
}else {
console.log(val <= 100)
tip.style.color = 'red'
tip.innerText = '输入的成绩超出范围0-100之间'
score.style.borderColor = 'red'} // 给input设置边框红色
}
// 设置获取焦点恢复原来状态
score.onfocus = function () {
score.value = '' // input变为空
tip.innerText = '请输入你的成绩' // 提示信息恢复原来的内容
tip.style.color = 'darkcyan' // 字体设置为灰色
}
</script>
</html>
//利用了焦点事件和失去焦点事件进行的验证
图片上传验证
// 当上传错误时,提示错误，成功就是正确
// 利用onchange事件，当发生变化就会触发onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="">上传图片验证</label>
<input type="file" id="file">
</body>
<script>
// 上传的脚本分为 jpg png gif jeg
// 识别上传文件的后缀名进行校验
window.onload = function () {
// 1.获取图片的标签
var file = document.getElementById('file')
// 2.监听图片的变化
file.onchange = function () {
// 3.获取上传的图片路径
var path = file.value // C:\fakepath\0a25b16fad394245bbc503a56da69c9a.png
// 4.判断后缀是否正确
pathSuffix = path.split('.')[1].toLowerCase() // 截取后缀 转为小写
suffixList = ['jpg', 'png', 'gif', 'jeg']
if (pathSuffix === suffixList[0] && pathSuffix === suffixList[1] && pathSuffix === suffixList[2] && pathSuffix === suffixList[3]) {
alert('上传图片正确')
} else {
alert('上传图片错误')
}
}
}
</script>
</html>
// 还是正则表单式进行验证比较方便
刷新验证码按钮
<input type="button" value="获取验证码" class="btn" onclick="settime(this)">
var countdown=60; //初始值
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="获取验证码";
countdown = 60;
return false;
} else {
val.setAttribute("disabled", "disabled");
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() { //设置一个定时器，每秒刷新一次
settime(val);
},1000);
}
验证码刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#code {
height: 100px;
width: 100px;
text-align: center;
background-color: #cccccc;
line-height: 100px;
}
</style>
</head>
<body>
<div id="code"></div>
<button id="btnc" onclick="refreshCode()">刷新验证码</button>
<input type="text" id="newcode">
<button id="btncode">验证</button>
</body>
<script>
window.onload = function () {
createcode() // dom加载完毕后,调用生成初始化验证码
}
// 刷新按钮 60秒后进行刷新验证码操作
var btnc = document.getElementById('btnc')
var num = 60 //进行计时操作
function refreshCode() {
if (num === 60) { // 当计时器是60秒时才会对验证码进行刷新
createcode()
}
if (num === 0) {
// 当num = 0时 当前就可以再次点击进行刷新验证
btnc.innerHTML = '刷新验证码'
btnc.removeAttribute('disabled')
num = 60 // 将计时初始化为60秒
return false // 主要负责停止定时器 要不然会一直调用定时器
} else {
// 当num != 0时,当前的刷新按钮时不可以点击的,并且文本一直根据定时器进行显示
btnc.setAttribute('disabled', 'disabled')
btnc.innerHTML = `重新发送${num}` //在按钮上显示对应时间
num--
}
setTimeout(function () {
// 每一秒进行调用一下原函数,显示当前的时间是多少
refreshCode()
}, 1000)
}
// 随机生成1 - 100之间的数
function random(max, min) {
return Math.floor(Math.random() * (max - min) + min)
}
// 生成验证码
function createcode() {
// 设置长度
var code = '';
let codelength = 4
// 随机字母列表
let randomcode = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'z', 'x', 'c', 'v', 'b', 'n', 'm']
for (let i = 0; i < codelength; i++) { // 循环
index = random(0, randomcode.length - 1) //random生成索引
code += randomcode[index] // 根据索引获取当前随机字符中的元素
}
// 将至赋值到显示对象中code 对象中
var code_obj = document.getElementById('code')
code_obj.innerText = code
// 将随机验证码进行临时存储缓存中
sessionStorage.setItem('code', code)
}
// 校验验证码
// 1.获取input框中输入的文本对象获取
var newcode = document.getElementById('newcode')
// 2.进行验证按钮对象获取
var btncode = document.getElementById('btncode')
// 3.进行绑定事件
btncode.onclick = function () {
// 1.获取输入的input文本内容
val = newcode.value
// 2.获取存储临时缓存中的随机验证码
code = sessionStorage.getItem('code')
if (val === code) {
alert('验证成功')
// 验证成功操作
} else {
alert('验证失败')
// 清空input对象
newcode.value = ''
// 重新生成验证码
createcode()
}
}
</script>
</html>
1. 使用了onload事件在dom加载完成时调用了验证生成，显示初始化验证码
2. 使用了sessionStorage临时存储对象,存储验证和input输入框中的进行对比
3. 使用Math.random() 对象进行生成index索引，根据索引获取列表中的随机字符
4. 使用了setTimeout定时器，对点击刷新按钮60秒后刷新进行原函数调用,每1秒调用一下原函数,如果
count = 0,那么将按钮的文本 '变为刷新验证码' 如果 !=0 就对计数器count -1操作，在按钮上显示倒计时。当 count = 60时,需要调用一下生成一个新的验证码 因为count = 60说明开始了新的计时
评论发布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
#box {
width: 1000px;
border: 1px solid #cccccc;
margin: 100px auto;
padding: 20px;
}
#comment {
width: 800px;
padding: 10px 10px;
font-size: 20px;
outline: none;
}
.box-top {
margin-bottom: 30px;
}
#comment_content {
height: 300px;
width: 800px;
border: 1px solid #cccccc;
/*超出部分使用滚动条显示*/
overflow: scroll;
}
#comment_content li {
width: 500px;
color: red;
line-height: 45px;
}
#comment_content li a {
float: right;
}
</style>
<body>
<div id="box">
<div class="box-top">
<textarea id="comment" cols="60" rows="5" placeholder="请输入评论"></textarea>
<button id="btn">发布评论</button>
</div>
<h5>评论内容</h5>
<ul id="comment_content">
<!-- <li>1<a href="javascript:void(0)">删除</a></li>-->
</ul>
</div>
</body>
<script>
window.onload = function () {
//1.为发布评论按钮设置点击事件
var btn = document.getElementById('btn')
btn.onclick = function () {
// 获取评论内容
var comment = document.getElementById('comment')
val = comment.value
if (!val) {
// 没有填写内容
alert('请填写内容进行发布')
} else {
// 1.将内容插入到li标签中渲染到ul标签中
var newli = document.createElement('li')
newli.innerHTML = `${val}<a href="javascript:void(0)">删除</a>`
// 2. 获取ul标签对象将内容插入
var comment_content = document.getElementById('comment_content')
// comment_content.appendChild(newli) // 插入尾部
comment_content.insertBefore(newli,comment_content.children[0]) // 在上一条评论之前进行插入
// console.log(comment_content.children[0]) 获取当前子元素集合,以第0个元素进行插入
// 3.在将内容加载到ajax后端中
}
}
//2.删除 循环页面中的li标签
var delbtns = document.getElementsByTagName('a')
console.log(delbtns)
for (let i = 0; i < delbtns.length; i++) {
console.log(delbtns[i])
delbtns[i].onclick = function () {
// 根据当前的a标签的父级进行删除
delbtns[i].parentNode.remove()
// 在将删除内容加载到ajax后端中
}
}
}
</script>
</html>
// 进行了dom的创建插入,删除插入过程
// 先进行获取评论内容,在进行创建dom元素,插入到对应显示在当前评论的父级的dom下面(显示需要根据先进先显示的原则,新的永远在最前面)
// 删除为a添加点击事件,当点击时获取当前的a的父li标签,将li remove删除,页面就会删除
九宫格布局(浮动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
overflow: hidden;
}
#wrap .item {
width: 248px;
height: 360px;
font-size: 13px;
}
#wrap .item .title {
width: 248px;
height: 30px;
line-height: 30px;
overflow: hidden;
margin-bottom: 10px;
}
.imgcontainer {
width: 248px;
display: table-cell;
text-align: center;
}
.imgcontainer img {
height: 200px;
}
#wrap .item .price {
color: #ff6700;
font-weight: bold;
font-size: 18px;
}
</style>
<body>
<div>
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="wrap">
<div class="item">
<div class="imgcontainer">
<img src="1.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="2.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="3.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="3.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="2.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
</div>
<script>
// 1.获取按钮
var btns = document.getElementsByTagName('button')
var items = document.getElementsByClassName('item')
// 2.监听按钮设置事件
// 第一个按钮 3列显示
var itemw = 248 // 当前item的宽度248
btns[0].onclick = function () {
for (let i=0;i<items.length;i++){
items[i].style.float = 'left' //点击后进行浮动
// 因为要显示3列所以控制盒子的宽度
items[i].parentNode.style.width = (3*itemw) + 'px' // 控制盒子父级的宽度,影响盒子显示的列数
console.log(items[i].offsetWidth) // 动态获取每个 itme的盒子宽度
console.log(items[i].offsetHeight) // 动态获取每个 itme的高度
}
}
// 4列显示
btns[1].onclick = function () {
for (let i=0;i<items.length;i++){
items[i].style.float = 'left' //点击后进行浮动
// 因为要显示3列所以控制盒子的宽度
items[i].parentNode.style.width = (4*itemw) + 'px'
}
}
// 5 列显示
btns[2].onclick = function () {
for (let i=0;i<items.length;i++){
items[i].style.float = 'left' //点击后进行浮动
// 因为要显示3列所以控制盒子的宽度
items[i].parentNode.style.width = (5*itemw) + 'px'
}
}
</script>
</body>
</html>
offsetWidth 获取对象的宽度
offsetHeight 获取对象的高度
// 主要控制盒子的浮动，同时控制盒子父子的宽度,留够显示多少列的宽就可以实现
9宫格(子绝父相)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
position: relative;
}
#wrap .item {
width: 248px;
height: 360px;
font-size: 13px;
}
#wrap .item .title {
width: 248px;
height: 30px;
line-height: 30px;
overflow: hidden;
margin-bottom: 10px;
}
.imgcontainer {
width: 248px;
display: table-cell;
text-align: center;
}
.imgcontainer img {
height: 200px;
}
#wrap .item .price {
color: #ff6700;
font-weight: bold;
font-size: 18px;
}
</style>
<body>
<div>
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="wrap">
<div class="item">
<div class="imgcontainer">
<img src="1.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="2.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="3.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="3.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
<div class="item">
<div class="imgcontainer">
<img src="2.webp" alt="">
</div>
<p class="title">这件衣服买100元</p>
<p class="price">￥100</p>
</div>
</div>
<script>
// 1.获取按钮
var btns = document.getElementsByTagName('button')
var items = document.getElementsByClassName('item')
// 2.监听按钮设置事件
// 第一个按钮 3列显示
var itemw = 248 // 当前item的宽度248
var itemh = 360 // 当前item的宽度248
// 使用自绝父相进行定位,主要是找到当前的规律
btns[0].onclick = function () {
// 规律
// 0行 0列 top 0*h left0*w
// 0行 1列 top 0*h left1*w
// 0行 2列 top 0*h left2*w
// 1行 0列 top 1*h left0*w
// 1行 1列 top 1*h left1*w
// 1行 2列 top 1*h left2*w
for (let i = 0; i < items.length; i++) {
var row = parseInt(i/3)
var col = parseInt(i%3)
items[i].style.position = 'absolute' // 设置绝对定位
items[i].style.top = (row*itemw) + 'px'
items[i].style.left = (col*itemh) + 'px'
console.log(i%3)
}
}
// 4列显示
btns[1].onclick = function () {
for (let i = 0; i < items.length; i++) {
var row = parseInt(i/4)
var col = parseInt(i%4)
items[i].style.position = 'absolute' // 设置绝对定位
items[i].style.top = (row*itemw) + 'px'
items[i].style.left = (col*itemh) + 'px'
console.log(i%3)
}
}
// 5 列显示
btns[2].onclick = function () {
for (let i = 0; i < items.length; i++) {
var row = parseInt(i/5)
var col = parseInt(i%5)
items[i].style.position = 'absolute' // 设置绝对定位
items[i].style.top = (row*itemw) + 'px'
items[i].style.left = (col*itemh) + 'px'
console.log(i%3)
}
}
// 利用相对定位进行9宫格布局
</script>
</body>
</html>
// 使用定位实现9宫格 需要计算当前盒子的规律,列和行
日期实时显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="date">
<p id="nowdate"></p>
<p id="day">只显示当前的天</p>
</div>
</body>
<script>
// 获取标签
var nowdate = document.getElementById('nowdate')
var day = document.getElementById('day')
// 显示当前的时间函数
function date() {
var now = new Date()
var n = now.toLocaleTimeString() // 时分秒
var c = now.toLocaleDateString() // 年月日
var d = now.getDate()// 当月的第几天
day.innerText = d
nowdate.innerText = c +' ' + n
setTimeout(function () { // 利用定时器每一秒调用一下当前的date函数,将时间赋值给标签
date()
},1000)
}
date() // 初始化调用
// 也可以是使用 setInterval() 进行定时调用周期时的定时器
// setTimeout() 延迟定时器
</script>
</html>
主要利用定时器,每一秒或者小于1秒进行调用函数，将日期赋值给标签
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="start">开启定时器</button>
<button id="stop">结束定时器</button>
</body>
<script>
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var num=0,timer=null;
/// timer 就是当前定时器的返回值，这个返回值可以关闭定时器
start.onclick = function () {
clearInterval(timer) // 在使用定时器时，先关闭之前的定时器防止定时器累加
timer = setInterval(function () {
num++
console.log(num)
},1000)
console.log(timer)
}
stop.onclick = function () {
clearInterval(timer) // 根据定时器的返回值 对当前定时器关闭
}
// 定时会出现累加,在开启定时先要清除定时器，在开启定时器,防止用户点击多次定时器，导致定时器累加
</script>
</html>
transform: translate(水平方向px,垂直方向px); //位移
transform:rotate(intdeg); // 元素旋转 10deg 就是旋转10度
transform:scale(1.0) // 元素的缩放比例 1.0表示没有变化 2.0当前的两倍
transform:skew(10deg); // 元素倾斜 10deg 元素倾斜10度变为等边正方形
时钟案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#clock {
width: 845px;
height: 799px;
background-image: url("背景图.png");
position: relative;
}
#hour, #minute, #second {
position: absolute;
width: 30px;
height: 600px;
left: 50%;
top: 0;
margin-left: -15px;
}
#hour {
background: url("s.png") no-repeat center center;
}
#minute {
background: url("f.png") no-repeat center center;
}
#second {
background: url("m.jpg") no-repeat center center;
}
</style>
<body>
<div id="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<script>
var hour = document.getElementById('hour')
var minute = document.getElementById('minute')
var second = document.getElementById('second')
// 开启定时器 获取当前时间
setInterval(function () {
var now = new Date() // 获取当前的时间对象
// 获取小时分钟秒
var s = now.getSeconds() // 秒
var m = now.getMinutes() + s / 60 // 分钟
var h = now.getHours() % 12 + m / 60
second.style.transform = `rotate(${s*6}deg)`
minute.style.transform = `rotate(${m*6}deg)`
hour.style.transform = `rotate(${h*30}deg)`
}, 1000)
</script>
</body>
</html>
// 使用到了teansform 进行角度调整
// 最重要的是对时间的计算 角度的计算分钟角度 时针角度 秒针角度的计算
长图滚动行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body{
background-color: #ff6700;
}
#boxs {
height: 400px;
width: 750px;
border: 1px solid #ff6700;
/*超出的高度进行隐藏*/
overflow: hidden;
/* 设置相对定位*/
position: relative;
margin: 0 auto;
}
#boxs img {
position: absolute;
top: 0;
left: 0;
}
#boxs span {
position: absolute;
width:100%;
/*两个span标签宽度一样 高度各站一半*/
height: 50%;
left: 0;
/*鼠标小手效果*/
cursor: pointer;
}
#boxs #top {
top: 0;
}
#boxs #bottom {
bottom: 0;
}
</style>
<body>
<div id="boxs">
<!-- 750 5325 -->
<img src="1.png" alt="">
<!-- 这两个标签主要作用,就是鼠标悬浮在上方区域和下方区域 图片移动的效果-->
<span id="top">10</span>
<span id="bottom">12</span>
</div>
</body>
<script>
var boxs = document.getElementById('boxs')
var imgs = document.getElementsByTagName('img')[0]
var divtop = document.getElementById('top')
var divbottom = document.getElementById('bottom')
// 鼠标悬浮时的操作
var num = 0 // 初始化滚动的值
var timer = null
divtop.onmouseover = function () {
clearInterval(timer) //每一次悬浮删除上一个定时器防止定时器重复
// 让图片往上移动 top值就会变为负值 另外需要控制定时的如果超度高度需要进行停止
timer = setInterval(function () {
num -= 10
// 负数对比时 -1 大于 -2 数值越小数越大
if (num >= -4975) { // 当先滚动的长度一定要小于显示的长度 盒子的高度400,那么当前图片长度为5325(因为需要在盒子的高度范围内显示就需要-400盒子的高度)
imgs.style.top = num + 'px'
}else {
clearInterval(timer) // 当滚动的初始值大于当前图片高度-盒子高度时 删除定时器停止
}
}, 150)
}
// 图片上移动
divbottom.onmouseover = function () {
console.log(1)
clearInterval(timer) //每一次悬浮删除上一个定时器防止定时器重复
// 让图片往上移动 top值就会变为负值 另外需要控制定时的如果超度高度需要进行停止
timer = setInterval(function () {
num += 10
// 负数对比时 -1 大于 -2 数值越小数越大
if (num <= 0) { // 当先滚动的长度一定要小于显示的长度 盒子的高度400,那么当前图片长度为5325(因为需要在盒子的高度范围内显示就需要-400盒子的高度)
imgs.style.top = num + 'px'
}else {
clearInterval(timer) // 当滚动的初始值大于当前图片高度-盒子高度时 删除定时器停止
}
}, 150)
}
// 当鼠标离开当前父级标签范围图片移动
boxs.onmouseout = function () {
clearInterval(timer)
}
</script>
</html>
//主要使用了定位,改变图片的top值进行移动
// 使用了鼠标悬浮离开事件 进行对图片的移动
tab图卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
/*外层盒子*/
.tab {
width: 800px;
height: 300px;
margin: 100px auto;
}
.tab .tab-title {
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
}
/*使用padding 进行将内容 挤的居中*/
.tab .tab-title li {
display: inline-block;
font-size: 14px;
padding: 10px 25px;
}
/* 图卡悬浮字体变红*/
.tab .tab-title li:hover {
cursor: pointer;
}
/* 图卡选中的点击后样式*/
.current {
background-color: red;
color: #fff;
cursor: default;
}
/*对tab图卡的内容进行隐藏*/
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<!-- title部分-->
<ul class="tab-title">
<li class="current">商品介绍</li>
<li class="">规格包装</li>
<li class="">售后保障</li>
<li class="">商品评价</li>
</ul>
<!-- 内容部分每个title对应一个tab-content-->
<ul class="tab-content">
<li>商品详情...</li>
<li class="hide">规格详情...</li>
<li class="hide">售后详情...</li>
<li class="hide">评价详情...</li>
</ul>
</div>
<script>
<!-- 1.获取当前全部tab的li标签-->
//当点击对应的tab时，对应的标签会有样式，并且显示当前的对应的详情
var lis = document.querySelectorAll('.tab-title li')
// 获取当前tab对应的详情内容列表(根据当前的循环,索引对应索引进行隐藏和显示)
var contents = document.querySelectorAll('.tab-content li')
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// 0.优先剔除样式,当点击时不让任何的tab拥有样式
for (let j = 0; j < lis.length; j++) {
lis[j].classList.remove('current')
// 同时让全部的tab对应的详情内容全部隐藏
contents[j].classList.add('hide')
}
// 1.当样式情况,那么当前的点击的tab拥有了样式
lis[i].classList.add('current')
// 在让当前的点击的标签的索引从详情列表中根据索引清除掉隐藏属性
contents[i].classList.remove('hide')
}
}
</script>
</body>
</html>
思路
// tab 样式先清除 tab详情内容先隐藏
// 根据点击的的tab对当前点击的标签进行设置样式,在根据循环的索引从详情的标签中获取对应的对象,在将改对象的hide属性清除
视频循环展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.main{
height: 200px;
width: 100%;
}
.video{
width: 1200px;
width: 100%;
margin: 0 auto;
background-color: black;
}
video{
width: 100%;
height: 100%;
pointer-events: none;
}
</style>
<body>
<div class="main">
<div class="video">
<video controls loop='true' muted="true" src="weibo_login.mp4" autoplay="true"></video>
</div>
</div>
</body>
</html>
实现的效果就和微博上的首页的地球一样
图片预览
// 点击 label 标签就会相当于点击了 input 上传文件
<label for="file">
<img id="img" src="/static/img/网格图.png" alt="" width="140px" height="90px">
</label>
<input type="file" name="photo" id="file" style="display:none" onchange="picture()">
// 将用户上传的本地图片文件替换到 img 标签的 src 属性
function picture() {
file = document.getElementById(file).files[0] // 选中当前用户选中的图片本地对象
reader = new FileReader() // 获取当前的本地url
reader.readAsDataURL(file) // 获取本地地址的url
reader.onload = function () { //onload 是在标签加载之后执行
document.getElementById(`img`).setAttribute('src', reader.result) //将获取的url进行替换
}
}
