蓝桥云课-声网编程赛（声网编程竞赛7月专场）题解

比赛题目快速链接：https://www.lanqiao.cn/contests/lqENT02/challenges/

1. 让时钟转起来（考点：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)";}

2. 调皮的模态框（考点：事件冒泡 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>

3. 由文本溢出引发的“不友好体验（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>

4. 下次“绕”过你（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 `<div id="course-9203" class="course-item course-info" data-v-062d7aaa=""><div data-v-3ba6c69d="" class="row"><div data-v-3ba6c69d="" class="col-lg-4"><div data-v-3ba6c69d="" class="course-img"><a data-v-3ba6c69d="" :href="item.href" class="block" target="_blank"><img data-v-3ba6c69d="" src="${item.imgSrc}" height="160" alt="${item.imgSrc}"></a> <span data-v-23ac173c="" data-v-3ba6c69d=""><span data-v-23ac173c=""></span></span></div></div><div data-v-3ba6c69d="" class="col-lg-6"><div data-v-3d67ec2c="" data-v-3ba6c69d="" class="course-title"><span data-v-3d67ec2c="">${item.title}<span data-v-3d67ec2c="">${item.last}</span></div><div data-v-3ba6c69d="" class="course-related"><span data-v-3ba6c69d="">${item.report}篇实验报告<!----></span> <span data-v-3ba6c69d="">${item.question}个提问<!----></span></div></div><div data-v-3ba6c69d="" class="col"><div data-v-4b66fd24="" data-v-3ba6c69d="" class="operate"><span data-v-4b66fd24="" class="operate-top"><span data-v-4b66fd24="" class="more"> 更多 </span> <span data-v-4b66fd24="" class="delete">删除记录</span></span> <a data-v-4b66fd24="" href="/courses/9203/learning" class="operate-bottom" target="_blank">继续实验</a></div></div></div></div>`;}).join("")}`;// 将 HTML 模板插入到元素中，请勿删除document.querySelector(".container").innerHTML = html;}</script>

5. 你能看出有多少位吗？（考察千分位，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.innerTextvalue  = 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>

6. 为图片添加景深效果（css：filter 毛玻璃效果）

    <script>// 请在这里编写代码，根据需求，使得图片达到景深效果// 这里打开f12看样式代码可以看出所有的img图层都加上了 filter: blur(2px); 的样式。document.querySelector('.img1').style.filter = "blur(0px)"document.querySelector('.img2').style.filter = "blur(0px)"</script>

7. 验证密码强度

<script>// 请在这里补充代码，实现密码强度的验证let resultDom = document.querySelector('.result')let passwordField = document.getElementById('passwordField')let btn  = document.querySelector('.btn-primary')// 验证点击事件btn.addEventListener('click', function() {let value = passwordField.valueconsole.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>

8. 时间转换工具（考察对象子类型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>

9. 表格数据转换（考察：axios使用，element: Table组件formatter属性）

<template>
...<el-table-columnprop="sex"label="性别"width="180":formatter="sexFormatter"></el-table-column><el-table-columnprop="datetime"label="注册时间"width="180":formatter="dataFormatter"></el-table-column><el-table-columnprop="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>

10. 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, `<em>${value}</em>`)item.innerHTML = temp})contextDomArr.forEach(item => {let temp = item.innerHTML.replaceAll(value, `<em>${value}</em>`)item.innerHTML = temp})spanDomArr.forEach(item => {let temp = item.innerHTML.replaceAll(value, `<em>${value}</em>`)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('<em>', '').replaceAll('</em>', '')item.innerHTML = temp})contextDomArr.forEach(item => {let temp = item.innerHTML.replaceAll('<em>', '').replaceAll('</em>', '')item.innerHTML = temp})spanDomArr.forEach(item => {let temp = item.innerHTML.replaceAll('<em>', '').replaceAll('</em>', '')item.innerHTML = temp})}
</script>