深圳市易企盈科技有限公司（套题）
| 选择题 | 填空题 | 问答题 | 编程题 | 试题难度 |
|---|---|---|---|---|
| 0 | 0 | 0 | 1 | 比较难 |
编程题
1、后端接口（允许跨域） 请求地址：http://3n4w.jingzhunfenxiao.com/sysapi/exam2.php 请求方式：get 请求参数：无 访问数据：json （5个随机数） 要求： 1、页面顶部呈现接口返回的随机数 2、对随机数进行排序，页面中间区域呈现排序结果 3、点击底部正序，逆序按钮可从新排序 4、从新排序颜色对应 提示： 1、可使用jquery库 2、可使用eval()函数 3、颜色对应，比如25对应蓝色，排序后25还是蓝色
<!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 type="text/css">
ul,
li {
list-style: none;
padding: 0;
}
.box {
display: flex;
justify-content: space-around;
}
.circle {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
text-align: center;
margin: auto;
}
.lblColor{
font-size: 12px;
}
.circle,
.lblColor {
transition: all .5s ease-in-out;
}
/* 美化按钮 */
button{
margin: 0;
border: 0;
background-color:#409EFF;
color: #fff;
padding: 10px 20px;
outline: none;
border-radius: 3px;
}
</style>
</head>
<body>
<ul class="box">
<li class="box-item">
<div class="circle"></div><label class="lblColor"></label>
</li>
<li class="box-item">
<div class="circle"></div><label class="lblColor"></label>
</li>
<li class="box-item">
<div class="circle"></div><label class="lblColor"></label>
</li>
<li class="box-item">
<div class="circle"></div><label class="lblColor"></label>
</li>
<li class="box-item">
<div class="circle"></div><label class="lblColor"></label>
</li>
</ul>
<div>
<button id=btnAsc>正序</button>
<button id="btnDesc">逆序</button>
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script>
$(function () {
var api='http://3n4w.jingzhunfenxiao.com/sysapi/exam2.php'
//定义所需变量
var colors = ['#1E90FF', '#2F4F4F', '#FFA500', '#BDB76B', '#800080'],
boxs = document.getElementsByClassName('circle'),
lblColor2 = document.getElementsByClassName('lblColor'),
mapColors = {}, //颜色映射结果
numbers = [];
//ajax请求
$.get(api, function (res) {
numbers = res;
mapColor();
render();
}, 'json')
//映射颜色
function mapColor() {
var len = numbers.length;
for (var i = 0; i < len; i++) {
var num = numbers[i]
var color = colors[i]
mapColors[num] = color//数字与颜色对应
}
}
//渲染
function render() {
var len = numbers.length;
for (var i = 0; i < len; i++) {
var num = numbers[i]; //数字
var box = boxs[i] //圆
var color = mapColors[num] //数字对应的颜色
var lblColor = lblColor2[i] //底部文字
box.innerText = num //圆中心的数字
box.style.backgroundColor = color //圆的背景颜色
lblColor.innerText = color //底部文字
lblColor.style.color = color //底部文字颜色
}
}
$('#btnAsc').click(function () {
//正序处理
numbers.sort(function (a, b) {
return a - b;
})
render();
});
$('#btnDesc').click(function () {
//逆序处理
numbers.sort(function (a, b) {
return b - a;
})
render();
});
});
</script>
</body>
</html>