第十三届蓝桥杯Web模拟赛题解(3)

background-color: rgb(249,249,249);

}

.tabtitle h3{

line-height: 100px;

font-size: 24px;

font-weight: 400;

color: #000;

float: left;

}

.tabtitle h4{

line-height: 100px;

font-weight: 500;

font-size: 24px;

color: #cccccc;

float: right;

}

/* list */

.list{

position: relative;

background-color: rgb(249,249,249);

height: 1718px;

padding-bottom: 30px;

}

.list ul{

list-style: none;

}

.list li{

/* display: inline-block; */

margin-left: 30px;

margin-bottom: 20px;

padding-top: 20px;

float: left;

background-color: white;

}

.list img{

display: block;

margin-top: 20px;

width: 260px;

height: 260px;

margin: auto;

}

.list a{

display: block;

width: 300px;

height: 374px;

}

.list p{

width: 260px;

font-size: 14px;

line-height: 25px;

color: #333333;

margin: auto;

}

.more{

position: absolute;

bottom: 30px;

width: 960px;

height: 62px;

left: 32px;

background-color: #e8eef2;

text-align: center;}

.more a{

display: block;

width: 100%;

line-height: 62px;

font-size: 20px;

color: #59abdf;

}

/* footer */

.footer{

height: 265px;

background-color: #e5e5e5;

}

.footerBox{

width: 960px;

padding: 32px;

}

.footerL{

width: 710px;

height: 210px;

float: left;

}

.footerL p{

font-size: 14px;

line-height: 25px;

margin-bottom: 15px;

color: #000;

}

.footerR{

float: right;

text-align: center;

}

.footerR img{

width: 141px;

height: 152px;

}

响应式 Gulp 中文网

---

天气预报查询

---

function getweather() {

//TODO：请补充代码

$.ajax({

type: “get”,

url: “js/weather.json”,

data: {},

dataType: “json”,

success: function (data) {

console.log(data.result)

$(“#Monday img”).attr(‘src’,data.result[0].weather_icon);

$(“#Monday .item-mess div:nth-child(1)”).prepend(data.result[0].weather);

$(“#Monday .item-mess div:nth-child(2)”).prepend(data.result[0].temperature);

$(“#Monday .item-mess div:nth-child(3)”).prepend(data.result[0].winp);

$(“#Monday .item-mess div span:nth-child(1)”).prepend(data.result[0].days);

$(“#Monday .item-mess div span:nth-child(2)”).prepend(data.result[0].week);

$(“#Tuesday img”).attr(‘src’,data.result[1].weather_icon);

$(“#Tuesday .item-mess div:nth-child(1)”).prepend(data.result[1].weather);

$(“#Tuesday .item-mess div:nth-child(2)”).prepend(data.result[1].temperature);

$(“#Tuesday .item-mess div:nth-child(3)”).prepend(data.result[1].winp);

$(“#Tuesday .item-mess div span:nth-child(1)”).prepend(data.result[1].days);

$(“#Tuesday .item-mess div span:nth-child(2)”).prepend(data.result[1].week);

$(“#Wednesday img”).attr(‘src’,data.result[2].weather_icon);

$(“#Wednesday .item-mess div:nth-child(1)”).prepend(data.result[2].weather);

$(“#Wednesday .item-mess div:nth-child(2)”).prepend(data.result[2].temperature);

$(“#Wednesday .item-mess div:nth-child(3)”).prepend(data.result[2].winp);

$(“#Wednesday .item-mess div span:nth-child(1)”).prepend(data.result[2].days);

$(“#Wednesday .item-mess div span:nth-child(2)”).prepend(data.result[2].week);

$(“#Thursday img”).attr(‘src’,data.result[3].weather_icon);

$(“#Thursday .item-mess div:nth-child(1)”).prepend(data.result[3].weather);

$(“#Thursday .item-mess div:nth-child(2)”).prepend(data.result[3].temperature);

$(“#Thursday .item-mess div:nth-child(3)”).prepend(data.result[3].winp);

$(“#Thursday .item-mess div span:nth-child(1)”).prepend(data.result[3].days);

$(“#Thursday .item-mess div span:nth-child(2)”).prepend(data.result[3].week);

$(“#Friday img”).attr(‘src’,data.result[4].weather_icon);

$(“#Friday .item-mess div:nth-child(1)”).prepend(data.result[4].weather);

$(“#Friday .item-mess div:nth-child(2)”).prepend(data.result[4].temperature);

$(“#Friday .item-mess div:nth-child(3)”).prepend(data.result[4].winp);

$(“#Friday .item-mess div span:nth-child(1)”).prepend(data.result[4].days);

$(“#Friday .item-mess div span:nth-child(2)”).prepend(data.result[4].week);

$(“#Saturday img”).attr(‘src’,data.result[5].weather_icon);

$(“#Saturday .item-mess div:nth-child(1)”).prepend(data.result[5].weather);

$(“#Saturday .item-mess div:nth-child(2)”).prepend(data.result[5].temperature);

$(“#Saturday .item-mess div:nth-child(3)”).prepend(data.result[5].winp);

$(“#Saturday .item-mess div span:nth-child(1)”).prepend(data.result[5].days);

$(“#Saturday .item-mess div span:nth-child(2)”).prepend(data.result[5].week);

$(“#Sunday img”).attr(‘src’,data.result[6].weather_icon);

$(“#Sunday .item-mess div:nth-child(1)”).prepend(data.result[6].weather);

$(“#Sunday .item-mess div:nth-child(2)”).prepend(data.result[6].temperature);

$(“#Sunday .item-mess div:nth-child(3)”).prepend(data.result[6].winp);

$(“#Sunday .item-mess div span:nth-child(1)”).prepend(data.result[6].days);

$(“#Sunday .item-mess div span:nth-child(2)”).prepend(data.result[6].week);

}

})

}

getweather();

实现卡号绑定功能

---

function bind(cardno, password) {

//Todo:补充代码.

var flag = false

$.ajax({

url: “./cardnolist.json”, //json文件位置

type: “GET”, //请求方式为get

dataType: “json”, //返回数据格式为json

success: function (data) { //请求成功完成后要执行的方法

$.each(data.cardnolist, function (i, item) {

// var str = ‘

姓名:’ + item.name + ‘性别：’ + item.sex + ‘

’;

// document.write(str);

if (cardno == item.cardno && password == item.password) {

// $(“#tip2”).toggleClass(‘fade’, ‘show’);

$(“#tip1”).toggleClass(‘fade’, ‘show’);

flag = true

break;

}

});

if(!flag){

$(“#tip1”).toggleClass(‘fade’, ‘show’);

$(“#tip2”).toggleClass(‘fade’, ‘show’);

}

},

error: function () {

console.log(“error”);

$(“#tip1”).toggleClass(‘fade’, ‘show’);

$(“#tip2”).toggleClass(‘fade’, ‘show’);

}

})

}

$(document).ready(function () {

$(“#btnsubmit”).click(function () {

//卡号

let cardno = $(“#exampleInputCardno”).val();

//密码

let password = $(“#exampleInputPassword”).val();

bind(cardno, password);

});

});

知乎首页数据动态化

---

class=“list-item”

v-for=“item in datalist”

:key=“item.id”

<img

class=‘list-pic’

:src=“item.imgUrl”

/>

{{item.title}}

{{item.desc}}