bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/clear.css Normal file
View File

@@ -0,0 +1,11 @@
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 0;
}
a {
text-decoration: none;
}

267
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/elema.css Normal file
View File

@@ -0,0 +1,267 @@
.header {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 0.92rem;
background: linear-gradient(90deg,#0af,#0085ff);
z-index: 999;
padding: 0.185rem 0.13rem 0.075rem;
box-sizing: border-box;
}
.location {
color: #fff;
display: flex;
align-items: center;
}
.location span {
font-size: .17rem;
margin: 0 0.05rem;
font-weight: 700;
}
.search {
background: #fff;
height: 0.345rem;
border-radius: .02rem;
margin-top: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
}
.search span {
font-size: .14rem;
color: #999;
margin-left: .05rem;
}
.search i {
font-size: .14rem;
color: #999;
}
.content {
margin-top: 0.94rem;
margin-bottom: 0.48rem;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0.48rem;
border-top: .01rem solid #f5f5f5;
background: #fff;
z-index: 999;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer li {
display: flex;
flex-direction: column;
align-items: center;
}
.footer li span{
color: #8e8e93;
font-size: .12rem;
zoom: 0.9;
margin-top: 0.035rem;
}
.active {
color: #0089dc;
}
.active span {
color: #0089dc !important;
}
.menu {
display: flex;
flex-wrap: wrap;
}
.menu li{
width: 20%;
text-align: center;
margin-top: .11rem;
}
.menu li img{
width: .45rem;
height: .45rem;
}
.menu li p{
color: #666;
font-size: .12rem;
}
.activity {
margin-top: 0.265rem;
padding-left: .15rem;
padding-top: .12rem;
box-sizing: border-box;
background: linear-gradient(
0deg
,#f4f4f4 5%,#fafafa 95%);
display: flex;
justify-content: space-between;
height: 1.1rem;
}
.activity_text h3{
font-size: .17rem;
font-weight: 700;
color: #333;
margin-bottom: .05rem;
}
.activity_text .des{
font-size: .13rem;
color: #777;
margin-bottom: .09rem;
}
.activity_text .buy{
font-size: .12rem;
color: #af8260;
}
.activity_img {
width: 1.41rem;
height: .94rem;
}
.shop_list {
margin-top: 0.19rem;
}
.shop_list .title {
font-size: .15rem;
color: #333;
text-align: center;
position: relative;
width: 35%;
margin: 0 auto;
}
.shop_list .title::before {
content: " ";
width: .2rem;
height: .01rem;
background-color: #999;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.shop_list .title::after {
content: " ";
width: .2rem;
height: .01rem;
background-color: #999;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.condition {
display: flex;
justify-content: space-around;
align-items: center;
height: .4rem;
margin-top: 0.225rem;
margin-bottom: 0.26rem;
}
.condition li{
font-size: .13rem;
color: #666;
}
.list>li {
display: flex;
border-bottom: .01rem solid #f5f5f5;
padding-bottom: .15rem;
margin-top: 0.185rem;
}
.list li .shop_logo{
width: .64rem;
height: .64rem;
}
.list_text {
margin-left: .1rem;
width: calc(100% - .7rem);
}
.list_text_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.list_text_title h3 {
font-size: .15rem;
color: #333;
font-weight: 700;
}
.list_text_title i {
font-size: .12rem;
color: #666;
}
.zan {
margin-top: 0.08rem;
margin-bottom: 0.08rem;
}
.zan img {
width: .56rem;
margin-right: 0.045rem;
}
.zan span {
font-size: .11rem;
zoom: 0.9;
color: #666;
}
.peisong {
display: flex;
justify-content: space-between;
align-items: center;
color: #999;
font-size: .11rem;
zoom: 0.9;
}
.tag {
display: flex;
margin-top: .1rem;
}
.tag li {
font-size: .165rem;
padding: 0 0.03rem;
box-sizing: border-box;
border: .01rem solid rgb(221, 221, 221);
zoom: 0.5;
color: rgb(102, 102, 102);
margin-right: .09rem;
border-radius: .02rem;
}
.youhui {
margin-top: .2rem;
}
.youhui li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.075rem;
}
.youhui .tip {
line-height: .18rem;
width: .18rem;
height: .18rem;
background: rgb(240, 115, 115);
color: #fff;
font-size: .12rem;
margin-right: .08rem;
border-radius: .02rem;
text-align: center;
zoom: 0.8;
}
.youhui .youhui_text {
font-size: .12rem;
color: #666;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sss {
display: flex;
width: 87%;
}

75
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/index.css Normal file
View File

@@ -0,0 +1,75 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
}
.header i{
width: 0.095rem;
height: 0.17rem;
}
.header .header_c{
font-family: PingFang-SC-Bold;
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #000000;
}
.center{
margin-top: 0.595rem;
padding: 0 0.125rem;
}
.center_q{
border-bottom: 0.085rem solid #f3f4f7;
}
.center_q{
height: 1.08rem;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li{
display: flex;
align-items: center;
justify-content: space-between;
height: 0.5rem;
}
.center .center_a{
font-family: PingFang-SC-Bold;
font-size: 0.26rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.16rem;
letter-spacing: 0rem;
color: #010101;
}
.center .center_b{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.16rem;
letter-spacing: 0rem;
color: #909090;
}
.center .center_c{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.16rem;
letter-spacing: 0rem;
color: #909090;
}
li:first-child .center_c{
margin-right: 0.3rem;
}

67
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/index2.css Normal file
View File

@@ -0,0 +1,67 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
padding: .1rem;
margin-top: .1rem;
}
.center{
margin-top: 0.48rem;
padding: 0 .3rem;
display: flex;
flex-direction: column;
}
.center p{
font-family: PingFang-SC-Medium;
font-size: 0.27rem;
font-weight: bold;
font-stretch: normal;
line-height: 0.194rem;
letter-spacing: 0rem;
color: #000000;
margin-top: .845rem;
margin-bottom: 0.45rem;
}
.center ul input{
border-left: 0;
font-size: 0.18rem;
font-stretch: normal;
letter-spacing: 0rem;
color: #c7c7cc;
padding: .17rem 0;
border-bottom: .01rem solid #c7c7cc;
width: 311px;
border-top: 0;
border-right: 0;
}
button{
background-color: #5697f4;
border-radius: 0.245rem;
height: 0.49rem;
color: #fff;
font-size: .15rem;
margin-bottom: 0.28rem;
margin-top: 0.3rem;
border: none;
}
.header_a{
display: flex;
justify-content: space-between;
}
.header_a span{
font-family: PingFang-SC-Regular;
font-size: 0.14rem;
font-weight: bold;
font-stretch: normal;
line-height: 0.194rem;
letter-spacing: 0rem;
color: #9696a4;
}
a{
font-family: PingFang-SC-Regular;
font-size: 0.14rem;
font-weight: bold;
letter-spacing: 0rem;
color: #5697f4;
}

85
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/index3.css Normal file
View File

@@ -0,0 +1,85 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
background: #f3f4f7;
}
.header .header_a{
font-family: PingFang-SC-Medium;
font-size: 0.15rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #000000;
}
.header .header_b{
font-family: PingFang-SC-Bold;
font-size: 0.18rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #000000;
}
.header button{
background-color: #5697f4;
border-radius: 0.025rem;
font-family: PingFang-SC-Bold;
font-size: 0.13rem;
font-weight: normal;
font-stretch: normal;
color: #ffffff;
width: 0.62rem;
height: 0.315rem;
border: none;
}
.center{
margin-top: .6rem;
padding-top: .05rem;
}
.center_b{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #a7a7a7;
margin-left: .3rem;
}
.center_a{
background: #f3f4f7;
height: 6rem;
}
.center_c{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.35rem;
letter-spacing: 0rem;
color: #a7a7a7;
margin-left: .17rem;
margin-top: .06rem;
}
.center_a button{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0rem;
color: #5a5a5a;
background-color: #e0e0e0;
border-radius: 0.13rem;
margin-left: .19rem;
margin-top: .05rem;
border: .01rem solid #e0e0e0;
}

78
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/index4.css Normal file
View File

@@ -0,0 +1,78 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
border: solid 0.005rem rgb(234 234 234 / 60%);
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.18rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.24rem;
letter-spacing: 0rem;
color: #333333;
}
.header i{
color: #999;
}
.conter{
margin-top: 0.795rem;
padding: 0 0.125rem;
}
li{
display: flex;
align-items: center;
justify-content: space-between;
height: 0.525rem;
padding: .08rem 0;
border-bottom: .01rem solid #ececec;
}
.conter_a{
display: flex;
}
.conter_a img{
width: 0.36rem;
height: 0.36rem;
}
.conter_a span{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: -0.003rem;
color: #333333;
margin-left: .16rem;
}
.conter_b button{
width: 0.6rem;
height: 0.315rem;
border-radius: 0.025rem;
border: solid 0.005rem #498af5;
color: #498af5;
background: #ffffff;
margin-right: .09rem;
}
.conter_b img {
width: 0.125rem;
height: 0.03rem;
margin-bottom: .03rem;
}
li:nth-child(n+2) button{
border-radius: 0.025rem;
border: solid 0.005rem #e1e1e1;
color:#e1e1e1 ;
background: #ffffff;
margin-right: .09rem;
width: 0.6rem;
height: 0.315rem;
}

56
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/index5.css Normal file
View File

@@ -0,0 +1,56 @@
.header{
position: fixed;
left: 0;
top: 0;
right: 0;
height: 0.595rem;
background: #fff;
padding: 0 0.125rem;
align-items: center;
justify-content: space-between;
display: flex;
}
.header i{
width: 0.095rem;
height: 0.17rem;
}
.header span{
font-family: PingFang-SC-Bold;
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.4rem;
letter-spacing: 0.017rem;
color: #1b1b1b;
}
.center{
margin-top: 0.595rem;
padding: 0 0.125rem;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 2.2rem;
}
.center img{
width: 1.035rem;
height: 1.29rem;
margin-bottom: 0.365rem;
}
.center_a{
display: flex;
}
.center_a img{
width: 0.18rem;
height: 0.18rem;
margin-bottom: 0.365rem;
}
.center_a span{
font-family: PingFang-SC-Medium;
font-size: 0.14rem;
font-weight: normal;
font-stretch: normal;
letter-spacing: -0.003rem;
color: #737373;
margin-left: .1rem;
}

0
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/css/public.css Normal file
View File

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/cai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/gantan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/head.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/jiahao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/jianhao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/jinru.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/jitui.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/shaokao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/suo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/three.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/img/zan.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="60" height="10" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="a"><stop stop-color="#FFDE00" offset="0%"/><stop stop-color="#FFB000" offset="100%"/></linearGradient></defs><path d="M54.017 8.072l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L53.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm-48 0L3.465 9.633c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L5.63.589c.213-.515.557-.523.774 0L7.55 3.352l2.982.237c.556.044.67.368.24.736L8.497 6.269l.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L17.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L29.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56zm12 0l-2.552 1.561c-.476.291-.758.096-.626-.455l.696-2.909-2.273-1.944c-.424-.362-.325-.691.239-.736l2.982-.237L41.63.589c.213-.515.557-.523.774 0l1.146 2.763 2.982.237c.556.044.67.368.24.736l-2.274 1.944.696 2.91c.13.542-.143.75-.626.454l-2.551-1.56z" fill="url(#a)" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

156
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/js/game.js Normal file
View File

@@ -0,0 +1,156 @@
var body = document.querySelector("body");
var people = document.querySelector(".people");
var bombAudio = document.querySelector(".bombAudio");
var appleAudio = document.querySelector(".appleAudio");
// 屏幕的宽度
var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;
var fraction = 0;
var gameProbability = 0.4;
var bmobSpeed = 80;
var appleOffset = 20;
function createdEle(type) {
var Img = document.createElement("img");
Img.src = type == 1 ? './img/apple.png' : './img/boom.png';
Img.className = type == 1 ? 'apple' : 'boom';
// 56 84
// 元素的宽度
var SpanWidth = type == 1 ? 40 : 60;
var SpanLeft = Math.random() * (screenWidth - SpanWidth)
if (SpanLeft <= SpanWidth) {
SpanLeft = 0
}
Img.style = `
position: absolute;
left: ${SpanLeft}px;
top: ${type == 1 ? -56 : -84}px;
`;
body.appendChild(Img);
animation(type, Img)
}
function animation(type, span) {
// 苹果🍎
if (type == 1) {
var appleInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
// 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(appleInterval)
} else {
JudgingCollision(span, appleInterval)
}
},60)
// 炸弹💣
} else {
var boomInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + 20}px`;
//判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(boomInterval)
} else {
JudgingCollision(span, boomInterval)
}
},bmobSpeed)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = document.querySelector(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.className == "apple") {
fraction += 10;
// 如果分数超过100分，
if (fraction >= 100) {
// 降低苹果出现的概率，也就是提高炸弹数量
gameProbability = 0.2;
// 并且加快炸弹的速度
bmobSpeed = 80;
appleOffset = 40;
}
document.querySelector(".fraction").innerText = `${fraction}分`;
appleAudio.play()
body.removeChild(span)
clearInterval(timeout)
} else {
fraction -= 20;
document.querySelector(".fraction").innerText = `${fraction}分`;
bombAudio.play();
if (fraction <= 0) {
clearInterval(timeout)
confirm("游戏失败")
location.reload()
} else {
span.src = "./img/bombimg.png"
clearInterval(timeout)
setTimeout(function (){
body.removeChild(span)
},100)
}
}
}
}
function init () {
var probability = Number(Math.random().toFixed(1))
if (probability <= gameProbability) {
createdEle(1)
} else {
createdEle(2)
}
}
setInterval(function (){
init();
},200)
body.onmousemove = function (e) {
if (e.x <= 100) {
people.style.left = `0px`;
} else {
people.style.left = `${e.x - 100}px`;
}
// 判断人物向右移动
if (parseInt(people.style.left) > screenWidth / 2) {
people.className = 'people'
// 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
} else {
people.className = 'people leftPeople'
}
}
// 接到一个苹果加10分
// 接到炸弹减20
// 默认0分
// 结束条件：分数 < 0
// 任务
// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
//

11
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/js/rem.js Normal file
View File

@@ -0,0 +1,11 @@
window.onload = function () {
getRem(375, 100)
};
window.onresize = function () {
getRem(375, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}

148
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/demo.html Normal file
View File

@@ -0,0 +1,148 @@
<!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>tabs切换</title>
<style>
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
}
.show_title{
color: red;
}
.content li{
display: none;
}
.show_content{
display: inline-block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
</ul>
<ul class="content">
</ul>
</div>
</body>
<script>
var title = document.querySelector(".title");
var content = document.querySelector(".content");
var tabs = [
{
title: '推荐',
list: [
{
title : '推荐的内容1',
time: '2021-03-05'
},
{
title : '推荐的内容2',
time: '2021-03-05'
}
]
},
{
title: '游戏',
list: [
{
title : '游戏的内容1',
time: '2021-03-05'
},
{
title : '游戏的内容2',
time: '2021-03-05'
}
]
},
{
title: '热点',
list: [
{
title : '热点的内容1',
time: '2021-03-05'
},
{
title : '热点的内容2',
time: '2021-03-05'
}
]
}
];
function CreateTitle(){
tabs.forEach(function(v,i){
title.innerHTML += `<li class="${ i==0?'show_title':'' }">${v.title}</li>`
});
}
function CreateContent(){
tabs.forEach(function(v,i){
content.innerHTML += `<li class="${i==0?'show_content':''}">${v.list.map(function(item){
return `<span>${item.title}</span>`
}).toString().replace(/,/g,"")
}</li>`
})
}
function clickTabs(){
var Title_li = document.querySelectorAll(".title li")
var Content_li = document.querySelectorAll(".content li")
console.log("Title_li,Content_li",Title_li,Content_li);
Title_li.forEach(function(a,b){
console.log("aaaa",a);
a.onclick = function(){
Title_li.forEach(function(k,j){
k.classList.remove("show_title")
Content_li[j].classList.remove("show_content")
})
a.classList.add("show_title")
Content_li[b].classList.add("show_content")
}
})
}
CreateTitle();
CreateContent();
clickTabs();
</script>
</html>

24
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/demo2.html Normal file
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>
body,html{
height: 100%;
}
</style>
</head>
<body></body>
<script>
var index = 0;
var body = document.querySelector("body")
body.onclick = function(event){
var X = event.x,
Y = event.y;
}
</script>
</html>

135
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/earth.html Normal file
View File

@@ -0,0 +1,135 @@
<!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:768px; overflow:hidden; background-color:#000}
#sun{ width:2000px; height:2000px; background-image:url(images/dc4.png); background-size:100% 100%; position:absolute; right:-1400px; top:-1000px;
border-radius:1000px;
box-shadow:0 0 200px #F30,
0 0 20px #F00,
0 0 10px #FF0,
0 0 200px #F30;
animation-name:bbb;
animation-duration:360s;
animation-iteration-count:infinite;
animation-timing-function:linear}
#box{
width:400px;
height:400px;
position:absolute;
top:300px;
left:300px;
border-radius:200px;
/*transform-style:preserve-3d;
transform:rotateX(70deg);*/
transform:rotate(-15deg);
overflow:hidden;
box-shadow:0 0 30px #00F,
0 0 30px #00F;
}
#shadow{
width:400px;
height:400px;
border-radius:200px;
position:absolute;
z-index:999;
box-shadow:0px 0 80px black inset,
60px 0 60px black inset;
}
#img{
width:2400px;
height:400px;
position:absolute;
left:-800px;
background-image:url(images/mapa.jpg);
border-radius:200px;
animation-name:aaa;
animation-duration:10s;
animation-iteration-count:infinite;
animation-timing-function:linear
}
#div1{
width:400px;
height:400px;
border-radius:200px;
position:absolute;
background:-webkit-gradient(radial,330 200,10,330 200,80,from(#FFF),to(blue));
opacity:0.3;
/*transform-style:preserve-3d;
transform:translateX(400px);*/
/*animation-name:aaa;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function:linear;*/
}
@keyframes ccc{
0%{
background-position:-80px 0px;
}
50%{
background-position:0px -80px;
}
100%{
background-position:-80px 0px;
}
}
@keyframes bbb{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes aaa{
0%{
left:-2000px;
}
100%{
left:-800px;
}
}
</style>
<script>
window.onload=function()
{
/*
var oDiv = document.getElementById("div1");
for(var i = 0;i<=180;i++)
{
var aImg = document.createElement("img");
aImg.src="cir.svg";
aImg.style.transformStyle="preserve-3d";
aImg.style.position="absolute";
aImg.style.transform="rotateX("+i+"deg)";
oDiv.appendChild(aImg);
}
*/
}
</script>
</head>
<body>
<div id="sun"></div>
<div id="box">
<div id="shadow"></div>
<div id="img"></div>
<div id="div1">
</div>
</div>
<div></div>
</body>
</html>

358
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/elema.html Normal file
View File

@@ -0,0 +1,358 @@
<!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>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_17yqrqf00bk.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/elema.css">
</head>
<body>
<div class="header">
<div class="location">
<i class="iconfont icon-weizhi"></i>
<span>政务环路合肥市行政服务中心</span>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="search">
<i class="iconfont icon-sousuo"></i>
<span>搜索饿了么商家、商品名称</span>
</div>
</div>
<div class="content">
<ul class="menu">
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
<li>
<img src="../img/jitui.png" alt="">
<p>美食</p>
</li>
</ul>
<div class="activity padd">
<div class="activity_text">
<h3>品质套餐</h3>
<div class="des">搭配齐全吃得好</div>
<div class="buy">立即抢购 ></div>
</div>
<img class="activity_img" src="../img/cai.png" />
</div>
<div class="shop_list">
<div class="title">推荐商家</div>
<ul class="condition">
<li>
综合排序
<i class="iconfont icon-zhankai"></i>
</li>
<li>
综合排序
</li>
<li>
综合排序
</li>
<li>
综合
<i class="iconfont icon-zhankai"></i>
</li>
</ul>
<ul class="list padd">
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
<li>
<img class="shop_logo" src="../img/shaokao.png" alt="">
<div class="list_text">
<div class="list_text_title">
<h3>R&B珍奶会所(大唐国际店)</h3>
<i class="iconfont icon-zhankai"></i>
</div>
<div class="zan">
<img src="../img/zan.svg" alt="">
<span>4.7&nbsp;月售2679单</span>
</div>
<div class="peisong">
<div class="left">
¥15起送 | 配送¥0.5
</div>
<div class="right">
253m | 30分钟
</div>
</div>
<ul class="tag">
<li>奶茶果汁</li>
<li>奶茶果汁</li>
<li>奶茶果汁</li>
</ul>
<ul class="youhui">
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
<li>
<div class="sss">
<div class="tip">减</div>
<div class="youhui_text">满16元减1元，满26元减2元，满36元减4元，满46元减8元</div>
</div>
<div class="youhui_icon">
<span>4个活动</span>
<i class="iconfont icon-zhankai"></i>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<ul class="footer">
<li>
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
<li class="active">
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
<li>
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
<li>
<i class="iconfont icon-shuaxin"></i>
<span>首页</span>
</li>
</ul>
</body>
</html>

13
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/game.html Normal file
View File

@@ -0,0 +1,13 @@
<!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>game</title>
<link rel="stylesheet" href="../js/game.js">
</head>
<body>
</body>
</html>

58
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/index.html Normal file
View File

@@ -0,0 +1,58 @@
<!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>demo1</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css
">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
<span class="header_c">收入详情</span>
<span></span>
</div>
<div class="center">
<div class="center_q">
<span></span>
<span class="center_a">+￥399.00</span>
<span></span>
</div>
<ul>
<li>
<span class="center_b">流水号</span>
<span class="center_c">20181125015755</span>
</li>
<li>
<span class="center_b">付款类型</span>
<span class="center_c">充值</span>
</li>
<li>
<span class="center_b">收支类型</span>
<span class="center_c">充值</span>
</li>
<li>
<span class="center_b">支付方式</span>
<span class="center_c">微信钱包</span>
</li>
<li>
<span class="center_b">创建时间</span>
<span class="center_c">2018-11-25 21:03:03</span>
</li>
<li>
<span class="center_b">备注</span>
<span class="center_c">微信充值399.00元</span>
</li>
</ul>
</div>
</body>
</html>

37
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/index2.html Normal file
View File

@@ -0,0 +1,37 @@
<!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>demo2</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index2.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
</div>
<div class="center">
<p>
登录
</p>
<ul>
<input type="text" placeholder="请输入账号">
<input type="text" placeholder="请输入密码">
</ul>
<button>登录</button>
<div class="header_a">
<span>忘记密码?</span>
<div>
<span>没有账号？</span>
<a href="">立即注册</a>
</div>
</div>
</div>
</body>
</html>

28
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/index3.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>demo3</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index3.css">
</head>
<body>
<div class="header">
<span class="header_a">取消</span>
<span class="header_b">设置备注和标签</span>
<button>确定</button>
</div>
<div class="center">
<p class="center_b">输入标签</p>
<div class="center_a">
<p class="center_c">所有标签</p>
<button>同事</button>
</div>
</div>
</body>
</html>

139
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/index4.html Normal file
View File

@@ -0,0 +1,139 @@
<!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>demo4</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index4.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
<span>全部粉丝（200）</span>
<span></span>
</div>
<div class="conter">
<ul>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
<li>
<div class="conter_a">
<img src="../img/head.png" alt="">
<span>A孙先森</span>
</div>
<div class="conter_b">
<button>已关注</button>
<img src="../img/three.png" alt="">
</div>
</li>
</ul>
</div>
</body>
</html>

30
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/index5.html Normal file
View File

@@ -0,0 +1,30 @@
<!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>demo5</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2390935_w3yt2wymib.css">
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index5.css">
</head>
<body>
<div class="header">
<i class="iconfont icon-fanhui"></i>
<span>拼团</span>
<span></span>
</div>
<div class="center">
<img src="../img/suo.png" alt="">
<div class="center_a">
<img src="../img/gantan.png" alt="">
<span>抱歉，该功能暂未开通！</span>
</div>
</div>
</body>
</html>

57
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/richandstrong.html Normal file
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>rich and strong</title>
<style>
body,
html {
height: 100%;
}
</style>
</head>
<body>
</body>
<script>
var index = 0;
var body = document.querySelector("body")
body.onclick = function (event) {
// console.log(event)
var x = event.x;
var Y = event.y;
var Text = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
index > 11 ? index = 0 : '';
// console.log(Text[index])
var span = document.createElement("span");
span.innerText = Text[index];
span.style = `
position: fixed;
left: ${x}px;
top: ${Y}px;
transition: all ease 1s;
opacity: 1;
color: hsla(${parseInt(Math.random() * 360)},100%,50%);`;
body.appendChild(span)
console.log(span)
animation(span,Y);
index++
}
function animation(a,y) {
setTimeout(function (){
a.style.opacity = 0
a.style.top = `${y-100}px`
},100)
setTimeout(function (){
body.removeChild(a)
},1100)
}
</script>
</html>

41
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/sousuo.html Normal file
View File

@@ -0,0 +1,41 @@
<!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>
<input type="text" placeholder="输入关键字">
<ul></ul>
</body>
<script>
var JyList = ['天天学习', '努力学习', '天天蹦迪', '天天吃屎', '努力向上'];
var ul = document.querySelector("ul")
var input = document.querySelector("input");
input.oninput = function () {
// console.log(input)
if (input.value.trim().length > 0) {
var newList = [];
JyList.forEach(function (v, i) {
if (v.indexOf(input.value) > -1) {
var start = v.indexOf(input.value);
var length = input.value.length;
var newStr = `<span style="color:red">${v.substr(start, length)}</span>`;
newList.push(v.replace(input.value, newStr))
}
});
ul.innerHTML = ""
newList.forEach(function (v) {
ul.innerHTML += `<li>${v}</li>`
})
} else {
ul.innerHTML = ""
}
}
</script>
</html>

85
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/tabs.html Normal file
View File

@@ -0,0 +1,85 @@
<!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>tabs切换</title>
<style>
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
}
.show_title{
color: red;
}
.content li{
display: none;
}
.show_content{
display: inline-block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
<li class="show_title">推荐</li>
<li>游戏</li>
<li>热点</li>
</ul>
<ul class="content">
<li class="show_content">推荐的内容</li>
<li>游戏的内容</li>
<li>热点的内容</li>
</ul>
</div>
</body>
<script>
var title = document.querySelectorAll(".title li")
var content = document.querySelectorAll(".content li")
title.forEach(function (vao,index) {
// console.log(vao)
vao.onclick = function () {
// console.log(vao)
title.forEach(function (asd,bb) {
asd.classList.remove("show_title")
content[bb].classList.remove("show_content")
})
vao.classList.add("show_title");
content[index].classList.add("show_content")
}
})
</script>
</html>

149
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/tabs2.html Normal file
View File

@@ -0,0 +1,149 @@
<!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>tabs切换</title>
<style>
html,
body,
div,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
margin: 0;
padding: 0;
list-style: none;
}
.title {
height: 45px;
display: flex;
align-items: center;
justify-content: space-around;
}
.show_title{
color: red;
}
.content li{
display: none;
}
.show_content{
display: inline-block !important;
}
</style>
</head>
<body>
<div class="tabs">
<ul class="title">
</ul>
<ul class="content">
</ul>
</div>
</body>
<script>
var title = document.querySelector(".title");
var content = document.querySelector(".content");
var tabs = [
{
title: '推荐',
list: [
{
title : '推荐的内容1',
time: '2021-03-05'
},
{
title : '推荐的内容2',
time: '2021-03-05'
}
]
},
{
title: '游戏',
list: [
{
title : '游戏的内容1',
time: '2021-03-05'
},
{
title : '游戏的内容2',
time: '2021-03-05'
}
]
},
{
title: '热点',
list: [
{
title : '热点的内容1',
time: '2021-03-05'
},
{
title : '热点的内容2',
time: '2021-03-05'
}
]
}
];
// function RenderTitle () {
// tabs.forEach(function (v,i){
// title.innerHTML += `<li class="${ i == 0 ? 'show_title' : ''}">${v.title}</li>`
// })
// }
// function RenderContent () {
// tabs.forEach(function (v,i){
// content.innerHTML += `<li class="${ i == 0 ? 'show_content' : ''}">${
// (
// v.list.map(function (item) {
// return `<p>${item.title}</p>`
// }).toString().replace(/,/g, "")
// )
// }</li>`
// })
// }
// function changeTabs() {
// var title = document.querySelectorAll(".title li")
// console.log("title",title);
// var content = document.querySelectorAll(".content li")
// title.forEach(function (vao,index) {
// // console.log(vao)
// vao.onclick = function () {
// // console.log(vao)
// title.forEach(function (asd,bb) {
// asd.classList.remove("show_title")
// content[bb].classList.remove("show_content")
// })
// vao.classList.add("show_title");
// content[index].classList.add("show_content")
// }
// })
// }
// RenderTitle();
// RenderContent();
// changeTabs()
</script>
</html>

37
历届学生/逯帅帅/项目开发/学生项目/谢文军/demo1/page/tanchuang.html Normal file
View File

@@ -0,0 +1,37 @@
<!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>
.none{
width: 200px;
}
</style>
</head>
<body>
<button>登录</button>
<!-- <button onclick="baba()">登录</button> -->
</body>
<script>
var button = document.querySelector("button")
console.log(button);
// function baba(){
// alert(123)
// }
button.onclick = function () {
// console.log(button.className);
button.classList.toggle("none")
// alert('123465')
}
// button.addEventListener('click',function(){
// alert('123456')
// })
// button.addEventListener('click',function(){
// alert('1999996')
// })
</script>
</html>