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

蓝桥云课-声网编程赛(声网编程竞赛7月专场)题解_第1张图片
比赛题目快速链接: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)";
    
}

  1. 调皮的模态框(考点:事件冒泡 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>
  1. 由文本溢出引发的“不友好体验(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>
  1. 下次“绕”过你(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 `
        
${item.title} ${item.last}
更多 删除记录 继续实验
`
; }) .join("")}
`
; // 将 HTML 模板插入到元素中,请勿删除 document.querySelector(".container").innerHTML = html; } </script>
  1. 你能看出有多少位吗?(考察千分位,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>
  1. 为图片添加景深效果(css:filter 毛玻璃效果)
    <script>
      // 请在这里编写代码,根据需求,使得图片达到景深效果
	  // 这里打开f12看样式代码可以看出所有的img图层都加上了 filter: blur(2px); 的样式。
	  document.querySelector('.img1').style.filter = "blur(0px)"
	  document.querySelector('.img2').style.filter = "blur(0px)"
    </script>
  1. 验证密码强度
<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>
  1. 时间转换工具(考察对象子类型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>
  1. 表格数据转换(考察: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>
  1. 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>

你可能感兴趣的:(javascript,前端,webpack)