蓝桥云课-声网编程赛（声网编程竞赛7月专场）题解
比赛题目快速链接：https://www.lanqiao.cn/contests/lqENT02/challenges/
- 让时钟转起来（考点：css：transform）
// index.js
function main() {
// 题解前理解一个东西：
// 时针每过一小时，转30° 原因，360/12 = 30°
// 分针每过一分钟，转30° 原因，360/60 = 6°
// 秒针每过一秒，转6°。
// 偏移量计算：值 / 分母 * 每过一段度数，例如时偏移量= 分钟值 / 60分母 * 30°
const nowTime=new Date();
const nowHoure=nowTime.getHours(); // 当前小时
const nowMinute=nowTime.getMinutes(); // 当前分钟
const nowSecond=nowTime.getSeconds(); // 当前秒
const houreDeg=(nowMinute/60)*30; // 计算时钟偏移量
const minuteDeg=(nowSecond/60)*6; // 计算当前分钟偏移量
oHoure.style.transform="rotate("+ (nowHoure * 30+houreDeg) + "deg)"; // 转动角度+偏移量就是当前位置
oMinute.style.transform="rotate("+ (nowMinute * 6+ minuteDeg) + "deg)";
// 请勿删除上方代码
// 请在下方补充代码，使得时钟的秒针可以转动起来,秒钟一秒转6°
oSecond.style.transform="rotate("+ (nowSecond * 6) + "deg)";
}
- 调皮的模态框（考点：事件冒泡 event.stopPropagation()）
<script>
// 请在这里补充代码，根据需求解决事件冒泡带来的问题，实现模态框的显隐操作。
let baoming = document.querySelector("#myModal")
function handleClick(e) {
baoming.style.display = 'block'
event.stopPropagation()
}
function handleOk(e) {
baoming.style.display = 'none'
event.stopPropagation()
}
</script>
- 由文本溢出引发的“不友好体验（css文本溢出处理，文本溢出处理的三个重要的css属性：overflow、text-overflow、line-clamp）
<script>
// 请在下方补充代码，使得文本溢出 2 行时使用省略号
var text = document.querySelector('.more2_info_name').style='overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp:2;'
</script>
- 下次“绕”过你（localStorage axios）
<script>
// 请在修改或填补下方代码：
// 请实现：在请求数据之前，判断 localStorage 中是否存有名为 historyData 的数据；
// 1. 没有，则发送请求获取数据；2. 有，则从 localStorage 中获取。
const data = localStorage.getItem("historyData");
if (data) {
renderHtml(JSON.parse(data));
} else {
// 请求数据，请勿删除
axios
.get("https://labfile.oss.aliyuncs.com/courses/9203/historyData.json")
.then((res) => {
if (res.status === 200) {
localStorage.setItem(
"historyData",
JSON.stringify(res.data.data)
);
renderHtml(res.data.data);
}
});
}
function renderHtml(data) {
// 将数据写入 HTML 模板，请勿删除
const html = `${data
.map(function (item, index) {
return `
`;
})
.join("")}`;
// 将 HTML 模板插入到元素中，请勿删除
document.querySelector(".container").innerHTML = html;
}
</script>
- 你能看出有多少位吗？（考察千分位，Number.toLocaleString() 可以实现快速千分位，但做时我没有用）
<script>
$(function(){
$('.infor-sub').click(function(e){
$('.layer').hide();
$('.form').hide();
e.preventDefault(); //阻止表单提交
})
$('.shuru').click(function(e){
$('.layer-content').animate({
bottom: 0
}, 200)
e.stopPropagation();
// let value = document.getElementById('input-box').innerText
})
$('.wrap').click(function(){
$('.layer-content').animate({
bottom: '-200px'
}, 200)
})
$('.form-edit .num').click(function(){
var oDiv = document.getElementById("input-box");
let value = oDiv.innerText + this.innerText
// 简单的提取 value，接下来对 value 进行处理
let result = numChange(value)
oDiv.innerText = result
})
$('#remove').click(function(){
var oDiv = document.getElementById("input-box");
let value = oDiv.innerText
value = value.substring(0, value.length-1)
// 简单的提取 value，接下来对 value 进行处理
let result = numChange(value)
oDiv.innerText = result
})
})
function numChange(value) {
value = value.replaceAll(',', '')
let result = ''
let arrValue = value.split('').reverse()
arrValue.forEach((item, index) => {
if ((index+1) %3 == 0 && index !== arrValue.length-1) {
result = result + item + ','
} else {
result+=item
}
})
return result.split('').reverse().join('')
}
</script>
- 为图片添加景深效果（css：filter 毛玻璃效果）
<script>
// 请在这里编写代码，根据需求，使得图片达到景深效果
// 这里打开f12看样式代码可以看出所有的img图层都加上了 filter: blur(2px); 的样式。
document.querySelector('.img1').style.filter = "blur(0px)"
document.querySelector('.img2').style.filter = "blur(0px)"
</script>
- 验证密码强度
<script>
// 请在这里补充代码，实现密码强度的验证
let resultDom = document.querySelector('.result')
let passwordField = document.getElementById('passwordField')
let btn = document.querySelector('.btn-primary')
// 验证点击事件
btn.addEventListener('click', function() {
let value = passwordField.value
console.log(value)
// 最终校验结果
var result = ''
// 验证校验
if (value.length > 8) {
result = '低'
Rule2(value)
} else {
result = '无效'
}
// 中级
function Rule2(value) {
let arr = value.split('')
let rule1 = false // 必须要有一个小写字母
let rule2 = false // 必须要有一个数字
for (let i = 0; i < arr.length; i++) {
let item = arr[i]
if (item.charCodeAt() >= 97 && item.charCodeAt() <= 122) {
rule1 = true
}
if (Number(item) == item) {
rule2 = true
}
}
if (rule1 && rule2) {
result = '中'
Rule3(value)
}
}
// 高级
function Rule3(value) {
let arr = value.split('')
let rule1 = false // 必须要有一个大写字母
let rule2 = false // 必须要有一个特殊字符
for (let i = 0; i < arr.length; i++) {
let item = arr[i]
if (item.charCodeAt() >= 65 && item.charCodeAt() <= 90) {
rule1 = true
}
if (item.charCodeAt() < 48 || item.charCodeAt() > 57 ) {
rule2 = true
}
}
if (rule1 && rule2) {
result = '高'
}
}
resultDom.innerText = result
}, true)
</script>
- 时间转换工具（考察对象子类型Data的使用）
<script>
new Vue({
el: '#app',
data: function() {
return {
formInline:{
timeStamp: null, // 时间戳
date: '' // 时间选择框的值
}
}
},
mounted() {
},
methods: {
handleTransform() {
let date = this.formInline.date // 时间
let timeStamp = this.formInline.timeStamp // 时间戳
if (date && !timeStamp) {
let newValue = new Date(date)
this.formInline.timeStamp = newValue.getTime()
}
if (!date && timeStamp) {
timeStamp = new Number(timeStamp)
let d = new Date(timeStamp)
this.formInline.date = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
// console.log('转换', s)
}
}
}
})
</script>
- 表格数据转换（考察：axios使用，element: Table组件formatter属性）
<template>
...
<el-table-column
prop="sex"
label="性别"
width="180"
:formatter="sexFormatter"
>
</el-table-column>
<el-table-column
prop="datetime"
label="注册时间"
width="180"
:formatter="dataFormatter"
>
</el-table-column>
<el-table-column
prop="vip"
label="会员"
:formatter="vipFormatter"
>
</el-table-column>
</template>
<script>
new Vue({
el: '#app',
data: function() {
return {
tableData: [],
}
},
mounted() {
this.initData()
},
methods: {
initData() {
axios({ url: './fetchTableData.json' }).then(res => {
this.tableData = res.data.data
})
},
dataFormatter(row, column, cellValue, index) {
let valueArr = row.datetime.split('')
valueArr.splice(4, 0, '-')
valueArr.splice(7, 0, '-')
return valueArr
},
sexFormatter(row, column, cellValue, index) {
return row.sex ? '男' : '女'
},
vipFormatter(row, column, cellValue, index) {
return row.vip ? '是' : '否'
},
}
})
</script>
- URL 参数解析并高亮文本内容
<script>
// 请你在 script 标签中编写代码，实现根据 URL 中的关键字为内容中包含关键字的文本添加 em 标签，以表示高亮。
// 为按钮添加点击事件
let input = document.getElementsByTagName('input')
input[1].addEventListener('click', function () {
let queryValue = getValue(input[0].value)
clearEm()
search(queryValue)
}, true)
// 1. 提取url中的wd字段的关键字。
function getValue(url) {
let left = url.indexOf('wd')
let right = url.indexOf('&', left)
console.log(url, left, right)
let value = url.slice(left + 3, right) // wd= , 3 个字符
return value
}
// 2. 获取元素内容，高亮后插回dom。
function search(value) {
let textDomArr = document.querySelectorAll('.c-title') // 标题高亮
let contextDomArr = document.querySelectorAll('.content-right') // 内容高亮
let spanDomArr = document.querySelectorAll('.c-color-gray') // 链接高亮
textDomArr.forEach(item => {
let temp = item.innerHTML.replaceAll(value, `${value}`)
item.innerHTML = temp
})
contextDomArr.forEach(item => {
let temp = item.innerHTML.replaceAll(value, `${value}`)
item.innerHTML = temp
})
spanDomArr.forEach(item => {
let temp = item.innerHTML.replaceAll(value, `${value}`)
item.innerHTML = temp
})
}
// 清除高亮
function clearEm() {
let textDomArr = document.querySelectorAll('.c-title')
let contextDomArr = document.querySelectorAll('.content-right')
let spanDomArr = document.querySelectorAll('.c-color-gray')
textDomArr.forEach(item => {
let temp = item.innerHTML.replaceAll('', '').replaceAll('', '')
item.innerHTML = temp
})
contextDomArr.forEach(item => {
let temp = item.innerHTML.replaceAll('', '').replaceAll('', '')
item.innerHTML = temp
})
spanDomArr.forEach(item => {
let temp = item.innerHTML.replaceAll('', '').replaceAll('', '')
item.innerHTML = temp
})
}
</script>