自己做的网站出现左右滑动条,做wish选品网站 数据网站,做家具有那个网站,seo优化在线轮播图随机版
需求#xff1a;当我们刷新页面#xff0c;页面中的轮播图会显示不同图片以及样式
分析#xff1a;①#xff1a;准备一个数组对象#xff0c;里面包含详细信息#xff08;素材包含#xff09;
②#xff1a;随机选择一个数字#xff0c;选出数组对应…轮播图随机版
需求当我们刷新页面页面中的轮播图会显示不同图片以及样式
分析①准备一个数组对象里面包含详细信息素材包含
②随机选择一个数字选出数组对应的对象更换图片底部盒子背景颜色以及文字内容
③利用这个随机数字让小圆点添加高亮的类addClass利用css结构伪类选择器
CSS部分不予显示
script
//1初始数据
const sliderData[
{url:./imagesslider02.jpgtitle:开启剑与雪的黑暗传说colorrgb43,35,26},
{url:./imagesslider03.jpgtitle:真正的jo厨出现了colorrgb36,31,33},
{url:./imagesslider05.jpgtitle:快来分享你的寒假日常吧colorrgb67,90,92},
{url:./imagesslider06.jpgtitle:哔哩哔哩小年YEAHcolorrgb166 131,143}
{url:./imagesslider07.jpgtitle:一站式解决你的电脑配置问题color:rgb53,29,25},
{ur1:./imagesslider08.jpgtitle:谁不想和小猫咪贴贴呢,colorrgb(99,72,114)},
]
//1.需要一个随机数
const random parseInt(Math.random()*sliderData.length)
//console.Log(sliderDatarandom
//2把对应的数据染到标签里面
//2.1获取图片const imgdocument.querySelector(.slider-wrapper img
//2.2修改图片路径对象.urL
img.src sliderData[random].url
// 3.把p里面的文字内容更换
// 3.1获取p
const p document.querySelector(.slider-footer p)
// 3.2修改p
p.innerHTML sliderData[random].title
// 4.修改背景颜色
const footer document.querySelector(.slider-footer)
footer.style.backgroundcolor slideerData[random].color//行内样式表是高于内部样式表所以可以后来更改来覆盖以前的style
// 5.小圆点
const li document.querySelector(.slider-indicator linth-child(${random 1}))
//让当前这个小It添加active这个类
li.classList.add(active)
/script
/body获取设置表单的值
表单很多情况也需要修改属性比如点击眼睛可以看到密码本质是把表单类型变为文本框正常的有属性有取值的跟其他的标签属性没有任何区别
获取DOM对象属性名 设置DOM对象.属性名新值
表单.value用户名
表单.type password
复选框
表单属性中添加就有效果移除就没有效果一律使用布尔值表示如果为true代表添加了该属性如果是false代表移 除了该属性 比如disabled、checked、selected
body
input typecheckbox name id checked
buttom disabled点击/buttom//这样就禁止使用了
script
//1获取元素
// const uname document.querySeLeetor(^nputr)
//2.获取值获取衰单里面的值用的value
// console. Log(uname.vaLue)//电脑
// consote. Log(uname.innerHTML ) innertHTML 得不到表单的内察
// 3.设置表单的值
// uname.vaLue 我要买电脑
// console.Log(uname.type)
// uname.type password//1获取
const ipt document.querySelector(input)
// consoLe. Log(ipt.checked) // faLse 只接受布尔值
ipt.checked true
// ipt. checked true //会选中,不提倡 有隐式转换
//获取
const button document.querySelector(button)
// consoLe. Log(buttor).disabLed) // 默认false 不禁用
button.disabled true // 禁用按钮 /script
/body
自定义属性
标准属性标签天生自带的属性比如class id title等可以直接使用点语法操作比如disabled, checked.selected •自定义属性 在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头 在DOM对象上一律以dataset对象方式获取
body
div data-id1 data-spm不知道1/div
div data-id22/div
div data-id33/div
div data-id44/div
div data-id55/div
script
const one document.querySelector(div)
console.log(one.dataset)//这时右侧显示:DOMStringMap{id:1,spm:不知道;}id:1,spm:不知道;
console.log(one.dataset.id)//1
console.log(one.dataset.spm)//不知道
/script
/body
定时器间歇函数
网页的倒计时
setInterval(函数,间隔时间)
//每隔一段时间调用函数
//间隔单位是ms
script
//setInterval(函数,间隔时间)
setInterval(function (
console.log(一秒执行一次)
},1000)
function fn() {
console.log(一秒执行一次)
}
// setInterval(函数名,间隔时间) 函数名不要加小括号
let n setlnterval(fn, 1000)
// setIntervaL(fn(), 1000)
console.log(n)
//关闭定时器 定时器返回的是一个id数值
clearInterval(n)Let m setlntervaL (function () {consoLe.Log(ll)}, 2000)consoLe.Log(m)// const num 10
// num 10
// consoLe.Log(num)
/script
阅读注册 协议
body
textarea name, id cols30 rows10
用户注册协议
欢迎注册成为京东用户在您注册过程中您需要完成我们的注册流程并通:
【请您注慧】如果您不同意以下仍议全部或任何条款约定请您停止注册
/textarea
br
button classbtn disabled〉我己经阅读用户协议(5)/button
script
// 1.获取元素
const btn document.querySelector(.btn)
// consoLe. Log(btn. innerHTML) butto按钮特殊用trmerHTML
// 2.倒计时
let i 5
// 2.1开启定时器
let n setInterval(function () {
i--
btn. innerHTML 我己经阅读用户协议(${i})
if (i 0) {
clearInterval(n) // 关闭定时器
//\定时器停了,我就可以开按钮
btn.disabled false
btn.innerHTML 同意
}
}, 1000)
/script
轮播图定时版
div class slider
div classslider-wrapper
img src“・/images/slider0l.jpg” alt /
/div
div classslider-footer
〈p对人类来说会不会太超前了 /p
ul classslider-indicator
li classactive/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
/ul
div classtoggle
button classprevlt;/button
button classnextgt;/button
/div
/div
/div//
style
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}//
.slider-footer {
height: 80px;
background-color:rgb(100J 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background:rgba(255, 255, 255, 0.1)
color: #fff;//
border-radius: 4px;
cursor: pointer;
}
.slider-footer.toggle button:hover {
background:rgba(255, 255, 255, 0.2);
}//
.slider-footer p {
margin: 0;
color:#fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}//
slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background:・#fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
/style
script
//1.初始数据
const sliderData[
{url:./imagesslider02.jpgtitle:开启剑与雪的黑暗传说colorrgb43,35,26},
{url:./imagesslider03.jpgtitle:真正的jo厨出现了colorrgb36,31,33},
{url:./imagesslider05.jpgtitle:快来分享你的寒假日常吧colorrgb67,90,92},
{url:./imagesslider06.jpgtitle:哔哩哔哩小年YEAHcolorrgb166 131,143}
{url:./imagesslider07.jpgtitle:一站式解决你的电脑配置问题color:rgb53,29,25},
{ur1:./imagesslider08.jpgtitle:谁不想和小猫咪贴贴呢,colorrgb(99,72,114)},
]
//1.获取元素
const img document-querySelector(.slider-wrapper img)
const p document.querySelector(.slider-footer p)
let i 0
//2.开启定时器set Interval(function () {i
if(isliderData.length){i0}
// console.log(sliderData[i])
//更换图片路泾
img.src sliderData[i].url
//把字写到p里面
p.innerHTML sliderData[i].title
//小圆点
//先除掉以前的active
document.querySelector(.slider-indicator.active]
//只让li添active
document.querySelector(.slider-indicator li:nth-child(${i1})).classList.add(active)
}, 1000)*/
/script
