第十三届蓝桥杯Web模拟赛题解
第十三届蓝桥杯Web模拟赛题解
修复网站显示问题
修改css引入
修复注册验证问题
正则表达式
/^(13[4-9])|(15([0-2]))|(186)\d{8}$/
封装函数实现个人所得税计算器
function cal(salary) {
// TODO: 在此处补充代码
var number = 0;
if (salary <= 5000) {
number = 0;
} else if (salary > 5000 && salary <= 9000) {
number = (salary-5000) * 0.03;
} else if (salary > 9000 && salary <= 15000) {
number = (salary-5000) * 0.05;
} else if (salary > 15000) {
number = (salary-5000) * 0.1;
}
return number;
}
Flex 经典骰子布局
制作网站首页
*{
padding: 0;
margin: 0;
text-decoration: none;
}
body{
background-color: black;
}
.headerbox,.banner,.tabtitle,.list,.footer{
width: 1024px;
margin: auto;
}
/* header */
.headerbox{
height: 78px;
background-color: white;
}
.navbox{
/* height: 78px; */
padding: 23px;
}
.navbox h1{
color: #0099f2;
float: left;
}
.navright{
float: right;
}
.on{
display: inline-block;
width: 120px;
height: 32px;
color: #0099f2;
background-color: #f0f9ff;
line-height: 32px;
text-align: center;
}
.on+a{
display: inline-block;
width: 120px;
height: 32px;
color:black;
line-height: 32px;
text-align: center;
}
/* banner */
.banner{
position: relative;
overflow: hidden;
height: 460px;
background-color: #008bed;
}
.container{
width: 964px;
height: 430px;
position: absolute;
bottom: 0px;
padding: 30px 30px 0px 30px;
}
.container img{
position: absolute;
bottom: -15px;
}
.content {
width: 43%;
padding-top: 100px;
float: right;
}
.content h2{
color:#fdfdfd;
font-size: 40px;
line-height: 40px;
padding-bottom: 10px;
}
.info{
width: 100%;
font-size: 16px;
line-height: 26px;
color: #99d1f8;
}
/* tabtitle */
.tabtitle{
width: 960px;
height: 100px;
padding-left: 32px;
padding-right: 32px;
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);
});
});
知乎首页数据动态化
![]()
{{item.title}}
{{item.desc}}
RESTful API 开发
app.get('/list', function(req, res) {
fs.readFile(path.resolve(__dirname,'./users.json'), 'utf8', function(err, data) {
res.send(data)
});
})