first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,29 @@
<!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>状态切换和颜色随机</title>
</head>
<body>
<button>哈喽,点我有惊喜</button>
<div style="display: none;" class="text">嘻嘻,想不到吧</div>
</body>
<script>
var button = document .querySelector("button")
var text = document .querySelector(".text")
console.log(button);
button.onclick = function(){
// console.log('123');打印尝试绑定点击事件是否成功
if(text.style.display == "block"){
text.style.display = "none"
}else{
text.style.display = "block"
// 以上三行,实现点击文本显示和隐藏的相互切换
text.style.color = `hsl(${Math.random()*360},100%,50%)`
// 实现文本显示时,文本颜色随机切换
}
}
</script>
</html>

View File

@@ -0,0 +1,97 @@
<!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>
<style>
.title {
display: flex;
list-style: none;
}
.title .active {
color: red;
}
.title li {
margin-right: 30px;
}
.content {
display: flex;
list-style: none;
}
.content .active {
display: block;
}
.content li {
margin-right: 30px;
display: none;
}
</style>
</head>
<body>
<ul class="title">
<li class="">推荐</li>
<li>电视剧</li>
<li>电影</li>
<li>综艺</li>
</ul>
<ul class="content">
<li class="">推荐内容</li>
<li>电视剧内容</li>
<li>电影内容</li>
<li>综艺内容</li>
</ul>
</body>
<script>
function $(className) {
return document.querySelectorAll(className)
}
var title_li = $('.title li')
var content_li = $('.content li')
// console.log(title_li);能打印出来所以获取节点成功
title_li.forEach(function (item, index) {
// console.log('内容',item, index);title_li里li标签的内容和下标都打印出来,所以获取节点成功
// 绑定点击事件
item.onclick = function () {
// console.log('e',e.target.className);
// 判断数组里面被点击的值是否具有激活态,如果有则去除该值和其包含的内容的激活态
if(item.className == 'active'){
item.className = ''
content_li[index].className = ''
}
// 除此之外,给点击的没有的加上激活态,方法采取以下内容
else{
// 先清楚所有值的激活态
title_li.forEach(function (A, a) {
// A已经就是title_li里面具体的值了
A.className = ''
// 数组+下标可以取到数组里面具体的值,然后content_li是一个数组;
// 所以要想清楚里面li标签的类名,需要具体到某一个上值上,
// 加之title_li和content_li的下标是一致的,所以可以直接+[a]
content_li[a].className = ''
})
// 再给具体被点击到的值加上激活态
item.className = 'active'
content_li[index].className = 'active'
}
// 同上,是加上激活态
}
})
</script>
</html>

View File

@@ -0,0 +1,66 @@
<!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>头部滚动固定</title>
<style>
body{
height: 1000px;
}
.header {
width: 100%;
height: 50px;
margin-top: 120px;
background: red;
}
/* 首先,顶部滑动到一定条件距离,会出现固定的状态。
因此,给这个状态添加一个类名;并通过js动态的在达成条件后加入此状态。 */
.position{
width: 100%;
position: fixed;
left: 0;
top: 0;
/* 顶部距离会受margin-top的影响,因此也要为0 */
margin-top: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
<!-- 首先判断,所谓的顶部header在父元素body上,实际上是没有变动的,变动的距离是父元素body到顶部的距离
因此变动的实际上是父元素。
思路:我们可以先获取body和header这个元素,然后通过判定body的scrollTop(滚动条的垂直位置,向下滑动值随之增大);
当scrollTop>margin-top120时,header和vh小于等于0,因此实现固定,否则就还是原有的header状态。 -->
<script>
function $(className){
return document.querySelector(className)
}
// 实际上,直接 $('.header') $('body')这样,就已经可以获取节点了
// 下面这样是为了简写和方便一点
// 1: 获取节点并赋值
var header = $('.header')
var body = $('body')
// 2: 绑定事件和处理函数
body.onscroll = function(){
// console.log(11);滚动显示11说明事件绑定成功
// document.documentElement.scrollTop包含整个html,我们所能看到的距离顶部的距离
if (document.documentElement.scrollTop >= 120){
// header position实际上就类似于公共css里面的类名直接追加到html上的书写方式
header.className = "header position"
}else{
header.className = "header"
}
}
</script>
</html>

View File

@@ -0,0 +1,100 @@
<!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>
<style>
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入搜索关键字">
<!-- 空一个ul用来将空数组里存储的匹配值放到html上显示给用户选择 -->
<ul>
</ul>
</div>
</body>
<script>
// 这是推荐词组具体包含内容
var words = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好,是阴天', '不喜欢学习'];
function $(className) {
return document.querySelector(className)
}
var input = $('input')
// console.log(input);能打印出来,所以获取节点成功
var ul = $('ul')
// 绑定事件:oninput用户输入事件
input.oninput = function () {
// console.log(input);能打印出来,绑定事件成功
var pipei = []
// 定义一个空数组来存储我输入内容能匹配上推荐词组里面相关的具体值
// 输入时触发,所以首先用if判断input里面有无输入值(由input.value获取具体文本值),有则执行下一个内容
// 用输入值的长度是否为0判断,有无输入值
if (input.value.length != 0) {
// console.log(input.value);能获取input里面具体输入的文本值,所以属性选择成功
// 有值则判断该值是否为定义词组所包含的值,因为定义词组是一个数组,所以需要循环比较数组里的每一项是否包含该值
words.forEach((value, index) => {
// console.log(value,index)//当输入时能获取定义词组里的每一项值,所以循环成功
// 拓展:indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置(即下标)。如果没有找到匹配的字符串则返回 -1。
// if判断是否为数组含有内容,用父 indexof 子 返回值判断,>-1则包含,
// 然后将数组符合值取出,追加到新数组里进行后续使用
if (value.indexOf(input.value) > -1) {
// 定义一个span标签放入用户输入的值,值的颜色变红
var span = `<span style="color: red;">${input.value}</span>`
// 拓展:直接使用“str.replace("需要替换的字符串","新字符串")”来替换;
// 定义一个li标签,便于将词组里面的每一项放入html上,供用户选择
// 然后在li标签定义词组里面,将用户输入的值替换标红的span标签
var li = `<li> ${ value.replace(input.value, span) } </li>`
// 完成以后,将数组符合值取出,追加到新数组里进行后续使用
pipei.push(li)
// var span = `<span style="color: red;">${ $("input").value }</span>`
// searchList.push(v.replace($("input").value, span))
}
})
// console.log(pipei);新组装数组打印成功,数组导入成功
}
// 清楚是为了删除上一次得到的结果。
// 例:在不加的情况下,我输入1,得到的结果是1的结果,然后我追加一个2,得到的结果是12.
// 以上总共得到的结果是1和12的结果。
// 然而应该得到的是当前输入的结果匹配的集合,即只需要给我12的结果就可以了。
// 空数组理由同上
ul.innerHTML = ''
// 具体着手操作,将ul、li添加到html
// 考虑到li的数量没办法确定,所以用循环来判断和控制li的数量
if (pipei.length > 0) {
pipei.forEach((item, ind) => {
ul.innerHTML += item
})
}
}
</script>
</html>

View File

@@ -0,0 +1,104 @@
<!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>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 152px;
border-radius: 6px;
box-shadow: 2px 2px 9px #d7d7d7;
display: none;
position: fixed;
}
li {
height: 40px;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
}
</style>
</head>
<body>
<ul>
<li>新建文件夹</li>
<li>上传文件</li>
<li>上传文件夹</li>
<li>刷新网页</li>
</ul>
</body>
<!-- 1 获取事件; 2 绑定事件; 3 事件处理函数。
(阻止默认事件:e.preventDefault();) (阻止事件冒泡(子元素冒泡):e.stopPropagation())
该事件:首先,阻止网页默认的右键菜单,并将自制菜单固定并隐藏在网页上;
其次,(e)监听鼠标的点击位置(x轴和y轴),通过判断右击菜单和vh、vw的距离来动态调整右击菜单。
甲方需求:自制一个右击菜单,然后通过获取鼠标点击的位置,给网页动态的加上右击菜单。 -->
<script>
// 返回值
function $(className) {
return document.querySelector(className)
}
// 返回数组
function _(className) {
return document.querySelectorAll(className)
}
var body = $('body')
var ul = $('ul')
// console.log(1);
// 判断给谁绑定事件:菜单在用户可视范围区域都能打开,所以不可能是给ul绑定,vh+vw=body。因此,是给body绑定右击菜单事件
// .oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
body.oncontextmenu = function(e){
e.preventDefault();
var { x , y } = e
// console.log("x , y",x,y);
var { clientWidth , clientHeight } = document.body
// console.log('1,2',clientWidth , clientHeight);
// 判断:首先判断菜单会出现的情况,xy轴都不够即在屏幕角落,然后是x或者y单方面不够等三个特殊情况以及正常情况。
// 菜单长宽160,152;右边框:clientWidth-x<菜单宽度152,就放左边——怎么放:x-152其他同理
if(clientWidth - x < 152 && clientHeight - y < 160){
ul.style =
`left:${x-152}px;
top:${y - 160}px;
display:block`
}else if(clientWidth - x < 152){
ul.style =
`left:${x-152}px;
top:${y}px;
display:block`
}else if(clientHeight - y < 160){
ul.style =
`left:${x}px;
top:${y - 160}px;
display:block`
}else{
ul.style =
`left:${x}px;
top:${y}px;
display:block`
}
}
</script>
</html>

View File

@@ -0,0 +1,142 @@
<!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>
<style>
body {
height: 100vh;
}
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
span {
position: fixed;
}
</style>
</head>
<body>
<!-- 1 获取事件; 2 绑定事件; 3 事件处理函数。
该事件:首先:是词组的每一项在鼠标点击以后能出现在屏幕:
{1、定义词组;2、获取鼠标的x、y值,为其绑定点击事件;3、用js创建span标签用来存储定义词组里面的每一项;
4、span标签出现的xy轴位置是根据鼠标决定的,所以将获取的鼠标xy值给span标签,并在html显示; }
其次:设置动画。
甲方需求:通过鼠标点击屏幕按顺序循环出现定义词组里的每一项,并且每一项都会动态的向上运动一段距离以后消失不见 -->
</body>
<script>
// 返回值
function $(className) {
return document.querySelector(className)
}
// 返回数组
function _(className) {
return document.querySelectorAll(className)
}
var body = $('body')
var words = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善'];
var index = 0
body.onclick = function (e) {
var {
x,
y
} = e
// console.log('1,2',x,y);
var span = document.createElement("span");
span.innerText = words[index]
console.log(span);
index += 1
if (index > 11) {
index = 0
}
span.style = `
left: ${x}px;
top: ${y}px;
`;
body.appendChild(span)
var tops = span.style.top.split('px')[0] //点击的起始位置(split字符串分割)
// 开始思考怎么做动画
//元素上移过渡动画
// function moves(){
// // console.log('span',span.style.top.split('p'));
// var tops = span.style.top.split('px')[0] //点击的起始位置(split字符串分割)
// //分步处理到目标位置
// function toTop(){
// // debugger
// var now = Number(span.style.top.split('px')[0]) //当前位置
// if(now > tops-60){
// setTimeout(()=>{
// span.style.top = `${now - 1}px`
// toTop()
// },10)
// }else{
// body.removeChild(span)
// }
// }
// toTop()
// }
// function moves() {
// var now = Number(span.style.top.split('px')[0]) //当前位置
// if (now > tops - 60) {
// setTimeout(() => {
// span.style.top = `${now - 1}px`
// moves()
// }, 5)
// } else {
// setTimeout(function(){
// body.removeChild(span)
// },100)
// }
// }
var moveId = null;//用于保存 重绘动画 id 在取消动画时需要使用
function moves() {
var now = Number(span.style.top.split('px')[0]) //当前位置
if (now > tops - 60) {
span.style.top = `${now - 1}px`
// moves()
moveId = window.requestAnimationFrame(moves)//动画+(具体怎么处理)
} else {
window.cancelAnimationFrame(moveId)
setTimeout(function(){
body.removeChild(span)
},100)
}
}
moves()
}
</script>
</html>
<!-- 转化为number
'12px'.split('px')
(2) ['12', '']0: "12"1: ""length: 2[[Prototype]]: Array(0)
'12px'.split('px')[0]
'12'
Number('12px'.split('px')[0])
12
Number('12')
12 -->

View File

@@ -0,0 +1,57 @@
<!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>
<body>
<input type="text" placeholder="请输入文本">
<ul></ul>
</body>
<script>
// 1 获取事件; 2 绑定事件; 3 事件处理函数。
// 该事件:首先要获取用户输入的文本,需要先判断有无文本,有文本才能进行获取;
// 其次,文本获取后,要判断默认词组里是否有某一项与之匹配,随后将符合条件的词条统一放入html上;
// 甲方需求:将词库里和用户输入匹配上的关键词标红。
var words = ['今天天气真好', 'html学习', '不喜欢html', '热爱学习', '天气不好,是阴天', '不喜欢学习'];
// 1 获取事件
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
var input = $('input')
var ul = $('ul')
// console.log(1);
// 2 绑定事件
input.oninput = function () {
// console.log(2);
var pipei = []
if (input.value.length > 0) {
words.forEach((value, index) => {
if (value.indexOf(input.value) > -1) {
// console.log("返回3",value, index);
var span = `<span style="color: red;">${input.value}</span>`
var li = `<li> ${ value.replace(input.value, span) } </li>`
pipei.push(li)
}
})
}
ul.innerHTML = ''
if (pipei.length > 0) {
pipei.forEach((item, ind) => {
ul.innerHTML += item
})
}
}
</script>
</html>

View File

@@ -0,0 +1,196 @@
<!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>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
img {
width: 80px;
height: 96px;
position: fixed;
top: -96px;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #0000008c;
z-index: 9999;
display: none;
}
.center {
width: 40%;
background: #fff;
padding: 15px 10px;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.title {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ebe9e9;
}
.content {
padding: 20px 0;
text-align: center;
}
.footer {
display: flex;
justify-content: flex-end;
}
.footer .ok {
padding: 3px 15px;
background: #2a6bf4;
color: #fff;
font-size: 13px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="dialog">
<div class="center">
<div class="title">提示</div>
<div class="content"></div>
<div class="footer">
<div class="ok">确定</div>
</div>
</div>
</div>
<!-- 1 获取事件; 2 绑定事件; 3 事件处理函数。
该事件:首先:红包随机出现在屏幕上:
1、获取屏幕的长宽,用来计算红包出现的位置;2、创建红包,引入红包图片,并给它设置在x轴上随机出现Math.random();
3、给红包绑定点击事件,并限制3次点击次数;3、点击确定红包消失;4、红包展现在html上;
其次:设置动画:1、红包从屏幕顶部上方随机生成,之后开始下落,完全下降到底部以后消失;
最后:打开并去除红包:1、红包被点击以后被打开;2、规定中奖几率和次数;3、点击确定按钮以后,关闭红包;4、红包随即消失;
甲方需求:屏幕上随机生成红包雨,用户可点击,点击时红包雨暂停,确定后该红包消失,红包雨继续。要规定中奖机率和抽奖次数 -->
</body>
<script>
//返回值
function $(className) {
return document.querySelector(className)
}
// 返回数组
function _(className) {
return document.querySelectorAll(className)
}
var dialog = $('.dialog')
var center = $('.center')
var content = $('.content')
var ok = $('.ok')
var body = $('body')
var {clientWidth,clientHeight} = document.body;
var click = 0
// 红包相关属性创建
function HB() {
var img = document.createElement("img");
var x = Math.random() * (clientWidth - 80)
img.src = "../hb.png";
img.style.left = `${x}px`;
img.style.top = '-96px'
img.onclick = function () {
clickImg = img
click += 1
//清除红包向下滚动定时器
_('img').forEach((value, index) => {
clearTimeout(value.time)
})
//清除创建红包定时器
clearInterval(createdNumber)
if (click > 3) {
content.innerText = "三次抽奖已经用完"
dialog.style.display = "block"
} else {
rate()
dialog.style.display = "block"
}
}
body.appendChild(img)
move(img)
}
// 定义中奖几率
function rate() {
var num = Math.random();
if (num > 0 && num <= 0.5) {
content.innerText = "恭喜您中了九折"
} else if (num > 0.5 && num <= 0.9) {
content.innerText = "恭喜您中了八折"
} else {
"恭喜您中了五折"
}
}
// 红包定时生成
createdNumber = setInterval(() => {
HB()
}, 1000)
// 红包运动
function move(tag) {
var now = Number(tag.style.top.split('px')[0])
if (now <= clientHeight) {
tag.time = setTimeout(() => {
tag.style.top = `${now + 3}px`
move(tag)
}, 15)
} else {
body.removeChild(tag)
}
}
// 红包关闭
ok.onclick = function (){
dialog.style.display = "none"
body.removeChild(clickImg)
//重新设置 创建红包定时器
createdNumber = setInterval(() => {
HB()
}, 1000)
//重新设置页面红包向下滚动
_('img').forEach((value, index) => {
value.time = setTimeout(() => {
move(value)
}, 15)
})
}
</script>
</html>

View File

@@ -0,0 +1,174 @@
<!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>
<style>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 10px;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block;
}
</style>
</head>
<body>
<ul class="title"></ul>
<ul class="content"></ul>
</body>
<!-- 1 获取事件; 2 绑定事件; 3 事件处理函数。
思路:首先words里面的每一项都不是固定的,所以要考虑通过循环去加入到html中;
该事件:标题的内容: 首先,通过循环words得到里面的对象和下标,设置相关属性后,把它放到html上;
内容的内容: 同上 激活态还是通过下标实现同步-->
<script>
// 后端数据:
var words = [{
title: '首页',
content: [{
text: '首页的内容1'
},
{
text: '首页的内容2'
},
{
text: '首页的内容3'
},
{
text: '首页的内容4'
},
{
text: '首页的内容5'
},
]
},
{
title: '社会',
content: [{
text: '社会 的内容1'
},
{
text: '社会 的内容2'
},
{
text: '社会 的内容3'
},
]
},
{
title: '军事',
content: [{
text: '军事 的内容1'
},
{
text: '军事 的内容2'
},
{
text: '军事 的内容3'
},
]
},
{
title: '科技',
content: [{
text: '科技 的内容1'
},
{
text: '科技 的内容2'
},
{
text: '科技 的内容3'
},
]
}
]
//返回值
function $(className) {
return document.querySelector(className)
}
// 返回数组
function _(className) {
return document.querySelectorAll(className)
}
var title = $('.title')
var content = $('.content')
contentAll()
function titleAll() {
// 循环添加title的内容,并且判断title的class是否需要添加激活态
words.forEach((value, index) => {
title.innerHTML += `<li class="${index == 0 ? 'active':''}">${value.title}</li>`
})
// console.log(words);
var titleli = _(".title li")
var contentli = _(".content li")
// title里面的的内容也不确定,所以进行循环,并给里面的每一个对象绑定点击事件,然后同旧版样式,先清除再添加激活态
titleli.forEach((v, i) => {
v.onclick = function () {
titleli.forEach((valueli, index) => {
valueli.className = ''
contentli[index].className = ''
})
v.className = 'active'
contentli[i].className = 'active'
}
})
}
// 然后开始考虑如何插入li标签里的具体内容,同样不确定,用循环
function contentAll() {
// 同上,循环词组插入content的li标签,然后再li标签里面再循环插入li标签里面的具体文本
words.forEach((value, index) => {
content.innerHTML += `<li class="${index == 0 ? 'active':''}">${
// 这里将进行array.map(function(当前值, 下标))
// toString() 方法返回字符串。
// replaceAll()字符串替换。
value.content.map( v => { return `<p>${v.text}</p>` }).toString().replaceAll(',','')
}</li>`
})
}
titleAll()
</script>
</html>

View File

@@ -0,0 +1,161 @@
<!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>
<body>
</body>
<script>
var orderData = [
{
name: '路易斯女装旗舰店',
shopList: [{
img: '../img/22/产品图.png',
info: {
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
color: '黑白',
size: 'L',
price: '160.00',
number: '1'
}
}
],
remark: '12333',
postage: '0',
amount: '1000.00'
},
{
name: '路易斯女装旗舰店',
shopList: [{
img: '../img/22/产品图.png',
info: {
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
color: '黑白',
size: 'L',
price: '160.00',
number: '1'
}
},
{
img: '../img/22/产品图.png',
info: {
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
color: '黑白',
size: 'L',
price: '160.00',
number: '2'
}
}
],
remark: '12333',
postage: '0',
amount: '1000.00'
},
{
name: '路易斯女装旗舰店',
shopList: [{
img: '../img/22/产品图.png',
info: {
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
color: '黑白',
size: 'L',
price: '160.00',
number: '1'
}
},
{
img: '../img/22/产品图.png',
info: {
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
color: '黑白',
size: 'L',
price: '160.00',
number: '2'
}
},
{
img: '../img/22/产品图.png',
info: {
shopName: '真丝连衣裙2019春夏新款杭州大牌气质修……',
color: '黑白',
size: 'L',
price: '160.00',
number: '2'
}
}
],
remark: '',
postage: '0',
amount: '1000.00'
}
]
var box = $('#goodsBox')
function createData() {
orderData.forEach((v, i) => {
inner(v,box)
})
}
function inner(v,dom){
dom .innerHTML += `
<li class="goods">
<div class="goods_title">
<img class="l" src="../img/22/矢量智能对象.png" alt="">
<span>${v.name}</span>
<img class="r" src="../img/22/-e-右.png" alt="">
</div>
<ul>
${
v.shopList.map(key => { return `
<li class="information">
<img src="${ key.img }" alt="">
<div class="des">
<p>${key.info.shopName}</p>
<div class="up">
<span>颜色:${key.info.color}</span>
<span>尺码:${key.info.size}</span>
</div>
<div class="down">
<div class="number">
¥<span class="one">${key.info.price.split('.')[0]}</span>
<span class="two">.${key.info.price.split('.')[1]}</span>
</div>
<div class="amount">X${key.info.number}</div>
</div>
</div>
</li>
` })
}
</ul>
<div class="remarkes">
<p class="three">订单备注</p>
<p class="four">${ v.remark ? v.remark : '有什么想对商家留言的可以在这里说' }</p>
</div>
<div class="cost">
<div class="cost_up">
<p>优惠抵用</p>
<span>-¥5</span>
</div>
<div class="cost_down">
<p>快递费用</p>
<span>${v.postage>0?v.postage:'免费包邮'}</span>
</div>
</div>
<div class="money">
<p>商品金额</p>
<span>¥${v.amount}</span>
</div>
</li>
`
}
window.onload = createData
</script>
</html>

View File

@@ -0,0 +1,245 @@
<!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>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
}
.main {}
.main ul {
overflow: hidden;
}
.main ul li {
display: flex;
height: 45px;
align-items: center;
position: relative;
padding: 0 15px;
border-bottom: 1px solid #f4f0f0;
transition-duration: 0.3s;
}
.main .item {
width: 100%;
}
.main .action {
display: flex;
align-items: center;
height: 100%;
position: absolute;
right: -180px;
}
.main .action .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
color: #fff;
}
.action .top {
background: #c8c7cd;
}
.action .read {
background: #ff9c00;
}
.action .delete {
background: #ff3a31;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<div class="item">新闻1</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">新闻2</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
<li>
<div class="item">新闻3</div>
<div class="action">
<div class="item top">置顶</div>
<div class="item read">未读</div>
<div class="item delete">删除</div>
</div>
</li>
</ul>
</div>
</body>
<!-- 1 获取事件; 2 绑定事件; 3 事件处理函数。
思路:侧滑按钮,默认固定在屏幕右侧固定-180px,首先,要监听屏幕,获取x值,通过手指触摸屏幕的滑动距离来判断左滑、右滑,
该事件:标题的内容: 首先,通过循环words得到里面的对象和下标,设置相关属性后,把它放到html上;
内容的内容: 同上 激活态还是通过下标实现同步-->
<script>
// 事件的传递有两种方式:冒泡与捕获。
// 在冒泡中,内部元素的事件会先被触发,然后再触发外部元素; 【从里到外】
// 在捕获中,外部元素的事件会被先触发,然后才会触发内部元素的事件。【从外到里】
// 一、addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
// 它们都接受3个参数:如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注:事件名不含"on",如“click”)
// 现在的版本可以省略第三个参数,默认值为false.
// 总结:
// 1:相同事件绑定和解除,需要使用共用函数;绑定和解除事件时 事件没有"on" 即onclick写成click
// 2:共用函数不能带参数;
// 二.addEventListener()与removeEventListener()的第三个参数详解
// 布尔值参数是true,表示在捕获阶段调用事件处理程序;就是最不具体的节点先接收事件,最具体的节点最后接收事件
// 如果是false,在冒泡阶段调用事件处理程序;则是先寻找指定的位置,由最具体的元素接收,然后逐级向上传播至最不具体的
// 元素的节点(文档)
// 总结:
// 1:true的触发顺序总是在false前面
// 2:如果多个均为true,则外层触发先于内层
// 3:如果多个均为false,则内层触发先于外层
// 触点坐标选取
// touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX
// touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX
//返回值
function $(className) {
return document.querySelector(className)
}
// 返回数组
function _(className) {
return document.querySelectorAll(className)
}
var mainli = _('.main ul li')
var startX = 0
mainli.forEach(function (value, index) {
value.addEventListener('touchstart', function (event) {
// console.log('event.targetTouches[0]', event.targetTouches[0].screenX);
startX = event.targetTouches[0].screenX;
mainli.forEach(function (V, i) {
if (i != index) {
V.style.transform = `translateX(0px)`;
}
})
})
value.addEventListener('touchmove', function (event) {
var moveX = event.targetTouches[0].screenX;
// 在没有任何操作的情况下,起始状态都是关上的即false,也就是open取反
// 先判断右滑还是左滑,再判断是打开状态还是关闭状态,(定义value.open,true是打开,false是关上)。
// 然后打开的情况下,x值的计算以及再关上的状态下x轴的计算。
// 左滑
if(moveX < startX){
// 状态默认关闭
if (!value.open){
var x = moveX - startX
// 左滑打开成功
if(x < -180){
value.style.transform =`translateX(-180px)`
}else{
// 左滑打开失败
value.style.transform =`translateX(${x}px)`
}
value.open = true
}
// 右滑(movex > startx)
}else{
// 状态默认打开
if (value.open){
var newX = (moveX - startX) + (-180)
// 右滑关闭失败
if (newX <= 0){
value.style.transform =`translateX(${newX})px`
}else{
// 右滑关闭成功
value.style.transform =`translateX(0px)`
}
}
}
})
value.addEventListener('touchend', function (event) {
console.log('event.targetTouches', event);
var endX = event.changedTouches[0].screenX;
// 阈值
var distenceX = endX - startX
// 左滑
if (startX > endX) {
// 打开成功
if (distenceX < -60) {
value.style.transform = `translateX(-180px)`;
// 打开失败
} else {
value.style.transform = `translateX(0px)`;
value.open = false
}
// 右滑
} else {
// 打开成功
if (distenceX > 60) {
value.style.transform = `translateX(0px)`;
// 打开失败
} else {
value.style.transform = `translateX(-180px)`;
value.open = false
}
}
})
})
</script>
</html>

View File

@@ -0,0 +1,302 @@
<!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>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.header {
width: 100%;
height: 45px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: #fff;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
border-bottom: 1px solid #dadada;
}
.header img {
width: 15px;
height: 20px;
transform: scale(0.6);
}
.content {
margin-top: 45px;
/* touch-action: none; */
}
.content li {
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #dadada;
padding: 0 10px;
}
.refresh {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: fixed;
left: 50%;
z-index: 998;
background: #fff;
border-radius: 100%;
box-shadow: 0px 0px 9px #858585;
margin-left: -15px;
transition: all 0.1s;
}
.refresh img {
width: 100%;
height: 100%;
}
.rotate {
animation: rotateAction 1s linear infinite;
}
@keyframes rotateAction {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="header">
<img src="../../../作业/img/64/左.png" alt="">
<span>热门视频</span>
<span></span>
</div>
<ul class="content">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
<li>列表11</li>
<li>列表12</li>
<li>列表13</li>
<li>列表14</li>
<li>列表15</li>
<li>列表16</li>
<li>列表17</li>
<li>列表18</li>
<li>列表19</li>
<li>列表20</li>
<li>列表21</li>
<li>列表22</li>
<li>列表23</li>
<li>列表24</li>
<li>列表25</li>
<li>列表26</li>
<li>列表27</li>
<li>列表28</li>
<li>列表29</li>
<li>列表30</li>
<li>列表31</li>
<li>列表32</li>
<li>列表33</li>
<li>列表34</li>
<li>列表35</li>
<li>列表36</li>
<li>列表37</li>
<li>列表38</li>
<li>列表39</li>
<li>列表40</li>
</ul>
<div class="refresh" style="top: 10px;">
<img src="../../../作业/img/64/朋友圈.png" alt="">
</div>
</body>
<!-- 1 获取事件; 2 绑定事件; 3 事件处理函数。 -->
<!-- 思路:首先刷新这个方法是在滚动条到顶部的时候才会触发,因此要先判断滚动条是否在顶部,
然后再去调用该方法。然后去生成下拉刷新这一项功能:首先监听它的y值,开始/移动/结束
三过程,在移动的时候,为避免滚动条和下拉刷新事件冲突,因此要设置
避免默认事件e.preventDefault();
甲方需求:当滚动条到达顶部时,达到阈值,下拉刷新,否则无法触发该事件。 -->
<script>
// 知识拓展:pageX/pageY:
// 鼠标相对于整个页面的X/Y坐标。
// 注意,整个页面的意思就是你整个网页的全部。
// 比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
// screenX/screenY:
// 鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
// function isTop() {
// if(document.documentElement.scrollTop === 0){
// return true
// }else{
// return false
// }
// // return document.documentElement.scrollTop === 0 ? true : false
// }
// if (isTop()) {
// addMove();
// } else {
// window.addEventListener('scroll', ()=>{
// // () => isTop() ? addMove() : ''
// if( isTop() ){
// addMove()
// }
// })
// }
function $(className) {
if (document.querySelectorAll(className).length > 1) {
return document.querySelectorAll(className)
} else {
return document.querySelector(className)
}
}
// 首先判断是否到达顶部,到达顶部返回true,否则false,定义一个方法判断顶部。
// 当在顶部的时候,调用刷新方法,不是顶部的时候,再为空。
function ifTop() {
if (document.documentElement.scrollTop == 0) {
return true
} else {
return false
}
}
// 判断是否为true,是就调用方法,不是则监听判断是否为0,是的时候调用
if (ifTop()) {
Refresh();
console.log('Refresh');
} else {
window.addEventListener('scroll', function () {
if (ifTop()) {
console.log('scroll',ifTop());
Refresh()
}
})
}
var startY = 0, moveY = 0, endY = 0;
function Refresh() {
// 获取开始的Y值
$('.content').addEventListener('touchstart', (e) => {
startY = e.targetTouches[0].pageY
console.log('touchstart');
});
// 获取移动的y值,首先判断页面状态,是true才继续下一步
$('.content').addEventListener('touchmove', (e) => {
console.log('touchmove',ifTop());
// 页面状态true
if (ifTop()) {
// 获取移动的y值
moveY = e.targetTouches[0].pageY
// 判断是否为下拉
if (moveY > startY) {
console.log('preventDefault');
// 防止向下浏览和向下刷新冲突,故阻止默认事件
e.preventDefault();
// 获取移动距离
var distanceY = moveY - startY;
// 当移动距离在100以内时,改变图标距离
if (distanceY <= 120) {
// 120*3=360跟手刚好一圈
$('.refresh').style = `
top:${distanceY}px;
transform:rotate(${distanceY * 3}deg);`;
console.log(distanceY);
}
}
}
});
// 获取结束y值
$('.content').addEventListener('touchend', (e) => {
// if(!ifTop()) return;
// 特别注意这里是changedTouches!!!!
var endY = event.changedTouches[0].pageY;
var distanceY = endY - startY;
if (distanceY <= 50) {
$('.refresh').style = `
top:10px;
transform:rotate(0deg);`;
}else {
// 添加了一个rotate包含了 animation: rotateAction 1s linear infinite;
// 以及@keyframes rotateAction,从0到360
$(".refresh").className = "refresh rotate"
// top: 80px;是为了固定图标悬浮转动的位置,无论大与小都固定在80px开始旋转
$('.refresh').style = `
top: 80px;
transform: rotate(0deg);`;//手动将旋转角度清为0,因为@keyframes rotateAction是从0开始
//如果不清0,旋转会从上次的值跳到0在开始
// 定时器,2秒以后再消失恢复默认
setTimeout(() =>{
$('.refresh').style = `
top: 10px;
transform: rotate(0}deg);`;
$(".refresh").className = "refresh"
},2000)
}
})
}
</script>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

View File

@@ -0,0 +1,24 @@
<!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>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main img {
width: 200px;
}
</style>
</head>
<body>
<div class="main"></div>
</body>
<script src="./index.js"></script>
</html>