©2020-2024 ioDraw All rights reserved
<>第十三届蓝桥杯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 经典骰子布局
<style> body { margin: 10px 0 0 0; display: flex; justify-content: space-around
; } body > div { display: flex; width: 100px; height: 100px; border-radius: 4px;
border: 2px solid red; box-sizing: border-box; } p { width: 15px; height: 15px;
background-color: black; border-radius: 50%; margin: 2px; } .div1 {
justify-content: center; align-items: center; } .div2 { justify-content:
space-around; flex-direction: column; align-items: center } .div3{
justify-content: space-around; flex-direction: column } .div3 div{ display: flex
; justify-content:space-around; flex-basis: auto; } .div3 p:nth-child(1) {
align-self: flex-start; } .div3 p:nth-child(2) { align-self: center; } .div3
p:nth-child(3) { align-self: flex-end; } /*todo:请补全剩余骰子布局代码*/ .div8{
justify-content: space-around; flex-direction: column } .div8 div{ display: flex
; justify-content:space-between; flex-basis: auto; } .div9{ justify-content:
space-around; flex-direction: column } .div9 div{ display: flex; justify-content
: space-around; flex-basis: auto; } .div7{ justify-content: space-around;
flex-direction: column } .div7 div{ display: flex; justify-content: space-around
; flex-basis: auto; } .div6{ justify-content: space-around; flex-direction:
column} .div6 div{ display: flex; justify-content: space-around; flex-basis:
auto; } .div5{ justify-content: space-around; flex-direction: column } .div5 div
{ display: flex; justify-content: space-around; flex-basis: auto; } .div4{
justify-content: space-around; flex-direction: column } .div4 div{ display: flex
; justify-content: space-around; flex-basis: auto; } </style>
<>制作网站首页
*{ 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 中文网
<style media="screen"> @media screen and (max-width: 1400px) { .ull li { width:
50%; } } @media screen and (max-width: 1400px) and (min-width: 900px) { .ull li
{ width: 50vw; } main ul li:nth-child(even) { margin-left: 0; } nav .content {
margin: 0 auto; width: 100% !important; overflow: hidden; } } @media screen and
(max-width: 900px) { .ull li { width: 100%; } .cla { display: none; } main ul
li:nth-child(even) { margin-left: 0 !important; } } body { font-family:
'Helvetica Neue', 'Helvetica', 'Lucida Grande', 'Arial', 'Hiragino Sans GB',
'Microsoft Yahei', 'WenQuanYi Micro Hei', 'sans-serif'; font-weight: normal; }
.container > nav { position: fixed; top: 0; left: 0; width: 100%; height: 51px;
background-color: #cd4749; } main header { height: 427px; background-color:
#cd4749; text-align: center; } main header img { margin-top: 118px; width: 200px
; } main header h3 { color: white; margin-top: 16px; font-size: 21px;
font-weight: 200; } main header div:last-child { margin-top: 45px; } main
header span { color: #efbfbf; box-shadow: inset 0 0 0 2px #efbfbf; border-radius
: 2px; background-color: transparent; padding: 10px 16px; font-size: 18px; }
main header span:hover { color: white; box-shadow: inset 0 0 0 2px white;
border-color: white; } main section { width: 1137px; margin: 74px auto 0; }
main ul { /*overflow: hidden;*/ } main ul li { float: left; width: 49%; height:
144px; } main ul li:nth-child(even) { margin-left: 2%; } main li h3 {
margin-bottom: 21px; font-size: 30px; font-weight: 200; } main li p {
margin-bottom: 57px; font-size: 18px; line-height: 1.4em; } .container footer {
font-size: 14px; margin-top: 60px; text-align: center; color: #aaa; } footer p {
margin-bottom: 10px; } footer a { color: #aaa; } </style>
<>天气预报查询
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 = '<div>姓名:' + item.name + '性别：' + item.sex +
'</div>'; // 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)
; }); });
<>知乎首页数据动态化
<template> <div class="list"> <div class="list-item" v-for="item in datalist"
:key="item.id" > <img class='list-pic' :src="item.imgUrl" /> <div
class="list-info"> <p class='title'>{{item.title}}</p> <p class='desc'>{
{item.desc}}</p> </div> </div> </div> </template> <script> import axios from
'axios' export default { data () { return { datalist: [] }; }, mounted () {
axios.get('/static/data/list.json').then((res) => { this.datalist =
res.data.data.listInfo }) } }; </script> <style scoped> .list-item { padding:
20px 0; overflow: hidden; border-bottom: 1px solid #dcdcdc; } .list-pic {
float: right; width: 125px; height: 100px; display: block; border-radius: 4px;
} .list-info { width: 500px; float: left; } .title { padding: 10px 0;
font-size: 18px; font-weight: bold; color: #333; } .desc { line-height: 22px;
font-size: 13px; color: #999; } </style>
<>RESTful API 开发
app.get('/list', function(req, res) { fs.readFile(path.resolve(__dirname,
'./users.json'), 'utf8', function(err, data) { res.send(data) }); })