【JavaScript】四个常用功能/案例:表格排序 | 替换链接 | 倒计时 | 双色球机选一注

CSDN话题挑战赛第2期
参赛话题:学习笔记

🖥️ NodeJS专栏:Node.js从入门到精通
🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述)
🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结)
🧑‍💼 个人简介:大三学生,一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️!
🏆分享博主自用牛客网🏆:一个非常全面的面试刷题求职网站,点击跳转🍬


前言

最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题专项练习面试题库在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网

牛客网牛客网
在这里插入图片描述在这里插入图片描述

本篇文章所有示例来自于牛客网题库/在线编程/JS篇,这些都是前端开发中常用的功能,借此记录一下刷题过程,巩固基础!

一、表格排序

描述:

系统会在tbody中随机生成一份产品信息表单,如html所示。

请完成 sort 函数,根据参数的要求对表单所有行进行重新排序。

1、typeidprice或者sales,分别对应第1 ~ 3列
2、orderasc或者descasc表示升序,desc为降序
3、例如 sort('price', 'asc') 表示按照price列从低到高排序
4、所有表格内容均为数字,每一列数字均不会重复
5、不要使用第三方插件

方案:

HTML:

<table>
   <thead>
       <tr>
           <th>id</th>
           <th>price</th>
           <th>sales</th>
       </tr>
   </thead>
   <tbody id="jsList">
       <tr>
           <td>1</td>
           <td>10.0</td>
           <td>800</td>
       </tr>
       <tr>
           <td>2</td>
           <td>30.0</td>
           <td>600</td>
       </tr>
       <tr>
           <td>3</td>
           <td>20.5</td>
           <td>700</td>
       </tr>
       <tr>
           <td>4</td>
           <td>40.5</td>
           <td>500</td>
       </tr>
       <tr>
           <td>5</td>
           <td>60.5</td>
           <td>300</td>
       </tr>
       <tr>
           <td>6</td>
           <td>50.0</td>
           <td>400</td>
       </tr>
       <tr>
           <td>7</td>
           <td>70.0</td>
           <td>200</td>
       </tr>
       <tr>
           <td>8</td>
           <td>80.5</td>
           <td>100</td>
       </tr>
   </tbody>
</table>
<!-- 测试 -->
<button onclick="sort('price', 'asc')">测试</button>

CSS:

body,
html {
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #000000;
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

thead {
    background: #3d444c;
    color: #ffffff;
}

td,
th {
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
function sort(type, order) {
   let tb = document.getElementById("jsList");
   // console.log(tb.children);
   // tb.children是HTMLCollection类型的伪数组,不算真正意义上的数组,不能直接使用Array原型上的sort方法
   // 所以这里通过Array.prototype.slice.call将tb.children转换成一个真正的数组
   const arr = Array.prototype.slice.call(tb.children)
   // 也可以使用以下方法
   // const arr = Array.from(tb.children)
   // const arr = [...tb.children]

   // 排序
   arr.sort((a, b) => {
       // asc升序,desc降序
       if (order === 'asc') {
           return parseFloat(a.children[thIndex[type]].innerHTML) - parseFloat(b.children[thIndex[type]].innerHTML)
       } else if (order === "desc") {
           return parseFloat(b.children[thIndex[type]].innerHTML) - parseFloat(a.children[thIndex[type]].innerHTML)
       }


   })
   arr.forEach((item) => {
       tb.appendChild(item)
   })
}

// 配置type字段与在tr中的索引的映射关系
const thIndex = {
   id: 0,
   price: 1,
   sales: 2
}

这里使用Array.prototype.slice.call将伪数组转换为真正的数组的原理是:调用Array原型上的slice方法时通过call方法将this指向更改为指向原来的伪数组,这样的效果就相当于是在伪数组上使用slice(伪数组本身不能直接使用slice方法),slice方法用于切割原数组,而当slice方法不传任何参数时就相当于是从原数组开头切割到末尾(相当于原数组的浅拷贝,不会改变原数组)

知识点:

  • slice(a,b) 方法用于切割数组,从下标a开始到下标b(包含下标a的元素,不包含下标b的元素),该方法不会改变原数组,只会返回一个浅复制了原数组中的元素的一个新数组。
  • call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
  • sort() 方法对数组的元素进行排序,并返回数组。

二、替换链接

描述:

页面中存在id=jsContainerDOM元素。

DOM元素内会给出一段随机文本,可能包含一些链接,比如https://www.baidu.com,或者 www.baidu.com?from=onlineExam,如果出现链接文本,请给该链接文本加上链接标签,用户点击后能直接在新窗口中打开该链接。

完成 link 函数,完成该功能

1、container只有纯文本内容,不包含其他dom元素
2、识别所有以http://https://或者www.开始的链接
3、所有www.开头的链接,默认使用 http 协议
4、所有链接在新窗口打开

方案:

HTML:

<div id="jsContainer">
     这里会给出一段随机文本,可能包含一些链接,比如http://www.baidu.com,或者
     www.baidu.com?from=onlineExam,如果出现链接文本,请给该链接文本加上链接标签,用户点击后能直接在新窗口中打开该链接。
 </div>
 <button onclick="link()">测试</button>

CSS:

a {
    color: #00bc9b;
}

JavaScript:

function link() {
   const elm = document.querySelector('#jsContainer');
   
   let reg = /(https?:\/\/)?(www\.\w+(\.(com|cn))*(\?\w+=\w*(&\w+=\w*)*)?(#\w+)?)/g
   
   elm.innerHTML = elm.innerHTML.replace(reg, function (...args) {
       // args[1]表示的是正则第一个括号内匹配的内容,即https?:\/\/匹配到的内容
       if (args[1]) {
           // args[2]表示正则第二个括号内匹配的内容,即www\.\w+(\.(com|cn))*(\?\w+=\w*(&\w+=\w*)*)?(#\w+)?匹配到的内容
           // args[0]代表正则匹配到的字串
           return `<a target="_blank" href="${args[1]}${args[2]}">${args[0]}</a>`;
       } else {
           console.log(args);
           return `<a target="_blank" href="http://${args[2]}">${args[0]}</a>`;
       }
   })
}

正则解析:

/(https?:\/\/)?(www\.\w+(\.(com|cn))*(\?\w+=\w*(&\w+=\w*)*)?(#\w+)?)/g

  • ?代表前面的字符可选,https?能匹配到httphttps?前有括号包裹则代表括号内的内容可选,如(https?:\/\/)?表示https?:\/\/是可选的。
  • 如果想匹配特殊字符,如/.?等,需要在前面加\对其进行转义,即使用:\/\.\?
  • \w 是字符组[0-9a-zA-Z_]的简写形式,即\w是字母数字或者下划线的中任何一个字符。
  • + 等价于{1,},表示出现至少一次。*等价于{0,},表示出现任意次,有可能不出现。
  • 末尾的g代表全局匹配。

这里主要使用的是字符串的replace方法,这个方法很强大,之后博主会出文章对其进行详细讲解,这里先简单说一下:

replace方法第一个参数能接收一个正则表达式;第二个参数能接受一个方法,该方法的返回值会作为替换字符串替换匹配到的内容,并且如果第一个参数的正则表达式为全局匹配模式(加g),则该方法将被多次调用,每次匹配都会被调用。

着重要说的就是replace第二个参数的这个方法,该方法会有以下参数:

在这里插入图片描述

这时再看上面js代码中的args[1]args[0]应该就能理解了。

三、倒计时

描述:

倒计时是web开发中常见的组件,完成secondrender两个函数,完成倒计时的显示部分
1、second函数的输入为整数(时间间隔秒数),返回{day: Int, hour: Int, min: Int, second: Int}
2、render函数的输入为second函数的输出,将数据在页面对应的DOM元素上显示出来,格式如html所示
3、如果day为0,隐藏对应的DOM元素,否则显示(请直接使用已经实现的css代码)
4、数值不足两位,前面补充0

方案:

HTML:

<div id="jsCountdown">
    <span>01天</span>
    <span>02:</span>
    <span>03:</span>
    <span>04</span>
</div>

CSS:

.hide {
    display: none;
}

JavaScript:

function second(second) {
   // 总的分钟
   let min = parseInt(second / 60)
   // 总的小时
   let hour = parseInt(min / 60)
   // 总的天数
   let day = parseInt(hour / 24)
   // 取余,获得转换后的秒数
   second = second % 60
   // 取余,获得转换后的分钟
   min = min % 60
   // 取余,获得转换后的小时
   hour = hour % 24
   
   return {
       day,
       hour,
       min,
       second
   }
}

function render(data) {
   const d = document.getElementById("jsCountdown").getElementsByTagName('span')
   if (data.day == 0) {
       d[0].className = 'hide'
   } else {
       d[0].innerHTML = `${data.day < 10 ? ('0' + data.day) : data.day}`
   }
   d[1].innerHTML = `${data.hour < 10 ? ('0' + data.hour) : data.hour}:`
   d[2].innerHTML = `${data.min < 10 ? ('0' + data.min) : data.min}:`
   d[3].innerHTML = `${data.second < 10 ? ('0' + data.second) : data.second}`
}
// 测试
render(second(100000))

second方法中我们也可以直接使用Date对象来进行转换获取日、小时、分钟和秒数,但都必须使用UTC的方法:

function second(second) {
   // second * 1000 获取毫秒数
   // data为从 1970 年 1 月 1 日 0 时 0 分 0 秒(UTC,即协调世界时)走过second * 1000毫秒后的日期
   const data = new Date(second * 1000)
   return {
   	   // 需要使用UTC的方法 
       day: data.getUTCDate() - 1,
       hour: data.getUTCHours(),
       min: data.getUTCMinutes(),
       second: data.getUTCSeconds()
   }
}

带有UTC的方法表示的是以协调世界时(全球标准时间UTC)为标准,不带UTC的方法是以本地时间为标准

上面的day在获取时需要减1(data.getUTCDate() - 1)是因为当输入的倒计时秒数不够一天的秒数时,getUTCDate()返回的是1(getUTCDate()返回一个指定的 Date 对象为一个月中的哪一日(1-31))。

四、双色球机选一注

描述:

双色球由33个红球和16个蓝球组成,1注双色球包括6个不重复的红球和1个蓝球。

实现 randomFn 函数,实现“随机一注”功能,要求如下:

函数返回:

  1. 以字符串形式输出“随机一注”结果,选中的红蓝球用"|“隔开,红球在前,号码间用半角逗号隔开,如"06,10,13,18,23,27|05
  2. 红球和蓝球号码排列顺序 需与页面展示的顺序对应

页面交互:

  1. 将选中的红球和蓝球(页面中对应DOM元素)用class="active"高亮
  2. 将选中的球按号码从小到大排列,移至所属组的前方,结果如示意图所示
  3. 每次执行 randomFn 函数,输出符合要求且不完全重复

在这里插入图片描述

注意:

1、使用原生JavaScript操作DOM元素,不要增加、删除DOM元素或修改css
2、使用ES5语法
3、不要使用第三方插件
4、运行浏览器为chrome浏览器

方案:

HTML:

<div class="main">
    <div class="balls red">
        <span>红球</span>
        <div class="balls-wp">
            <b>01</b>
            <b>02</b>
            <b>03</b>
            <b>04</b>
            <b>05</b>
            <b>06</b>
            <b>07</b>
            <b>08</b>
            <b>09</b>
            <b>10</b>
            <b>11</b>
            <b>12</b>
            <b>13</b>
            <b>14</b>
            <b>15</b>
            <b>16</b>
            <b>17</b>
            <b>18</b>
            <b>19</b>
            <b>20</b>
            <b>21</b>
            <b>22</b>
            <b>23</b>
            <b>24</b>
            <b>25</b>
            <b>26</b>
            <b>27</b>
            <b>28</b>
            <b>29</b>
            <b>30</b>
            <b>31</b>
            <b>32</b>
            <b>33</b>
        </div>
    </div>
    <div class="balls blue">
        <span>蓝球</span>
        <div class="balls-wp">
            <b>01</b>
            <b>02</b>
            <b>03</b>
            <b>04</b>
            <b>05</b>
            <b>06</b>
            <b>07</b>
            <b>08</b>
            <b>09</b>
            <b>10</b>
            <b>11</b>
            <b>12</b>
            <b>13</b>
            <b>14</b>
            <b>15</b>
            <b>16</b>
        </div>
    </div>
</div>

CSS:

.main .balls {
    width: 450px;
    padding: 30px 10px 10px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 4px;
}

.main .balls:after {
    content: '\20';
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
}

.main .balls span {
    position: absolute;
    left: 12px;
    top: 5px;
    font-size: 13px;
}

.main b {
    float: left;
    width: 30px;
    height: 30px;
    font-size: 15px;
    background: #FFF;
    border: 1px solid;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.main .red .active {
    background: #f56c6c;
    color: #FFF;
}

.main .blue .active {
    background: #3a8ee6;
    color: #FFF;
}

.main .red {
    background: #feeff0;
}

.main .red b {
    border-color: #f56c6c;
}

.main .blue {
    background: #ecf8ff;
}

.main .blue b {
    border-color: #3a8ee6;
}

JavaScript:

console.log(randomFn());;

function randomFn() {
   return selectBall('red', 6) + '|' + selectBall('blue', 1);
}

// 定义一个复用函数
function selectBall(color, num) {
   var wrap = document.querySelector('.' + color + ' .balls-wp');
   var balls = wrap.getElementsByTagName('b');

   // 存放随机获取到的元素
   var choosed = [];

   for (var i = 0; i < num; i++) {
       // 随机获取元素下标
       var index = Math.floor(Math.random() * balls.length);
       choosed.push(balls[index]);
       // 添加类名
       balls[index].classList.add('active');
       // 将该元素在父容器中删除,避免下次随机获取元素时还获取到该元素(避免重复)
       balls[index].remove();
   }

   // 排序:升序
   choosed.sort(function (a, b) {
       // innerText在2016 年才正式进入 HTML 标准,在一些编译器中使用它会导致编译不通过
       // 可以使用innerHTML或textContent
       return a.innerHTML - b.innerHTML;
   });

   // 注意这里的循环要到着来,因为后插入的会在新插入的前面
   for (var i = num - 1; i >= 0; i--) {
       // 将choosed[i]插入到wrap中balls[0]的前面,这时choosed[i]将成为新的balls[0]
       wrap.insertBefore(choosed[i], balls[0]);
   }

   return choosed.map(function (val) {
       return val.innerHTML;
   }).join(',');
}

知识点:

  • Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法(Math 不是一个函数对象)。这里用到的Math.floor返回小于一个数的最大整数,即一个数向下取整后的值;Math.random返回一个 0 到 1 之间的伪随机数。

  • Element.remove() 方法,把对象从它所属的 DOM 树中删除。

  • Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。
    语法:

    var insertedNode = parentNode.insertBefore(newNode, referenceNode);
    
    • insertedNode :被插入节点 (newNode)
    • parentNode :新插入节点的父节点
    • newNode :用于插入的节点
    • referenceNodenewNode 将要插在这个节点之前

    如果 referenceNodenullnewNode 将被插入到子节点的末尾。

  • 数组的sort方法用来排序,map方法能用来映射,join方法能用来将数组转换成字符串。

结语

这篇文章的所有内容都出自于牛客网的JS篇题库
在这里插入图片描述

牛客网的JS题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,强烈将牛客网推荐给大家!

如果本篇文章对你有所帮助,还请客官一件四连!❤️

基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!

  • 44
    点赞
  • 31
    收藏
  • 打赏
    打赏
  • 59
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论 59

打赏作者

海底烧烤店ai

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值