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,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>搜索引擎</title>
</head>
<body>
<div class="search">
<select id="menu" >
<option value="null">--请选择--</option>
<option value="https://www.baidu.com/s?wd=">百度搜索</option>
<option value="https://www.so.com/s?q=">360搜索</option>
<option value="https://www.sogou.com/web?query=">搜狗搜索</option>
</select>
<input type="text" placeholder="请输入要检索的内容" id="keyword">
<button onclick="Search()">搜索</button>
</div>
<script>
function Search() {
var key = document.getElementById("keyword")
var sou = document.getElementById("menu")
if (sou.selectedIndex === 0 || key.value.length === 0) {
alert("请检查是否选择搜索引擎和输入关键词")
}else {
open(sou.options[sou.selectedIndex].value+key.value)
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 函数 function
// 作用: 将完成相同任务或逻辑计算的代码放在一起,
// 好处: 降低代码冗余和重复,提高代码的可读性逻辑性
// 注意: 函数定义后 一定要调用才是被程序运行
// 语法:
// function getName() {
// console.log(arguments)
// return "我是 ";
// }
// var data = getName('zhangsan',45,67,9898);
// console.log(data)
</script>
</body>
</html>

View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>留言字数限制检测</title>
<style>
.main {
width: 500px;
height: 306px;
border: 1px solid #e3e3e3;
position: relative;
}
.main span {
position: absolute;
right: 5px;
bottom: 5px;
}
textarea {
outline:none;
resize:none;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class="main">
<textarea name="" oninput="texts()" id="mess" cols="80" rows="20"></textarea>
<span id="shengyu">剩余字数 10/10</span>
</div>
<script>
var total = 10;
function texts () {
var tips = document.getElementById("shengyu");
var Message = document.getElementById("mess").value
if( (total - Message.length) <= 0){
tips.innerHTML= "剩余字数 <b class='error'>0</b>/10"
document.getElementById("mess").value = Message.substring(0,10)
}else {
tips.innerHTML= "剩余字数 " + ((total - Message.length).toString()) + "/10"
}
}
</script>
</body>
</html>

View File

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件学习</title>
</head>
<body>
<p class="clicktese" onmouseout="name()">2222</p>
<p class="clicktese">3333</p>
<script>
function name() {
alert(1)
}
// console.log(document.getElementsByClassName("clicktese"))
document.getElementsByClassName("clicktese").onclick = function () {
alert("clicl1")
}
// document.getElementById("clicktese").onclick = function () {
// alert("clicl2")
// }
// document.addEventListener("click", function(){
// alert(1)
// })
// document.addEventListener("click", function(){
// alert(2)
// })
// document.addEventListener("click", function(){
// alert(3)
// })
</script>
// 事件 ?用户在页面上进行的某种操作
</body>
</html>

View File

@@ -0,0 +1,97 @@
/**
* 1: ajax封装实现 1
*/
function get(url, callback) {
var http;
http = new XMLHttpRequest();
http.open("GET",url, true);
http.send();
http.onreadystatechange = function () {
if(http.readyState == 4) {
callback(JSON.parse(http.responseText))
}
}
}
/**
* 2: ajax封装实现 2
*/
// (function (win) {
// var $ = function () {},
// http = null;
//
// // 向方法 $ 中追加一个方法 init用来初始化ajax请求
// $.init = function () {
// http = new XMLHttpRequest();
// }
//
// // 向方法 $ 中追加一个方法 get用来发送get请求
// $.get = function (url, callback) {
// $.init()
// http.open("GET",url, true);
// http.send();
// http.onreadystatechange = function () {
// if(http.readyState == 4) {
// callback(http.responseText)
// }
// }
//
// }
// win.$ = $;
// })(window)
/**
* 2: ajax封装实现 2 精简版
*/
// (win => {
// var $ = () => {}, http = null;
//
// // 向方法 $ 中追加一个方法 init用来初始化ajax请求
// $.init = () => http = new XMLHttpRequest();
//
// // 向方法 $ 中追加一个方法 get用来发送get请求
// $.get = (url, callback) => {
// $.init()
// http.open("GET",url, true);
// http.send();
// http.onreadystatechange = () => http.readyState == 4 ? callback(http.responseText) : callback('noData')
// }
// win.$ = $;
// })(window)
// function f(a,b) {
// var result = a + 100;
//
// b(result)
// }
//
// function f1() {
// f(1,function (data) {
// console.log(data)
// } )
// }
//
//

View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="ajax.js"></script>
</head>
<body>
<ul id="list">
</ul>
<script>
// /**
// * 前后端一种局部刷新的前后端数据交互的方式。
// * http://www.runoob.com/ajax/ajax-intro.html
// *
// */
// // 1掏出手机(初始化ajax对象方便下面开始使用)
// var http = new XMLHttpRequest();
//
// // 2相当于掏出手机输入好手机号
// http.open("GET","http://lb2271608011.coding.me/feed.json", true);
//
// // 3拨号(发送网络请求)
// http.send();
//
// // 4通过 onreadystatechange 监听网络请求的状态,相当于电话拨号中的各种状态
// http.onreadystatechange = function () {
// if(http.readyState == 4) {
// console.log(http.responseText)
// }
// }
/**
* 1: ajax封装实现 1
*/
// $.get("http://lb2271608011.coding.me/feed.json",function (data) {
// console.log(data)
// })
/**
* 2: ajax封装实现 2
*
* 任务:
* 将 data 数据中的 items 数组渲染到页面上,通过 ul li 标签来渲染。
*/
var NewsLsit = document.getElementById("list"),
html = "";
get("http://lb2271608011.coding.me/feed.json", function (data) {
for (var i =0;i<data.items.length;i++) {
html += `<li>
<a href="${data.items[i].link}" target="_blank"> ${data.items[i].title} </a>
</li>`
}
NewsLsit.innerHTML = html
})
/**
* 下节课任务实现天气app或者 实现百度翻译
*/
</script>
</body>
</html>

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件</title>
</head>
<body>
<p class="ddddd" onclick="demos()"> 点我触发事件 </p>
<button class="btn1">我是按钮</button>
<button class="btn2">我是按钮2</button>
<script>
// 用户进行某项操作
// 浏览器有两"棵树"bom(window)dom(document)
// 通过js操作浏览器(刷新,打开窗口)bom
// 通过js操作页面上的html(显示隐藏元素,修改元素颜色)dom
function demos () {
alert("事件被触发")
document.querySelector(".ddddd").innerText = "哈哈哈哈"
document.title = "的回调古尔丹股权"
open("https://www.runoob.com/js/js-events.html")
}
document.querySelector(".btn1").onclick = function () {
alert(1)
}
// document.querySelector(".btn2").addEventListener("click", function() {
// alert(22222)
// })
</script>
</body>
</html>

View File

@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> js 第一课 </title>
</head>
<body>
<script>
// 变量 在计算机内存中存储但是可被改变的数据
// 变量定义var 变量名称;
var ColorRed = "dddd";
// 变量定义后 可以对他进行 赋值
console.log(ColorRed)
// 变量起名字需要遵循一个规则:
// 不能以数字或者特殊符号开头(_ , $),一般以字母开头
// 变量命名区分大小写
// 一般变量名称需要具有含义(英文单词来命名)
// 最好遵循驼峰命名法
// 变量的类型
// stringnumberboolean(布尔, true false)NullUndefined
// ArrayObjectfunction
var name = "刘合群"
console.log(typeof name)
var price = 100
console.log(typeof price)
var a = true
console.log(typeof a)
// 一些具有相同特征或者作用的数据的集合
// 数组定义
// 1
// var classRom = new Array()
// classRom[0] = 121
// classRom[1] = 123
// classRom[2] = 124
// 2
// var classRom = new Array(121,123,124)
// 3
// var classRom = [121,123,124]
// var classRom = [
// [[129,130],[119,110]],
// [20,50,34]
// ]
// console.log(classRom)
// 对象是某个具体事物的特征或者作用的数据集合
// 定义1
// var car = new Object();
// car.color = "red"
// car.price = '20万'
// var car = new Object({
// color: "red",
// price: '20万'
// })
// var car = {
// color: 'red',
// price: '20万',
// start: function() {
// console.log("点火方法,可以启动车辆")
// }
// }
// console.log(car.price)
// function是某些为了完成同样功能的代码的集合
// 1 定义
function buyEat(money) {
return "我帮到你带了20块的炒饭"
}
// 2 使用
var result = buyEat(20)
console.log(result)
// 函数分为两种,有参数函数,无参函数
function resultss(a, b) {
return a + b
}
console.log( resultss(100,400) )
// 控制语句:控制程序运行流程的特殊代码
// if (if else), switchwhile(do while)for(for in, forEach, map)
// break, Continue
// if (2 == 3) {
// console.log("true")
// } else {
// console.log("false")
// }
// var names = 2
// switch (names) {
// case 1 :
// console.log(1)
// break;
// case 2 :
// console.log(2)
// break;
// default:
// console.log("错误")
// break;
// }
// for 可控制的去不断运行代码
// 求100以内所有数和
// var sum = 0;
// for(var i = 1; i <= 100; i++ ) {
// sum += i
// }
// console.log(sum)
// var j = 100
// while (j < 10) {
// console.log(j)
// j++
// }
// do {
// console.log(j)
// j++
// } while (j < 10);
// var list = [445,254,33,4354]
// for(var i = 0; i < list.length; i++) {
// console.log(list[i])
// }
</script>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 仿照百度输入提示</title>
</head>
<body>
<input type="text" placeholder="亲输入关键词">
<ul class="listItem">
</ul>
<script>
var keyWord = document.querySelector("input");
var list = [ '今天很热', '天气不好','html编程学习','学习更多知识','今天学js' ]
var newList = []
keyWord.oninput = function () {
newList = []
// 为了避免用户删除搜索框文字后产生的导致indexOf返回0进而 newList 存储list数据
if (keyWord.value.length != 0) {
// 遍历 搜索候选建议数组
for(var i = 0; i < list.length; i++) {
// 匹配用户搜索的词在 搜索候选建议数组 中是否有
if (list[i].indexOf(keyWord.value) > -1) {
// 如果有把单词放到新数组
newList.push(list[i])
}
}
Render()
}
}
// 渲染 newList 数组的数据到 html页面上
function Render () {
document.querySelector(".listItem").innerHTML = ""
newList.forEach(function(val){
document.querySelector(".listItem").innerHTML += `<li>${val}</li>`
})
}
</script>
</body>
</html>

View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tabs 切换</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tabs-title {
overflow: hidden;
}
.tabs-title li {
float: left;
margin-right: 20px;
}
.tabs-content li {
display: none;
}
.title-on {
color: red;
}
.content-on {
display: block !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="tabs-title">
</ul>
<ul class="tabs-content">
</ul>
</div>
<script>
var TitleArr = [ '体育', '财经', '娱乐', '社会' ];
var ContentArr = [ '体育的内容', '财经的内容', '娱乐的内容', '社会的内容' ];
// 渲染 title 和 content 数组到页面上显示出来
function RenderPage() {
TitleArr.forEach(function(val,index){
document.querySelector(".tabs-title").innerHTML += `<li class="${index == 0 ? 'title-on': ''}">${val}</li>`
})
ContentArr.forEach(function(val,index){
document.querySelector(".tabs-content").innerHTML += `<li class="${index == 0 ? 'content-on': ''}">${val}</li>`
})
}
RenderPage()
var TitleLi = $(".tabs-title li");
var ContentLi = $(".tabs-content li");
TitleLi.on("click", function() {
$(this).addClass('title-on').siblings().removeClass('title-on')
$(ContentLi[$(this).index()]).addClass('content-on').siblings().removeClass('content-on')
})
// TitleLi.forEach(function(val,index){
// val.onclick = function () {
// TitleLi.forEach(function(el,i){
// el.className = ""
// ContentLi[i].className = ""
// })
// ContentLi[index].className = "content-on"
// val.className = "title-on"
// }
// })
</script>
</body>
</html>

View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>qq音乐案例</title>
<style>
body,ul,li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.drown li{
float: left;
margin-left: 20px;
position: relative;
}
.menu {
display: none;
position: absolute;
}
.menu li {
clear: left;
margin-left: 0px;
width: 100px;
}
.drown li:hover .menu{
display: block;
}
.drop-list {
display: none;
}
.search:focus+.drop-list{
display: block;
}
.box {
width: 224px;
height: 224px;
position: relative;
overflow: hidden;
}
.box img {
width: 224px;
height: 224px;
transition: all 0.3s;
}
.play {
width: 49px;
height: 49px;
background: #fff;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -24.5px;
margin-top: -24.5px;
text-align: center;
overflow: hidden;
opacity: 0;
transition: all 0.8s;
}
.play-action {
width: 0px;
height: 0px;
background: #d2c4c4;
border-top: 16px solid #fffcfc;
border-left: 16px solid #000;
border-right: 16px solid #fff;
border-bottom: 16px solid #fff;
margin: 0 auto;
margin-top: 8px;
margin-left: 19px;
}
.box:hover img {
width: 230px;
height: 230px;
}
.box:hover .play {
opacity: 1;
}
</style>
</head>
<body>
<div class="drown">
<ul>
<li>我的音乐</li>
<li>
客户端音乐
<ul class="menu">
<li>客户端音乐1</li>
<li>客户端音乐2</li>
</ul>
</li>
<li>音乐号</li>
</ul>
</div>
<br><br><br><br><br><br><br><br>
<input class="search" type="text" placeholder="搜索音乐"/>
<ul class="drop-list">
<li>该死的温柔</li>
<li>该死的温柔</li>
<li>该死的温柔</li>
<li>该死的温柔</li>
</ul>
<br><br><br><br><br><br><br><br>
<div class="box">
<img src="https://p.qpic.cn/music_cover/PiajxSqBRaEISibhtdxpkLprufpT7OzywmzpYlQtrEhYnQ0Rb0ibdicucw/300?n=1" alt="">
<div class="play">
<div class="play-action"></div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,3 @@
1: 弹性盒子
2: css3 动画效果
3: ajax

View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> js 轮播图 </title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.main {
width: 520px;
height: 280px;
margin: 0 auto;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.item {
width: 1560px;
overflow: hidden;
width: 1560px;
overflow: hidden;
position: absolute;
transition: all 0.3s;
}
.item li {
float: left;
}
.action {
width: 100%;
position: absolute;
top: 50%;
margin-top: -25px;
padding: 0 10px;
box-sizing: border-box;
}
.action div{
width: 50px;
height: 50px;
text-align: center;
line-height: 43px;
color: #ffffffb0;
font-size: 33px;
background: #00000070;
border-radius: 100%;
display: inline-block;
}
.action-right {
float: right;
}
.yuandian {
position: absolute;
left: 50%;
margin-left: -30px;
height: 40px;
bottom: 0;
z-index: 9;
}
.yuandian li {
float: left;
width: 10px;
height: 10px;
border-radius: 100%;
margin-right: 10px;
background: #fff;
}
.active {
background: red !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="item" style="left:0px">
<li>
<img src="https://img.alicdn.com/simba/img/TB1Z2nmeW5s3KVjSZFNSuwD3FXa.jpg" alt="">
</li>
<li>
<img src="https://img.alicdn.com/simba/img/TB1IvbNaEY1gK0jSZFCSuwwqXXa.jpg" alt="">
</li>
<li>
<img src="https://img.alicdn.com/tfs/TB1YKULarH1gK0jSZFwXXc7aXXa-520-280.jpg_q90_.webp" alt="">
</li>
</ul>
<ul class="yuandian">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="action">
<div class="action-left"> < </div>
<div class="action-right"> > </div>
</div>
</div>
<script>
var timer, currenIndex = 0;
document.querySelector(".action-right").onclick = function () {
var style = parseInt(document.querySelector(".item").style.left)
var newLeft = (style - 520) + 'px';
if(currenIndex>=2) {
currenIndex = -1
}
currenIndex++
liandongyuand()
if(style <= -1040) {
document.querySelector(".item").style.left = '0px'
} else {
document.querySelector(".item").style.left = newLeft
}
}
document.querySelector(".action-left").onclick = function () {
var style = parseInt(document.querySelector(".item").style.left)
var newLeft = (style + 520) + 'px';
if(currenIndex<=0) {
currenIndex = 3
}
currenIndex--
liandongyuand()
if(style>=0) {
document.querySelector(".item").style.left = '-1040px'
} else {
document.querySelector(".item").style.left = newLeft
}
}
document.querySelector(".main").onmousemove = function () {
clearInterval(timer)
}
document.querySelector(".main").onmouseout = function () {
autoPlay()
}
function liandongyuand () {
var li = document.querySelectorAll(".yuandian li");
li.forEach(function(val) {
val.className = ""
})
li[currenIndex].className = "active"
}
function ydClick () {
var li = document.querySelectorAll(".yuandian li");
li.forEach(function(val,index) {
val.onclick = function () {
li.forEach(function(val) {
val.className = ""
})
val.className = "active"
offsetLeft(index)
}
})
}
function offsetLeft(index) {
document.querySelector(".item").style.left = (index * -520 ) + 'px'
}
function autoPlay () {
timer = setInterval(function() {
document.querySelector(".action-right").onclick()
}, 1000)
}
ydClick()
autoPlay()
</script>
</body>
</html>

View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>弹性盒子 flex</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.header {
width: 100%;
overflow-x: scroll;
}
.header ul {
display: flex;
justify-content: space-around;
height: 50px;
align-items: center;
width: 112%;
}
.content {
margin-top: 31px;
}
.content ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.content ul li {
width: 25%;
text-align: center;
}
.content ul li img {
width: 50px;
}
.search {
display: flex;
justify-content: space-between;
}
.search input{
flex-grow: 10;
}
.search p{
flex-grow: 1;
text-align: center;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="小说名称">
<p>分类</p>
</div>
<div class="header">
<ul>
<li>精选</li>
<li>VIP(免费看)</li>
<li>男频</li>
<li>女频</li>
<li>漫画</li>
<li>仙侠</li>
</ul>
</div>
<div class="content">
<ul>
<li>
<img src="./icons.png" alt="">
<p>首页1</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页2</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页3</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页4</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页5</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页6</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页7</p>
</li>
<li>
<img src="./icons.png" alt="">
<p>首页8</p>
</li>
</ul>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 MiB

View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相框掉落</title>
<style>
body, html,.back {
height: 100%;
}
body, ul, li{
margin: 0;
padding: 0;
}
.back {
width: 100%;
background: url("./img/back.jpeg") no-repeat;
background-size: cover;
position: relative;
left: 0;
animation: backChange 0.1s 2s 6;
overflow: hidden;
}
.main {
width: 370px;
height: 226px;
background: #8d8d8d;
margin: 0 auto;
background: url("./img/xk.png");
background-size: cover;
position: relative;
transform-origin: 0 0;
transform: rotate(0deg);
top: 10px;
animation: xkChange 0.8s 2.6s 1 forwards;
}
.main img {
width: 259px;
height: 122px;
position: absolute;
left: 58px;
top: 53px;
}
@keyframes backChange {
from {
left: 0;
}
to {
left: 10px;
}
}
@keyframes xkChange {
0% {
top: 10px;
transform: rotate(0deg);
}
50% {
top: 10px;
transform: rotate(60deg);
}
100% {
transform: rotate(60deg);
top: 600px;
}
}
</style>
</head>
<body>
<div class="back">
<div class="main">
<img src="./img/me.jpeg" alt="">
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1 @@
作用:主要用于移动端布局

View File

@@ -0,0 +1,7 @@
<?php
header("Access-Control-Allow-Origin: *");
$url = "http://v.juhe.cn/toutiao/index?key=ae8dd0002b4d7df3f68d6c7de40d322e&type=";
$type = $_GET['class'];
$url = $url.$type;
echo $data = file_get_contents($url);
?>

View File

@@ -0,0 +1,10 @@
body,ul,li,p,h2,h3,h1,h4,h5,h6{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}

View File

@@ -0,0 +1,81 @@
.header {
position: fixed;
width: 100%;
}
.header_logo {
display: flex;
width: 100%;
height: 44px;
background: #d43d3d;
align-items: center;
justify-content: space-between;
}
.header_logo .icon{
font-size: 27px;
color: #fff;
margin-left: 12px;
}
.header_logo p{
color: #fff;
font-size: 19px;
width: 60%;
}
.header_menu {
width: 100%;
overflow-x: scroll;
background: #fff;
}
.header_menu ul{
display: flex;
width: 111%;
justify-content: space-around;
height: 40px;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.content {
padding-top: 85px;
}
.header_menu ul li{
}
.list-item {
display: flex;
justify-content: space-around;
padding: 0 10px;
align-items: center;
height: 116px;
}
.list-item .item-text h3,
.list-item-two .item-text h3{
font-size: 17px;
margin-bottom: 10px;
font-weight: initial;
}
.list-item .item-text p,
.list-item-two p{
margin-bottom: 10px;
color: #999;
font-size: 12px;
}
.list-item-two{
padding: 0 10px;
}
.list-item img,
.img-list img {
height: 91.5px;
}
.list-item-two .img-list {
overflow: hidden;
}
.img-list img {
float: left;
width: 33% !important;
}
.active {
color: #d43d3d;
}

View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<script src="http://at.alicdn.com/t/font_1315522_dadxsoxq0vs.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<div class="header">
<div class="header_logo">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-profile"></use>
</svg>
<p>今日趣闻</p>
</div>
<div class="header_menu">
<ul>
</ul>
</div>
</div>
<div class="content">
</div>
</body>
<script src="./js/util.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,99 @@
// 形成独立作用于
(function () {
// 顶部导航菜单
var headerMenu = [
{ title: '头条', type: 'top' },
{ title: '社会', type: 'shehui' },
{ title: '国内', type: 'guoji' },
{ title: '娱乐', type: 'yule' },
{ title: '体育', type: 'tiyu' },
{ title: '军事', type: 'junshi' },
{ title: '科技', type: 'keji' },
{ title: '财经', type: 'caijing' },
{ title: '时尚', type: 'shishang' }
];
// ajax 获取数据 type 分类的拼音名
function GetData(type) {
ajax({
data: {
type: type
},
success: function (res) {
RenderList(res.result.data)
}
})
}
/**
* 根据你传递过来的数据,帮你渲染新闻列表页面
* @param {*} list
*/
function RenderList (list) {
document.querySelector(".content").innerHTML = ""
list.forEach(function(val){
// 如果是两张图和三张图的情况统一使用三张图的html布局
if(val.hasOwnProperty("thumbnail_pic_s02")) {
document.querySelector(".content").innerHTML +=`
<div class="list-item-two">
<div class="item-text">
<h3>${val.title}</h3>
</div>
<div class="img-list">
<img src="${val.thumbnail_pic_s}">
<img src="${val.thumbnail_pic_s02}">
${val.hasOwnProperty("thumbnail_pic_s03") ? `<img src="${val.thumbnail_pic_s03}">` : ''}
</div>
<p>${val.author_name} ${val.category} ${val.date}</p>
</div>
`
// 一张图的布局
} else {
document.querySelector(".content").innerHTML +=`
<div class="list-item">
<div class="item-text">
<h3>${val.title}</h3>
<p>${val.author_name} ${val.category} ${val.date}</p>
</div>
<img src="${val.thumbnail_pic_s}" alt="${val.title}">
</div>`
}
})
}
/**
* 渲染顶部横向的菜单
*/
function RenderMenu () {
headerMenu.forEach(function(val,index){
document.querySelector(".header_menu ul").innerHTML += `
<li class="${index == 0 ? 'active': ''}">${val.title}</li>
`
})
}
/**
* 菜单被点击的时候切换激活样式,并请求对应数据。
*/
function changeMenu() {
var MenuLi = document.querySelectorAll(".header_menu ul li");
MenuLi.forEach(function(val,index){
val.onclick = function () {
MenuLi.forEach(function(vas){
vas.className = ""
})
GetData(headerMenu[index].type)
val.className = "active"
}
})
}
RenderMenu()
changeMenu()
GetData('top')
})()

View File

@@ -0,0 +1,14 @@
function ajax(params) {
var http = new XMLHttpRequest();
http.open("GET",`http://127.0.0.1/back.php?class=${params.data.type}`)
http.send()
http.onreadystatechange = function () {
if(http.readyState == 4 && http.status == 200){
params.success(JSON.parse(http.response))
}
}
}

View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tabs</title>
<style>
body,ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.main {
width: 400px;
height: 300px;
border: 1px solid #000;
margin: 20px auto;
}
.tabs-title{
width: 100%;
height: 38px;
}
.tabs-title li {
float: left;
margin-right: 10px;
}
.tabs-content li {
float: left;
display: none;
}
.titleon {
color: red;
}
.contenton {
display: inline-block !important;
}
</style>
</head>
<body>
<div class="main">
<ul class="tabs-title">
<li class="titleon">社会</li>
<li>娱乐</li>
<li>体育</li>
<li>热点</li>
</ul>
<ul class="tabs-content">
<li class="contenton">社会的内容</li>
<li>娱乐的内容</li>
<li>体育的内容</li>
<li>热点的内容</li>
</ul>
</div>
</body>
<script>
// 通过js操作网页的过程叫做 dom操作
var TabsTitle = document.querySelectorAll(".tabs-title li");
var TabsContent = document.querySelectorAll(".tabs-content li");
TabsTitle.forEach(function(value,index) {
value.onclick = function () {
TabsTitle.forEach(function(val,ind) {
val.className = ""
TabsContent[ind].className = ""
})
value.className = "titleon"
TabsContent[index].className = "contenton"
}
})
</script>
</html>

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 变量 常量
// 基础数据类型stringnumberbooleannullundefined
// 引用数据类型: objectarrayfunction
// 回调
// function getName (call) {
// (function () {
// call("ddddddd")
// })()
// }
// getName( function(aaaa) {
// console.log(aaaa)
// } )
// var names = {
// age: 1,
// name: 'ddd'
// }
// for (x in names) {
// console.log(names[x])
// }
</script>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS 富强明主 特效</title>
<style>
body,html{
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
span {
transition: all 0.8s ease;
}
</style>
</head>
<body>
</body>
<script>
var list = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
var body = document.querySelector("body"), index = 0;
body.onclick = function (event) {
// 获取用户鼠标点击后的坐标 x , y
var x = event.clientX;
var y = event.clientY;
// 使用 createElement 动态创建 span 标签
var span = document.createElement("span")
// 向span中追加文字信息
span.innerText = list[index];
// 设置span标签的样式
span.style = `
position: absolute;
left: ${x}px;
top: ${y}px;
opacity: 1;
`;
// 讲配置好的span标签添加到body中
body.appendChild(span);
index += 1;
// 如果index大于数组最大下表那么将数组下表归0从头开始
if (index > list.length-1) {
index = 0
}
RemoveChild(span,y)
}
function RemoveChild(el,top) {
// 300毫秒后开始修改span的top数值并让 opacity 透明度设置为0
setTimeout(function() {
el.style.top = `${top - 60}px`;
el.style.opacity = '0';
},300);
// 1.3秒后删除标签
setTimeout(function(){
body.removeChild(el)
},1300);
}
</script>
</html>

View File

@@ -0,0 +1,3 @@
任务:
1完成仿写京东移动端至少20个不同的页面

View File

@@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仿淘宝下拉固定</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
background: #8d8d8d;
}
.box {
width: 100%;
height: 80px;
background: #000;
}
.box_fixed {
position: fixed;
top: 0;
}
</style>
</head>
<body onscroll="scrollFixed()">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<div class="box">
</div>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li><a href="">11</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li><a href="">14</a></li>
<li><a href="">15</a></li>
<li><a href="">16</a></li>
<li><a href="">17</a></li>
<li><a href="">18</a></li>
<li><a href="">19</a></li>
<li><a href="">20</a></li>
<li><a href="">21</a></li>
<li><a href="">22</a></li>
<li><a href="">23</a></li>
<li><a href="">24</a></li>
<li><a href="">25</a></li>
<li><a href="">26</a></li>
<li><a href="">27</a></li>
<li><a href="">28</a></li>
<li><a href="">29</a></li>
<li><a href="">30</a></li>
<li><a href="">31</a></li>
<li><a href="">32</a></li>
<li><a href="">33</a></li>
<li><a href="">34</a></li>
<li><a href="">35</a></li>
<li><a href="">36</a></li>
<li><a href="">37</a></li>
<li><a href="">38</a></li>
<li><a href="">39</a></li>
<li><a href="">40</a></li>
<li><a href="">41</a></li>
<li><a href="">42</a></li>
<li><a href="">43</a></li>
<li><a href="">44</a></li>
<li><a href="">45</a></li>
<li><a href="">46</a></li>
<li><a href="">47</a></li>
<li><a href="">48</a></li>
<li><a href="">49</a></li>
<li><a href="">50</a></li>
<li><a href="">51</a></li>
<li><a href="">52</a></li>
<li><a href="">53</a></li>
<li><a href="">54</a></li>
<li><a href="">55</a></li>
<li><a href="">56</a></li>
<li><a href="">57</a></li>
<li><a href="">58</a></li>
<li><a href="">59</a></li>
<li><a href="">60</a></li>
<li><a href="">61</a></li>
<li><a href="">62</a></li>
<li><a href="">63</a></li>
<li><a href="">64</a></li>
<li><a href="">65</a></li>
<li><a href="">66</a></li>
<li><a href="">67</a></li>
<li><a href="">68</a></li>
<li><a href="">69</a></li>
<li><a href="">70</a></li>
<li><a href="">71</a></li>
<li><a href="">72</a></li>
<li><a href="">73</a></li>
<li><a href="">74</a></li>
<li><a href="">75</a></li>
<li><a href="">76</a></li>
<li><a href="">77</a></li>
<li><a href="">78</a></li>
<li><a href="">79</a></li>
<li><a href="">80</a></li>
<li><a href="">81</a></li>
<li><a href="">82</a></li>
<li><a href="">83</a></li>
<li><a href="">84</a></li>
<li><a href="">85</a></li>
<li><a href="">86</a></li>
<li><a href="">87</a></li>
<li><a href="">88</a></li>
<li><a href="">89</a></li>
<li><a href="">90</a></li>
<li><a href="">91</a></li>
<li><a href="">92</a></li>
<li><a href="">93</a></li>
<li><a href="">94</a></li>
<li><a href="">95</a></li>
<li><a href="">96</a></li>
<li><a href="">97</a></li>
<li><a href="">98</a></li>
<li><a href="">99</a></li>
<li><a href="">100</a></li>
<li><a href="">101</a></li>
<li><a href="">102</a></li>
<li><a href="">103</a></li>
<li><a href="">104</a></li>
<li><a href="">105</a></li>
<li><a href="">106</a></li>
<li><a href="">107</a></li>
<li><a href="">108</a></li>
<li><a href="">109</a></li>
<li><a href="">110</a></li>
<li><a href="">111</a></li>
<li><a href="">112</a></li>
<li><a href="">113</a></li>
<li><a href="">114</a></li>
<li><a href="">115</a></li>
<li><a href="">116</a></li>
<li><a href="">117</a></li>
<li><a href="">118</a></li>
<li><a href="">119</a></li>
<li><a href="">120</a></li>
<li><a href="">121</a></li>
<li><a href="">122</a></li>
<li><a href="">123</a></li>
<li><a href="">124</a></li>
<li><a href="">125</a></li>
<li><a href="">126</a></li>
<li><a href="">127</a></li>
<li><a href="">128</a></li>
<li><a href="">129</a></li>
<li><a href="">130</a></li>
<li><a href="">131</a></li>
<li><a href="">132</a></li>
<li><a href="">133</a></li>
<li><a href="">134</a></li>
<li><a href="">135</a></li>
<li><a href="">136</a></li>
<li><a href="">137</a></li>
<li><a href="">138</a></li>
<li><a href="">139</a></li>
<li><a href="">140</a></li>
<li><a href="">141</a></li>
<li><a href="">142</a></li>
<li><a href="">143</a></li>
<li><a href="">144</a></li>
<li><a href="">145</a></li>
<li><a href="">146</a></li>
<li><a href="">147</a></li>
<li><a href="">148</a></li>
<li><a href="">149</a></li>
<li><a href="">150</a></li>
<li><a href="">151</a></li>
<li><a href="">152</a></li>
<li><a href="">153</a></li>
<li><a href="">154</a></li>
<li><a href="">155</a></li>
<li><a href="">156</a></li>
<li><a href="">157</a></li>
<li><a href="">158</a></li>
<li><a href="">159</a></li>
<li><a href="">160</a></li>
<li><a href="">161</a></li>
<li><a href="">162</a></li>
<li><a href="">163</a></li>
<li><a href="">164</a></li>
<li><a href="">165</a></li>
<li><a href="">166</a></li>
<li><a href="">167</a></li>
<li><a href="">168</a></li>
<li><a href="">169</a></li>
<li><a href="">170</a></li>
<li><a href="">171</a></li>
<li><a href="">172</a></li>
<li><a href="">173</a></li>
<li><a href="">174</a></li>
<li><a href="">175</a></li>
<li><a href="">176</a></li>
<li><a href="">177</a></li>
<li><a href="">178</a></li>
<li><a href="">179</a></li>
<li><a href="">180</a></li>
<li><a href="">181</a></li>
<li><a href="">182</a></li>
<li><a href="">183</a></li>
<li><a href="">184</a></li>
<li><a href="">185</a></li>
<li><a href="">186</a></li>
<li><a href="">187</a></li>
<li><a href="">188</a></li>
<li><a href="">189</a></li>
<li><a href="">190</a></li>
<li><a href="">191</a></li>
<li><a href="">192</a></li>
<li><a href="">193</a></li>
<li><a href="">194</a></li>
<li><a href="">195</a></li>
<li><a href="">196</a></li>
<li><a href="">197</a></li>
<li><a href="">198</a></li>
<li><a href="">199</a></li>
<li><a href="">200</a></li>
</ul>
</body>
<script>
var box = document.getElementsByClassName("box")[0];
function scrollFixed () {
// var offset = 154,
// Yoffset = window.pageYOffset;
// if(Yoffset >= offset) {
// box.className = "box box_fixed"
// }else {
// box.className = "box"
// }
// 简写
window.pageYOffset >= 154 ? box.className = "box box_fixed" : box.className = "box"
}
</script>
</html>

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://yanxuan.nosdn.127.net/868db3139729795f91da4aa321836d52.jpg?imageView&quality=95&thumbnail=1920x420" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="https://yanxuan.nosdn.127.net/d9f047ef9de7242e8e06bce66dab1f50.jpg?imageView&quality=95&thumbnail=1920x420" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="https://yanxuan.nosdn.127.net/9f461421706eb94a41ff7180fc1a9744.jpg?imageView&quality=95&thumbnail=1920x420" alt="" srcset="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
effect : 'coverflow',
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
</script>
</body>
</html>

View File

@@ -0,0 +1,7 @@
1先写js创建特效
2实现新闻app的所有逻辑和功能
作业:实现 淘宝 pc版本下次上课来之前把代码带着给我

View File

@@ -0,0 +1,103 @@
/* 首页的css样式 */
.school-news {
margin-top: 40px;
}
.school-news-content {
height: 500px;
}
.news-content-left{
width: 64%;
}
.news-content-right{
width: 32%;
}
.content-left-top {
width: 100%;
margin-bottom: 24px;
border-bottom: 3px solid #8f000b;
}
.content-left-top h3 {
height: 43px;
}
.content-left-bottom {
width: 100%;
}
.left-bottom-img img {
max-height: 180px;
overflow: hidden;
}
.left-bottom-img a {
font-size: 16px;
line-height: 22px;
padding: 6px 0;
display: inline-block;
cursor: grab !important;
}
.left-bottom-img a:hover {
color: #EC3C1B;
}
.left-bottom-img .news_infos {
color: #727272;
font-size: 12px;
line-height: 20px;
}
.left-bottom-img .news_infos:hover{
color: #727272;
}
.left-bottom-img {
width: 39%;
}
.left-bottom-new-list {
width: 57%;
}
.left-bottom-new-list ul li{
height: 30px;
line-height: 30px;
}
.left-bottom-new-list ul li a{
width: 80%;
display: inline-block;
float: left;
color: #333;
}
.left-bottom-new-list ul li span{
display: inline-block;
width: 10%;
float: right;
color: #999;
}
.tab-title {
width: 100%;
height: 43px;
border-bottom: 3px solid #ccc;
margin-bottom: 24px;
}
.tab-title li {
display: inline-block;
height: 43px;
line-height: 43px;
float: left;
font-size: 14px;
color: #333;
cursor: default;
width: 97px;
font-size: 18px;
padding-right: 15px;
text-align: center;
}
.tab-title .selected{
color: #2b2b2b;
border-bottom: #8f000b 3px solid;
background-color: #06C;
border-radius: 5px 5px 0 0;
}
.tab-content .tab-content-item {
display: none;
}
.item-active {
display: inline-block !important;
}

View File

@@ -0,0 +1,128 @@
/* 一些公共结构的样式 */
@charset "UTF-8";
body,ul,ol,h3,h2{
margin: 0;
padding: 0;
}
body {
background: #EDEADF;
font: 14px/1 Microsoft YaHei, STHeiti STXihei, Microsoft JhengHei, Helvetica, Tohoma, Arial;
}
a {
text-decoration: none;
}
ul li,
ol li {
list-style: none;
}
.header-drak-nav {
height: 40px;
background: #262626;
}
.nav-left li{
float: left;
}
.nav-right li{
float: right;
}
.nav-left li,
.nav-right li{
height: 40px;
text-align: center;
line-height: 40px;
}
.nav-left li a,
.nav-right li a{
color: #aaaaaa;
padding: 5px 10px;
}
.nav-right li a{
padding-right: 25px;
font-family: "Microsoft Yahei";
}
.header-red-nav{
background: #89010b;
padding: 10px 0;
height: 70px;
}
.red-nav-logo img {
margin-left: 10px;
}
.red-nav-menu{
height: 72px;
line-height: 72px;
}
.red-nav-menu img,
.red-nav-menu input{
vertical-align: middle;
}
.search-submit {
width: 30px;
height: 26px;
border: none;
outline: none;
background: url("./../img/search-btn.png") no-repeat center center;
}
.red-nav-menu .search {
width: 0px;
height: 30px;
border: none;
outline: none;
color: #333;
font-size: 14px;
padding: 0 0 0 0;
line-height:30px;
background: #fff;
transition: all 1s ease 0s;
}
.header-qred-nav {
height: 58px;
background-color: #9a0813;
border-top: 1px solid #9a0813;
}
.header-qred-nav .items {
text-align: center;
width: 112px;
margin-left: 12px;
margin-right: 40px;
height: 58px;
line-height: 58px;
background: url("../img/navbar-bg.png") 98px center no-repeat;
}
.header-qred-nav .items .item-text{
color: #fff;
font-size: 18px
}
.header-qred-nav li {
float: left;
}
.dropdown li {
margin: 0 auto;
width: 100%;
}
.dropdown {
display: none;
text-align: center;
width: 112px;
position: absolute;
z-index: 116;
background: #f2f2f2;
}

View File

@@ -0,0 +1,70 @@
/* 轮播图的样式 */
.banner {
position: relative;
width: 100%;
height: 399.38px;
overflow: hidden;
}
.swiper-content {
position: relative;
height: 100%;
width: 2000%;
transition: all .7s;
}
.swiper-content li {
position: relative;
height: 399.38px;
float: left;
}
.swiper-content li img{
width: 100%;
height: 100%;
}
.swiper-spot {
position: absolute;
right: 10px;
bottom: 10px;
}
.swiper-spot li{
float: left;
width: 10px;
height: 10px;
border-radius: 100%;
background: #999;
margin-right: 5px;
}
.swiper-action {
position: absolute;
top: 50%;
margin-top: -25px;
width: 100%;
display: none;
}
.banner:hover .swiper-action {
display: inline-block;
}
.swiper-action .action-left,
.swiper-action .action-right{
width: 30px;
height: 50px;
line-height: 50px;
background: #000;
text-align: center;
color: #fff;
cursor: pointer;
}
.swiper-action .action-left {
float: left;
}
.swiper-action .action-right {
float: right;
}
.active {
background: #ff4019 !important;
}

View File

@@ -0,0 +1,19 @@
@charset "UTF-8";
.width-100 {
width: 100%;
}
.wp-inner {
width: 1115px;
margin: 0 auto;
overflow: hidden;
}
.left {
float: left;
}
.right {
float: right;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 543 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 538 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 978 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>安徽工商职业学院</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="./css/swiper.css">
<link rel="stylesheet" href="css/index.css">
<style>
.ShowSearch {
width: 142px !important;
padding: 0 0 0 5px !important;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header width-100">
<!-- 最顶部黑色导航 -->
<div class="header-drak-nav width-100">
<div class="wp-inner">
<ul class="nav-left">
<li><a target="_blank" href="http://www.ahbvc.cn/1372/list.htm" title="学生">学生</a></li>
<li><a target="_blank" href="http://www.ahbvc.cn/1373/list.htm" title="教工">教工</a></li>
<li><a target="_blank" href="http://www.ahbvc.edu.cn/xqhzc/2014/1224/c1212a14257/page.htm" title="校友">校友</a></li>
<li><a target="_blank" href="http://www.ahbvc.edu.cn/" title="访客">访客</a></li>
<li><a target="_blank" href="http://wxpt.ahbvc.cn:8080/wxpt/a/xzxx/XxXjxxb/getXjmhckList" title="校长信箱">校长信箱</a></li>
</ul>
<ul class="nav-right">
<li><a target="_blank" href="" title="English">English</a></li>
</ul>
</div>
</div>
<!-- 最顶部深红色导航 -->
<div class="header-red-nav">
<div class="wp-inner">
<!-- 版权logo -->
<div class="red-nav-logo left">
<img src="./img/logo.png" alt="" srcset="">
</div>
<!-- 搜索框 -->
<div class="red-nav-menu right">
<img src="./img/xiaoxun2.png" alt="">
<input class="search" type="text" name="" id="" placeholder="Search...">
<input onfocus="getShowSearch()" onblur="leaveShowSearch()" type="submit" class="search-submit" value="">
</div>
</div>
</div>
<!-- 最顶部浅红色导航 -->
<div class="header-qred-nav">
<div class="wp-inner">
<ul>
<li class="items">
<a href="" class="item-text">学校概况</a>
<ol class="dropdown">
<li><a href="">学校简介</a></li>
<li><a href="">历史沿革</a></li>
<li><a href="">历任领导</a></li>
<li><a href="">现任领导</a></li>
<li><a href="">组织机构</a></li>
</ol>
</li>
</ul>
</div>
</div>
</div>
<!-- 中间内容 -->
<div class="main-content">
<!-- banner轮播图 -->
<div class="banner width-100">
<ul class="swiper-content" style="left:0">
<li class="swiper-item"><img src="./img/1.jpg" alt=""></li>
<li class="swiper-item"><img src="./img/2.jpg" alt=""></li>
<li class="swiper-item"><img src="./img/3.jpg" alt=""></li>
<li class="swiper-item"><img src="./img/4.jpg" alt=""></li>
<li class="swiper-item"><img src="./img/5.jpg" alt=""></li>
<li class="swiper-item"><img src="./img/6.jpg" alt=""></li>
</ul>
<ul class="swiper-spot">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="swiper-action">
<div class="action-left">&lt;</div>
<div class="action-right">&gt;</div>
</div>
</div>
<!-- 学校新闻 -->
<div class="school-news width-100">
<div class="school-news-content wp-inner">
<!-- 左边的新闻 -->
<div class="news-content-left left">
<div class="content-left-top">
<h3>学校新闻</h3>
</div>
<div class="content-left-bottom">
<div class="left-bottom-img left">
<img src="./img/bcfd983.jpg" alt="" srcset="">
<a>
学校2018年大学生骨干培训班暨“青马工程”培训班圆满结束
</a>
<a href="" class="news_infos">
12月20日中午我校大学生骨干培训班暨“青马工程”培训班结业仪式在学术报告厅隆重举行。马克思主义学院院长喻小红校团委常务副书记赵艳...
</a>
</div>
<div class="left-bottom-new-list right">
<ul>
<li>
<a href="">学校2018年大学生骨干培训班暨“青马工程”培训班...</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
<li>
<a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
<span>12-21</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 右边tab切换 -->
<div class="news-content-right right">
<!-- tab切换的标题 -->
<ul class="tab-title">
<li class="selected">
通知公告
</li>
<li>
学生公告
</li>
<li>
招标公告
</li>
</ul>
<!-- tabs切换对应的内容 -->
<ol class="tab-content">
<li class="tab-content-item item-active">
<p>通知公告</p>
<p>通知公告</p>
</li>
<li class="tab-content-item">
<p>学生公告</p>
<p>学生公告</p>
</li>
<li class="tab-content-item">
<p>招标公告</p>
<p>招标公告</p>
</li>
</ol>
</div>
</div>
</div>
</div>
<!-- 底部版权 -->
<div class="footer">
</div>
<!-- 轮播图的js -->
<script src="./js/swiper.js"></script>
<!-- 首页的js -->
<script src="./js/index.js"></script>
<script>
// 为每一个动态设置宽度,等于浏览器的宽度
var li = document.getElementsByClassName("swiper-item")
for(var i = 0;i<li.length;i++){
li[i].style.width = document.body.clientWidth + 'px'
}
var searchInput = document.getElementsByClassName("search")[0]
function getShowSearch() {
searchInput.className = "search ShowSearch"
}
function leaveShowSearch() {
searchInput.className = "search"
}
</script>
</body>
</html>

View File

@@ -0,0 +1,31 @@
(function() {
var tabTitle = (document.getElementsByClassName("tab-title")[0]).getElementsByTagName("li");
var tabContent = (document.getElementsByClassName("tab-content")[0]).getElementsByTagName("li");
/**
* index.js 和 swiper.js 中变量 i 冲突
* 1: 更换index.js中变量i的名称例如ff
* 2: (function(){ })() 自执行函数+闭包 防止变量污染
*/
// 第一次for循环主要作用是为了给标题绑定 onmousemove 事件
for(let i = 0;i<tabTitle.length;i++) {
tabTitle[i].onmousemove = function () {
// 第二次for是为了清除标题和内容的激活样式
for(let j = 0;j<tabTitle.length;j++) {
tabTitle[j].className = ""
tabContent[j].className = "tab-content-item"
}
// 为当前悬浮的对象设置 激活样式
tabTitle[i].className = "selected"
tabContent[i].className = "tab-content-item item-active"
}
}
})()

View File

@@ -0,0 +1,136 @@
// 自执行函数 形成闭包
(function () {
var left = $("action-left"),
right = $("action-right"),
timer,
index = 1,
offsetWidths = document.body.clientWidth;
left.onclick = function () {
if(index<=1) {
index = 6
}else {
index--
}
animation(offsetWidths)
clickChangeStop()
}
right.onclick = function () {
//alert("下一页")
if(index>5) {
index = 1
}else {
index++
}
animation(-offsetWidths)
clickChangeStop()
}
/**
* 切换小圆点样式
*/
function clickChangeStop(){
var li = $("swiper-spot").getElementsByTagName("li")
clearSpotActive()
li[index - 1].className = "active"
}
/**
* 鼠标悬浮的时候,清除自动播放
*/
$("banner").onmouseover = function () {
clearInterval(timer)
}
/**
* 鼠标离开的时候,开始自动播放
*/
$("banner").onmouseout = function () {
autoPlay()
}
/**
* 自动播放
*/
function autoPlay() {
timer = setInterval(function(){
right.onclick()
},2000)
}
/**
* 小圆点被点击时候切换轮播图
*/
function spotClick() {
var li = $("swiper-spot").getElementsByTagName("li")
for(let i = 0;i<li.length;i++){
li[i].onclick = function () {
index = i + 1
$("swiper-content").style.left = ( i * -offsetWidths ) + 'px'
// 先把所有的li的激活样式 active 都清除
clearSpotActive()
// 然后为你点击的元素li单独设置激活样式
li[i].className = "active"
}
}
}
/**
* 清除所有小圆点上的激活样式
*/
function clearSpotActive() {
var li = $("swiper-spot").getElementsByTagName("li")
for(let i = 0;i<li.length;i++){
li[i].className = ""
}
}
/**
* 动画切换函数
* @param {*} offset
*/
function animation (offset) {
var juli = parseInt($("swiper-content").style.left) + offset;
if(juli < getFullWidth()){
$("swiper-content").style.left = "0px"
} else if (juli > 0) {
$("swiper-content").style.left = getFullWidth() + 'px'
}else {
$("swiper-content").style.left = juli + 'px'
}
}
/**
* 获取最后一张图片的距离 图片数量 * 单个图片宽度
*/
function getFullWidth () {
let len = ($("swiper-content").getElementsByTagName("li").length) - 1
return len * - offsetWidths
}
/**
* 获取元素
* @param {*} className
*/
function $(className){
return document.getElementsByClassName(className)[0]
}
autoPlay()
spotClick()
})()

View File

@@ -0,0 +1,6 @@
.buttons-tab {
position: fixed;
top: 44px;
width: 100%;
z-index: 999;
}

View File

@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的生活</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- page集合的容器里面放多个平行的.page其他.page作为内联页面由路由控制展示 -->
<div class="page-group">
<!-- 单个page ,第一个.page默认被展示-->
<div class="page">
<!-- 标题栏 -->
<header class="bar bar-nav">
<a class="icon icon-me pull-left open-panel"></a>
<h1 class="title">标题</h1>
</header>
<!-- 工具栏 -->
<nav class="bar bar-tab">
<a class="tab-item external active" href="#">
<span class="icon icon-home"></span>
<span class="tab-label">首页</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-star"></span>
<span class="tab-label">收藏</span>
</a>
<a class="tab-item external" href="#">
<span class="icon icon-settings"></span>
<span class="tab-label">设置</span>
</a>
</nav>
<!-- 这里是页面内容区 -->
<div class="content">
<div class="buttons-tab" id="TabsTitle">
</div>
<div class="tabs">
<div id="tab1" class="tab active">
<div class="list-block media-list">
<ul id="NewsList">
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="list-block media-list">
<ul>
</ul>
</div>
</div>
<div id="tab3" class="tab">
<div class="list-block media-list">
<ul>
</ul>
</div>
</div>
<div id="tab4" class="tab">
<div class="list-block media-list">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popup, panel 等放在这里 -->
<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>这是一个侧栏</p>
<p></p>
<!-- Click on link with "close-panel" class will close panel -->
<p><a href="#" class="close-panel">关闭</a></p>
</div>
</div>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script src="./js/data.js"></script>
<script>
var NewsList = document.getElementById('NewsList');
/**
* 渲染全部分类标签的新闻
*/
function RenderAllNew() {
var htmls = "";
for(let i = 0; i<listData.data.length; i++) {
htmls+= `<li>
<a href="${listData.data[i].surl}" class="item-link item-content">
<div class="item-media"><img src="${listData.data[i].img}" style='width: 4rem;'></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">${listData.data[i].title}</div>
</div>
<div class="item-text">${listData.data[i].intro}</div>
</div>
</a>
</li>`;
}
NewsList.innerHTML = htmls
}
/**
* 渲染顶部的分类tab标签
*/
function RenderTab() {
var TabsTitle = document.getElementById("TabsTitle");
// tab切换标签的数组
var TabList = [
{ id: 1, title: '全部', isactive: true },
{ id: 2, title: '体育', isactive: false },
{ id: 3, title: '新闻', isactive: false },
{ id: 4, title: '搞笑', isactive: false }
];
var htmlDoms = ""
// 生成tab切换标签的html代码
for(var i =0;i<TabList.length;i++){
htmlDoms+= `<a onclick="clickTabs(${TabList[i].id},'${TabList[i].title}')" href="#tab${TabList[i].id}" class="tab-link ${TabList[i].isactive ? 'active' : ''} button">${TabList[i].title}</a>`
}
TabsTitle.innerHTML = htmlDoms;
}
/**
* 顶部分类tab标签被点击的时候
*/
function clickTabs(id,title) {
var html = "";
// 获取你点击的分类tab里面的ul父级节点作用方便下面插入新闻列表
var father = document.getElementById(`tab${id}`).getElementsByTagName("ul")[0]
var newData = [];
// 判断用户点击顶部分类类型,如果是全部,则不筛选数据,直接调用 RenderAllNew
if(title == '全部') {
RenderAllNew()
}else {
// 筛选符合分类的数据
for(let i = 0; i<listData.data.length; i++) {
if(listData.data[i].category_chn == title) {
newData.push(listData.data[i])
}
}
for(let i = 0; i<newData.length; i++) {
html+= `<li>
<a href="${newData[i].surl}" class="item-link item-content">
<div class="item-media"><img src="${newData[i].img}" style='width: 4rem;'></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">${newData[i].title}</div>
</div>
<div class="item-text">${newData[i].intro}</div>
</div>
</a>
</li>`;
}
father.innerHTML = html;
}
}
RenderAllNew()
RenderTab()
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,3 @@
.list-del-price:after {
border-top: 0px solid #8C8C8C !important;
}

View File

@@ -0,0 +1,16 @@
body,ul,li {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

View File

@@ -0,0 +1,19 @@
.type ul{
display: flex;
justify-content: space-around;
height: 122px;
align-items: center;
background: #fff;
}
.type ul li{
text-align: center;
}
.type ul li img{
width: 55px;
}
.type ul li p{
margin-top: 10px;
font-size: 14px;
}

View File

@@ -0,0 +1,40 @@
body {
background: #fff;
}
.header {
position: fixed;
width: 100%;
height: 50px;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
padding: 0 11px;
align-items: center;
}
.header .icon {
font-size: 24px;
}
.g-view:before {
height: 0;
}
.info-header {
background: url("");
width: 100%;
height: 250px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.info-header img {
}
.info-title {
}
.info-title h3{
}
.info-title p{
}

View File

@@ -0,0 +1,6 @@
article p {
text-align: center;
margin: 100px 0;
color: #8d8d8d;
font-size: 17px;
}

View File

@@ -0,0 +1,50 @@
body {
background: #fff;
}
.g-view:before {
height: 0 !important;
}
.my {
}
.my-header {
display: flex;
height: 250px;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}
.my-header h2{
font-size: 29px;
}
.my-header img{
width: 110px;
height: 110px;
border-radius: 100%;
}
.my-list {
}
.my-list ul {
}
.my-list ul li {
display: flex;
justify-content: space-between;
padding: 13px 0px;
width: 90%;
margin: 0 auto;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 8px;
}
.my-list ul li a{
display: flex;
justify-content: space-between;
width: 100%;
}
.my-list ul li p {
}
.my-list ul li i {
}

View File

@@ -0,0 +1,6 @@
.left {
float: left;
}
.padding20 {
padding: 0 20px;
}

View File

@@ -0,0 +1,32 @@
body {
background: #fff;
}
.type-left {
position: fixed;
width: 20%;
height: 85%;
overflow-y: scroll;
border-right: 1px solid #e2dfdf;
}
.type-left ul{
}
.type-left ul li{
text-align: center;
padding: 10px 0;
}
.type-right {
width: 80%;
position: relative;
left: 20%;
padding: 10px;
}
.type-right ul{
}
.type-right ul li{
float: left;
margin: 10px;
}
.active {
color: red
}

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

View File

@@ -0,0 +1,65 @@
(function() {
var pn = 0;
function getClassInfoData() {
$('.g-scrollview').infiniteScroll({
pageSize: 10,
initLoad: true,
loadingHtml: '<strong>加载中...</strong>',
loadListFn: function () {
var def = $.Deferred();
get({
url: '/index',
data: {
cid: returnId(),
pn: pn
},
callback: function(res) {
RenderList(res.data)
def.resolve(res.data);
++pn;
}
})
return def.promise();
}
})
}
function RenderList (data) {
data.forEach(val => {
$('article').append(`<a class="list-item">
<div class="list-img">
<img src="${val.albums[0]}">
</div>
<div class="list-mes">
<h3 class="list-title">${val.title}</h3>
<div class="list-mes-item">
<div>
<span class="list-del-price">${val.tags.substring(0,20)}..</span>
</div>
</div>
</div>
</a>`)
})
bindClick(data)
}
function bindClick (data) {
$("article a").on('click', function() {
localStorage.setItem("info", JSON.stringify(data[$(this).index()]))
location.href="info.html"
})
}
getClassInfoData()
})()

View File

@@ -0,0 +1,53 @@
(function() {
$('#J_Slider').slider({
speed: 300,
autoplay: 2000,
lazyLoad: true
});
var MenuList = ['西红柿','猪蹄','红烧肉','蛋炒饭','黄瓜']
function getData() {
get({
url: '/query',
data: {
menu: MenuList[Math.floor(Math.random()*5)]
},
callback: function(res) {
renderList(res)
}
})
}
function renderList (list) {
list.data.forEach(val => {
$('article').append(`<a class="list-item">
<div class="list-img">
<img src="${val.albums[0]}">
</div>
<div class="list-mes">
<h3 class="list-title">${val.title}</h3>
<div class="list-mes-item">
<div>
<span class="list-del-price">${val.ingredients.substring(0,17)}...</span>
</div>
</div>
</div>
</a>`)
});
bindClick(list.data)
}
function bindClick (data) {
$("article a").on('click', function() {
localStorage.setItem("info", JSON.stringify(data[$(this).index()]))
location.href="info.html"
})
}
getData()
})()

View File

@@ -0,0 +1,54 @@
(function(){
var InfoData = JSON.parse(localStorage.getItem("info"));
var LikeData = localStorage.getItem("like") == null
? []
: JSON.parse(localStorage.getItem("like"));
var status = true;
$(".info-header").css({
'background': `url(${InfoData.albums[0]}) no-repeat center center`,
'background-size': 'cover'
})
$('.info-title h3').text(InfoData.title)
$('.info-title p').text(InfoData.tags)
$('.item1 p').text(InfoData.ingredients)
$('.item2 p').text(InfoData.burden)
InfoData.steps.forEach((val,index) => {
$('.list-item ul').append(`<li>
<h2>${index == 0 ? InfoData.title+'步骤'+(index+1) : '步骤'+(index+1)}</h2>
<img src="${val.img}" alt="">
<p class="padding20">${val.step}</p>
</li>`)
});
$("#likefood").on('click', function () {
changeStatus()
if(status) {
LikeData.push(JSON.parse(localStorage.getItem("info")))
localStorage.setItem("like", JSON.stringify(LikeData))
$("#likefood").removeClass("icon-star-outline").addClass("icon-star")
} else {
YDUI.dialog.toast('您已经收藏过了', 'error', 1000);
}
});
function checkIsLike() {
changeStatus()
if(!status) {
$("#likefood").removeClass("icon-star-outline").addClass("icon-star")
}
}
function changeStatus () {
LikeData.forEach( val => val.id == InfoData.id ? status = false : status = true);
}
checkIsLike()
})()

View File

@@ -0,0 +1,63 @@
(function(){
var LikeData = localStorage.getItem("like") == null
? []
: JSON.parse(localStorage.getItem("like"));
function renderLike () {
if(LikeData.length == 0) {
$(".list-theme1").append("<p class='error'>没有收藏</p>")
} else {
LikeData.forEach(val => {
$(".list-theme1").append(`<a href="#" class="list-item">
<div class="list-img">
<img src="${val.albums[0]}">
</div>
<div class="list-mes">
<h3 class="list-title">${val.title}</h3>
</div>
</a>`)
});
}
}
function BindTagaClick() {
$("article a").on('click', function() {
localStorage.setItem("info", JSON.stringify(LikeData[$(this).index()]))
location.href="info.html"
});
var $as = $('#J_ActionSheet'), index = null;
$(".list-theme1 .list-item").on({
touchstart: function(e){
index = $(this).index()
setTimeout(function(){
$as.actionSheet('open');
},500);
}
});
$('.delete-like').on("click",function() {
LikeData.splice(index,1);
localStorage.setItem("like", JSON.stringify(LikeData));
$("article a").eq(index).remove();
$as.actionSheet('close');
if(LikeData.length == 0) {
$(".list-theme1").append("<p class='error'>没有收藏</p>")
}
})
$("#J_Cancel").on("click",function() {
$as.actionSheet('close');
})
}
renderLike()
BindTagaClick()
})()

View File

@@ -0,0 +1,12 @@
(function(){
$('.update').on('click', function () {
YDUI.dialog.loading.open('正在检查..');
setTimeout(function () {
YDUI.dialog.loading.close();
YDUI.dialog.toast('已经是最新版本', 'success', 1000);
}, 2000);
});
$('.contact').on('click', function () {
YDUI.dialog.toast('客服微信号cxy-monkey', 'success', 3000);
});
})()

View File

@@ -0,0 +1,37 @@
(function () {
var result = typeData.result;
console.log(result)
function renderLeft () {
result.forEach(function(val,index){
$(".type-left ul").append(` <li class="${ index == 0 ? 'active' : ''}">${val.name}</li>`)
});
}
function renderRight(index) {
$(".type-right ul").empty()
result[index].list.forEach(function(val){
$(".type-right ul").append(`<li> <a href="./classinfo.html?id=${val.id}">${val.name}</a> </li>`)
})
}
function bindLeftLiClick() {
if (returnId() != undefined) {
$(".type-left ul li").eq(returnId()).addClass("active").siblings().removeClass("active")
renderRight(returnId())
}
$(".type-left ul li").on('click',function(){
$(this).addClass("active").siblings().removeClass("active")
renderRight($(this).index())
})
}
renderLeft()
renderRight(0)
bindLeftLiClick()
})()

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,24 @@
function get (params) {
YDUI.dialog.loading.open('正在请求数据...');
$.ajax({
url: `http://127.0.0.1:3000${params.url}`,
type: 'GET',
data: params.data,
success: function (res) {
YDUI.dialog.loading.close();
if(res.resultcode == "200") {
params.callback(res.result)
} else {
YDUI.dialog.toast(res.reason, 'error', 3000);
}
},
error: function(err) {
YDUI.dialog.loading.close();
YDUI.dialog.toast('抱歉,请求失败,请稍后重试', 'error', 3000);
}
})
}
function returnId() {
return location.search.split("=")[1]
}

View File

@@ -0,0 +1,38 @@
/**
* YDUI 可伸缩布局方案
* rem计算方式设计图尺寸px / 100 = 实际rem 例: 100px = 1rem
*/
!function (window) {
/* 设计图文档宽度 */
var docWidth = 750;
var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = (function refreshRem () {
var clientWidth = docEl.getBoundingClientRect().width;
/* 8.55小于320px不再缩小11.2大于420px不再放大 */
docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
return refreshRem;
})();
/* 添加倍屏标识安卓倍屏为1 */
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS标识 */
doc.documentElement.classList.add('ios');
/* IOS8以上给html添加hairline样式以便特殊处理 */
if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
doc.documentElement.classList.add('hairline');
}
if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}(window);

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,44 @@
const express = require('express')
const app = express()
const request = require('request');
var Setting = {
appkey: 'c3954f8fddc58db4aabdbf05918afcff',
baseUrl: 'http://apis.juhe.cn/cook/'
}
app.all("*",function (req,res,next) {
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.get('/category', (req, res) => {
request(`${Setting.baseUrl}category?key=${Setting.appkey}`, function (error, response, body) {
res.json(JSON.parse(body))
});
});
app.get('/query', (req, res) => {
var menu = req.query.menu;
request(`${Setting.baseUrl}query?key=${Setting.appkey}&menu=${encodeURI(menu)}&rn=30&pn=3`, function (error, response, body) {
res.json(JSON.parse(body))
});
});
app.get('/index', (req, res) => {
var cid = req.query.cid,
pn = req.query.pn;
request(`${Setting.baseUrl}index?key=${Setting.appkey}&cid=${cid}&rn=30&pn=${pn}`, function (error, response, body) {
res.json(JSON.parse(body))
});
});
app.listen(3000, function(){
console.log('Example app listening on port 3000!')
})

View File

@@ -0,0 +1,16 @@
{
"name": "service",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node-dev index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"request": "^2.88.0"
}
}

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分类详情</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<!-- 引入YDUI样式 -->
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/ydui.css" />
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/classinfo.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="../js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
<header class="m-navbar navbar-fixed">
<a onclick="history.back()" class="navbar-item">
<i class="back-ico"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">分类详情</span>
</div>
</header>
<div class="g-scrollview">
<article class="m-list list-theme4">
</article>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../js/ydui.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/classinfo.js"></script>
</body>
</html>

View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/ydui.css" />
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="../js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
<header class="m-navbar navbar-fixed">
<a href="#" class="navbar-item">
<i class="icon-ucenter"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">美食家教</span>
</div>
</header>
<div class="g-scrollview">
<div class="m-slider" id="J_Slider">
<div class="slider-wrapper">
<div class="slider-item">
<a href="#">
<img src="../img/swiper-1.jpg">
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="../img/swiper-2.jpg">
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="../img/swiper-3.jpg">
</a>
</div>
</div>
<div class="slider-pagination"></div><!-- 分页标识 -->
</div>
<div class="type">
<ul>
<li>
<a href="./type.html?id=1">
<img src="../img/class_1.png" alt="">
<p>菜系</p>
</a>
</li>
<li>
<a href="./type.html?id=9">
<img src="../img/class_2.png" alt="">
<p>汤羹饮品</p>
</a>
</li>
<li>
<a href="./type.html?id=4">
<img src="../img/class_3.png" alt="">
<p>场景</p>
</a>
</li>
<li>
<a href="./type.html?id=7">
<img src="../img/class_4.png" alt="">
<p>主食</p>
</a>
</li>
</ul>
</div>
<article class="m-list list-theme2">
</article>
</div>
<footer class="m-tabbar tabbar-fixed">
<a href="./index.html" class="tabbar-item tabbar-active">
<span class="tabbar-icon">
<i class="icon-home"></i>
</span>
<span class="tabbar-txt">首页</span>
</a>
<a href="./type.html" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-type"></i>
</span>
<span class="tabbar-txt">分类</span>
</a>
<a href="./my.html" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-ucenter-outline"></i>
</span>
<span class="tabbar-txt">我的</span>
</a>
</footer>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../js/ydui.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/index.js"></script>
</body>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<!-- 引入YDUI样式 -->
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/ydui.css" />
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/info.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="../js/ydui.flexible.js"></script>
<script src="http://at.alicdn.com/t/font_1196533_0zdvcv4mb8wn.js"></script>
</head>
<body>
<div class="g-view">
<div class="g-scrollview">
<div class="header">
<svg class="icon" onclick="history.back()" aria-hidden="true">
<use xlink:href="#icon-fanhui-"></use>
</svg>
<i class="icon icon-star-outline" id="likefood"></i>
</div>
<div class="info-header">
</div>
<div class="info-title padding20">
<h3>........</h3>
<p>........</p>
</div>
<div class="info-cail padding20">
<div class="item1">
<h3>主料</h3>
<p>........</p>
</div>
<div class="item2">
<h3>辅料</h3>
<p>........</p>
</div>
</div>
<div class="list-item">
<ul>
</ul>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../js/ydui.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/info.js"></script>
</body>

View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/ydui.css" />
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/like.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="../js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
<header class="m-navbar navbar-fixed">
<a onclick="history.back()" class="navbar-item">
<i class="back-ico"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">收藏</span>
</div>
</header>
<div class="g-scrollview">
<article class="m-list list-theme1">
</article>
<div class="m-actionsheet" id="J_ActionSheet">
<a href="#" class="actionsheet-item delete-like">删除收藏</a>
<a href="javascript:;" class="actionsheet-action" id="J_Cancel">取消</a>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../js/ydui.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/like.js"></script>
</body>

View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/ydui.css" />
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/my.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="../js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
<div class="g-scrollview">
<div class="my">
<div class="my-header">
<h2>开启美食之旅</h2>
<img src="../img/my-log.png" alt="">
</div>
<div class="my-list">
<ul>
<li>
<a href="./like.html">
<p>我的收藏</p>
<i class="icon-star-outline"></i>
</a>
</li>
<li class="contact">
<p>联系我们</p>
<i class="icon-phone2"></i>
</li>
<li class="update">
<p>监测升级</p>
<i class="icon-download"></i>
</li>
</ul>
</div>
</div>
</div>
<footer class="m-tabbar tabbar-fixed">
<a href="./index.html" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-home"></i>
</span>
<span class="tabbar-txt">首页</span>
</a>
<a href="./type.html" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-type"></i>
</span>
<span class="tabbar-txt">分类</span>
</a>
<a href="./my.html" class="tabbar-item tabbar-active">
<span class="tabbar-icon">
<i class="icon-ucenter-outline"></i>
</span>
<span class="tabbar-txt">我的</span>
</a>
</footer>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../js/ydui.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/my.js"></script>
</body>

View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<!-- 引入YDUI样式 -->
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/ydui.css" />
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/type.css" />
<!-- 引入YDUI自适应解决方案类库 -->
<script src="../js/ydui.flexible.js"></script>
</head>
<body>
<div class="g-view">
<header class="m-navbar navbar-fixed">
<a href="#" class="navbar-item">
<i class="icon-ucenter"></i>
</a>
<div class="navbar-center">
<span class="navbar-title">分类</span>
</div>
</header>
<div class="g-scrollview">
<div class="type-main">
<div class="type-left left">
<ul>
</ul>
</div>
<div class="type-right left">
<ul>
</ul>
</div>
</div>
</div>
<footer class="m-tabbar tabbar-fixed">
<a href="./index.html" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-home"></i>
</span>
<span class="tabbar-txt">首页</span>
</a>
<a href="./type.html" class="tabbar-item tabbar-active">
<span class="tabbar-icon">
<i class="icon-type"></i>
</span>
<span class="tabbar-txt">分类</span>
</a>
<a href="./my.html" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-ucenter-outline"></i>
</span>
<span class="tabbar-txt">我的</span>
</a>
</footer>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 引入YDUI脚本 -->
<script src="../js/ydui.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/typeData.js"></script>
<script src="../js/type.js"></script>
</body>
</html>

View File

@@ -0,0 +1,15 @@
1参考网站https://m.meishij.net/html5/zuofa/fanqiedunxianniunan.html
实现详情页面样式。
2实现首页分类到分类页面的跳转 (完成)
新建页面,实现点击小分类展现分类列表(下拉加载)(完成)
详情页面的收藏
1拒绝多次点击的重复收藏 (完成)
2重复收藏给予弹窗提示 (完成)
3从其他页面重新进入当前详情页的时候应该对已经收藏的继续不可以点击没有收藏可以点击 (完成)
实现我的页面,和收藏管理 (完成)