位置: IT常识 - 正文

【JavaScript】JS实用案例分享:选择器组件 | 简易计算器(javascript js)

编辑:rootadmin
【JavaScript】JS实用案例分享:选择器组件 | 简易计算器

推荐整理分享【JavaScript】JS实用案例分享:选择器组件 | 简易计算器(javascript js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js实验,javascript+,js类的实现,,,js实验,javascript js,js实验,内容如对您有帮助,希望把文章链接给更多的朋友!

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

文章目录前言1、选择器组件效果演示案例需求JavaScript实现2、简易计算器效果演示案例需求JavaScript实现结语前言

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

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

牛客网牛客网

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

1、选择器组件效果演示

有以下HTML和CSS:

HTML结构

<div id="jsCheckGroup"> <div class="checkgroup radius"> <div data-val="a" class="item selected">选项a</div> <div data-val="b" class="item">选项b</div> <div data-val="c" class="item">选项c</div> <div data-val="d" class="item">选项d</div> </div></div>

CSS样式

.checkgroup .item{ height: 42px; line-height: 42px; padding: 0 10px; margin: 10px 0; border: 1px solid #c7c7c7; border-radius: 6px;}.checkgroup.radius .item{ border-radius: 21px;}.checkgroup .item.selected{ border: 1px solid #08b292; background: #08b292; color: #ffffff;}案例需求

CheckGroup是一个选择组件类,支持单选和多选选项参数格式、调用方式如下

选项参数格式:

var options = [{text: '选项a', value: 'a'}, {text: '选项b', value: 'b'}, {text: '选项c', value: 'c'}, {text: '选项d', value: 'd'}];

实例化单选组件:

var item = new CheckGroup(document.getElementById('jsCheckGroup'), options);item.val(['a']);【JavaScript】JS实用案例分享:选择器组件 | 简易计算器(javascript js)

实例化多选组件:

var item = new CheckGroup(document.getElementById('jsCheckGroup'), options, true);item.val(['a']);

具体功能和需求如下:

单选组件请在 div.checkgroup 元素加上class radius。选中时,请在对应选项dom元素加上class selected。点击单选选项,如果未选中当前选项则选中当前选项并取消其他选项,否则取消当前选项。点击多选选项,如果未选中当前选项则选中当前选项,否则取消当前选项。给定的options中, text和value属性的值均为非空字符串。val方法的参数和返回值均为数组(单选时数组长度不超过)。JavaScript实现// renderTo代表父容器,options为配置对象,isMultiple是否多选function CheckGroup(renderTo, options, isMultiple) { var that = this; that.renderTo = renderTo; that.options = options; that.isMultiple = !!isMultiple; // 初始化模板 that.initHtml(); // 初始化事件 that.initEvent();}// 挂载方法CheckGroup.prototype.initHtml = fInitHtml;CheckGroup.prototype.initEvent = fInitEvent;CheckGroup.prototype.toggleEl = fToggleEl;CheckGroup.prototype.isSelected = fIsSelected;CheckGroup.prototype.val = fVal;// 初始化模板function fInitHtml() { var that = this; // 请补全代码,拼接html字符串 var sHtml = ` <div class="checkgroup${!that.isMultiple ? ' radius' : ''}"> ${that.options.map(item => `<div data-val="${item.value}" class="item">${item.text}</div>`).join('')} </div> ` that.renderTo.innerHTML = sHtml; // 请补全代码,获取checkgroup的dom元素引用 that.el = document.getElementsByClassName('checkgroup')[0];}// 初始化事件function fInitEvent() { var that = this; // 添加点击事件 that.el && that.el.addEventListener('click', function (event) { var item = event.target; item.classList.contains('item') && that.toggleEl(item); });}// 点击事件处理函数function fToggleEl(item) { // 根据当前是单选还是多选,以及当前元素是否选中,高亮/取消���亮指定的选项dom元素 var that = this; if (that.isSelected(item)) { // 请补全代码 // 当前元素以及被选中,则取消选中 item.classList.remove('selected') } else if (that.isMultiple) { // 请补全代码 // 多选时直接添加selected item.classList.add('selected') } else { // 请补全代码 // 单选时先遍历取消所有的选中再选中当前元素 var sel = that.el.getElementsByClassName('selected')[0] sel && sel.classList.remove('selected') item.classList.add('selected') }}// 判断item是否选中function fIsSelected(item) { // 请补全代码,判断item是否选中 // Element.classList 是一个只读属性,返回一个元素 class 属性的动态 DOMTokenList 集合。 // DOMTokenList接口的 contains() 方法返回 Boolean (en-US) 类型。若传入的参数 token 包含在列表中时则返回true,否则返回 false。 return item.classList.contains('selected');}// 设置/返回选中元素function fVal(values) { var that = this; // 没有接受参数时该函数的作用是返回选中的数组 if (arguments.length === 0) { // 请补全代码,获取高亮的选项元素 var items = that.el.getElementsByClassName('selected'); // 请补全代码,获取高亮的选项元素的data-val return [].map.call(items, item => item.getAttribute('data-val')) } // 接收参数时,该函数表示设置选中 !that.isMultiple && values.length > 1 && (values.length = 1); // 请补全代码,获取所有的选项元素 var its = that.el; // 请补全代码,在指定元素上加上高亮的class values.forEach(val => { let el = its.querySelector(`.item[data-val="${val}"]`); // 交给点击事件处理函数 that.toggleEl(el); });}// 测试var options = [{ text: '选项a', value: 'a' }, { text: '选项b', value: 'b' }, { text: '选项c', value: 'c' }, { text: '选项d', value: 'd' }];// var item = new CheckGroup(document.getElementById('jsCheckGroup'), options);// 多选var item = new CheckGroup(document.getElementById('jsCheckGroup'), options, true);item.val(['a', 'c']);console.log(item.val());

这个案例中多次用到call来改变方法的this指向,因为获取的DOM集合是一种伪数组并不是真正的数组,不具有数组的方法,所以我们想要在它上面使用数组的方法时就需要先在一个确定的数组上调用方法再通过call将方法的this指向到它。

知识点:

修改this指向,call,bind,apply方法的使用,在前几期JS题解中我们对其讲解过,具体可见:https://ailjx.blog.csdn.net/article/details/126730075Element.classList 是一个只读属性,返回一个元素 class 属性的动态 DOMTokenList 集合。DOMTokenList.contains() 方法返回 Boolean 类型。若传入的参数包含在列表中时则返回true,否则返回 false。2、简易计算器效果演示

有以下HTML和CSS:

HTML结构

<div class="calculator"> <header class="cal-header">简易计算器</header> <main class="cal-main"> <div class="origin-value">0</div> <div class="cal-keyboard"> <ul class="cal-items"> <li data-action="num">7</li> <li data-action="num">8</li> <li data-action="num">9</li> <li data-action="operator">÷</li> <li data-action="num">4</li> <li data-action="num">5</li> <li data-action="num">6</li> <li data-action="operator">x</li> <li data-action="num">1</li> <li data-action="num">2</li> <li data-action="num">3</li> <li data-action="operator">-</li> <li data-action="num">0</li> <li data-action="operator">清空</li> <li data-action="operator">=</li> <li data-action="operator">+</li> </ul> </div> </main></div>

CSS样式

body, ul, li,select { margin: 0; padding: 0; box-sizing: border-box;}ul,li {list-style: none;}.calculator { max-width: 300px; margin: 20px auto; border: 1px solid #eee; border-radius: 3px;}.cal-header { font-size: 16px; color: #333; font-weight: bold; height: 48px; line-height: 48px; border-bottom: 1px solid #eee; text-align: center;}.cal-main { font-size: 14px;}.cal-main .origin-value { padding: 15px; height: 40px; line-height: 40px; font-size: 20px; text-align: right; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}.cal-main .origin-type,.cal-main .target-type { padding-left: 5px; width: 70px; font-size: 14px; height: 30px; border: 1px solid #eee; background-color: #fff; vertical-align: middle; margin-right: 10px; border-radius: 3px;}.cal-keyboard { overflow: hidden;}.cal-items { overflow: hidden;}.cal-items li { user-select: none; float: left; display: inline-block; width: 75px; height: 75px; text-align: center; line-height: 75px; border-top: 1px solid #eee; border-left: 1px solid #eee; box-sizing: border-box;}li:nth-of-type(4n+1) { border-left: none;}li[data-action=operator] { background: #f5923e; color: #fff;}.buttons { float: left; width: 75px;}.buttons .btn { width: 75px; background-color: #fff; border-top: 1px solid #eee; border-left: 1px solid #eee; height: 150px; line-height: 150px; text-align: center;}.btn-esc { color: #ff5a34;}.btn-backspace { position: relative;}案例需求

本题展示了一个简化版的计算器,需求如下:

除法操作时,如果被除数为0,则结果为0。结果如果为小数,最多保留小数点后两位,如 2 / 3 = 0.67(显示0.67), 1 / 2 = 0.5(显示0.5)。阅读并根据提示补充完成函数initEvent、result和calculate。JavaScript实现var Calculator = { init: function () { var that = this; if (!that.isInited) { that.isInited = true; // 保存操作信息 // total: Number, 总的结果 // next: String, 下一个和 total 进行运算的数据 // action: String, 操作符号 that.data = { total: 0, next: '', action: '' }; that.bindEvent(); } }, bindEvent: function () { var that = this; // 请补充代码:获取 .cal-keyboard 元素 var keyboardEl = document.getElementsByClassName('cal-keyboard')[0]; keyboardEl && keyboardEl.addEventListener('click', function (event) { // 请补充代码:获取当前点击的dom元素 var target = event.target; // 请补充代码:获取target的 data-action 值 var action = target.getAttribute('data-action'); // 请补充代码:获取target的内容 var value = target.innerText; if (action === 'num' || action === 'operator') { that.result(value, action === 'num'); } }); }, result: function (action, isNum) { var that = this; var data = that.data; if (isNum) { data.next = data.next === '0' ? action : (data.next + action); !data.action && (data.total = 0); } else if (action === '清空') { // 请补充代码:设置清空时的对应状态 data.total = 0; data.next = ''; data.action = ''; } else if (action === '=') { if (data.next || data.action) { data.total = that.calculate(data.total, data.next, data.action); data.next = ''; data.action = ''; } } else if (!data.next) { data.action = action; } else if (data.action) { data.total = that.calculate(data.total, data.next, data.action); data.next = ''; data.action = action; } else { data.total = +data.next || 0; data.next = ''; data.action = action; } // ���补充代码:获取 .origin-value 元素 var valEl = document.getElementsByClassName('origin-value')[0]; valEl && (valEl.innerHTML = data.next || data.total || '0'); }, calculate: function (n1, n2, operator) { n1 = +n1 || 0; n2 = +n2 || 0; if (operator === '÷') { // 请补充代码:获取除法的结果 if (n2 === 0) { return 0 } let tol = n1 / n2 // Number.isInteger() 方法用来判断给定的参数是否为整数。 // Math.round() 函数返回一个数字四舍五入后最接近的整数。 return Number.isInteger(tol) ? tol : Math.round(tol * 100) / 100; } else if (operator === 'x') { // 请补充代码:获取乘法的结果 let tol = n1 * n2 return Number.isInteger(tol) ? tol : Math.round(tol * 100) / 100; } else if (operator === '+') { // 请补充代码:获取加法的结果 let tol = n1 + n2 return Number.isInteger(tol) ? tol : Math.round(tol * 100) / 100; } else if (operator === '-') { // 请补充代码:获取减法的结果 let tol = n1 - n2 return Number.isInteger(tol) ? tol : Math.round(tol * 100) / 100; return 0; } }};Calculator.init();

这个案例的实现并不难,牛客上面已经把大致的骨架写好了,我们只需按照要求在需要补充的地方进行补充就行,这就使难度大大降低了,我们需要做的不只是补充代码,还要去学习这个案例实现的思想,逻辑以及代码结构,个人认为牛客给出的这个解法的代码结构还是比较好的,具有学习意义,我们不能盲目的去写代码,要学会去提高自己的思维。

知识点:

Number.isInteger() 方法用来判断给定的参数是否为整数。Math.round() 函数返回一个数字四舍五入后最接近的整数。结语

这篇文章的所有内容都出自于牛客网的JS篇题库:

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

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/298748.html 转载请保留说明!

上一篇:模式识别与图像处理课程实验一:图像处理实验(颜色算子实验、Susan、Harris角点检测实验、 sobel边缘算子检测实验)(模式识别与图像处理能做什么)

下一篇:Node.js安装与配置(详细步骤)(node.js的安装步骤)

  • 微信怎么定位一个人的位置(微信怎么定位一句话回复)

    微信怎么定位一个人的位置(微信怎么定位一句话回复)

  • 水货机报价(水货机)(水货机是翻新机吗)

    水货机报价(水货机)(水货机是翻新机吗)

  • 华为mate40pro截屏有几种方法(华为mate40pro如何截长屏)

    华为mate40pro截屏有几种方法(华为mate40pro如何截长屏)

  • 华为手机操作键怎么设置(华为手机操作键怎样隐藏起来)

    华为手机操作键怎么设置(华为手机操作键怎样隐藏起来)

  • dxva2.dll是什么意思(dxgi.dll是什么)

    dxva2.dll是什么意思(dxgi.dll是什么)

  • word红色波浪线(word红色波浪线下划线)

    word红色波浪线(word红色波浪线下划线)

  • 苹果x黑边多少mm(苹果x黑边好大)

    苹果x黑边多少mm(苹果x黑边好大)

  • 没有注册类是什么意思(没有注册类是什么意思win7)

    没有注册类是什么意思(没有注册类是什么意思win7)

  • 小米手机如何将应用转移至sd卡(小米手机如何将视频中的音频提取出来)

    小米手机如何将应用转移至sd卡(小米手机如何将视频中的音频提取出来)

  • 腾讯会议只有声音没有图像(腾讯会议只有声音画面黑的)

    腾讯会议只有声音没有图像(腾讯会议只有声音画面黑的)

  • 华为p40怎么关机(华为p40怎么关机重启一下)

    华为p40怎么关机(华为p40怎么关机重启一下)

  • 小米m1804d2se是什么型号(小米m1804d2se是什么型号多少钱)

    小米m1804d2se是什么型号(小米m1804d2se是什么型号多少钱)

  • 新版qq详细资料在哪(qq 详细资料)

    新版qq详细资料在哪(qq 详细资料)

  • 苹果手机4g网络卡顿慢是什么原因(苹果手机4g网络突然用不了)

    苹果手机4g网络卡顿慢是什么原因(苹果手机4g网络突然用不了)

  • 12306退款没有到账怎么办(12306购票退款没到账怎么办)

    12306退款没有到账怎么办(12306购票退款没到账怎么办)

  • 笔记本反应慢怎么解决(笔记本反应慢怎么回事)

    笔记本反应慢怎么解决(笔记本反应慢怎么回事)

  • 淘宝店铺粉丝数有什么用(淘宝店铺粉丝数量有权重吗)

    淘宝店铺粉丝数有什么用(淘宝店铺粉丝数量有权重吗)

  • 调制解调器固件是什么意思(调制解调器固件怎么升级)

    调制解调器固件是什么意思(调制解调器固件怎么升级)

  • 卡2无法访问移动网络(卡2无法访问移动网络什么意思)

    卡2无法访问移动网络(卡2无法访问移动网络什么意思)

  • miui10使用痕迹查询(miui软件使用记录)

    miui10使用痕迹查询(miui软件使用记录)

  • 新浪微博怎么注销超话(新浪微博怎么注册新账号)

    新浪微博怎么注销超话(新浪微博怎么注册新账号)

  • 网页版b站怎么缓存(网页版b站怎么截图)

    网页版b站怎么缓存(网页版b站怎么截图)

  • KbdTray.exe - KbdTray是什么进程 有什么作用

    KbdTray.exe - KbdTray是什么进程 有什么作用

  • 【数据挖掘实战】——应用系统负载分析与容量预测(ARIMA模型)(数据 挖掘)

    【数据挖掘实战】——应用系统负载分析与容量预测(ARIMA模型)(数据 挖掘)

  • 工程款税率是多少专票
  • 稿酬所得个人所得税税率表
  • 个体工商户开普票限额最新规定
  • 现金流量表填报说明
  • 住宿费电子发票样式
  • 出口退税发票未稽核可以申报退税吗
  • 购买的固定资产什么时候折旧
  • 物业公司临时工的工资可以进成本吗
  • 供应商租赁企业资质要求
  • 怎么计算收益率
  • 收取加盟费如何交税
  • 采购运输管理系统
  • 退货专票已经认证进项税怎么处理
  • 小规模纳税人没有收入怎么报税
  • 按适用税率计税销售额是什么意思
  • 可供出售金融资产新准则叫什么
  • 十分钟看懂财务报表
  • 企业取得代扣代缴个税手续费分录
  • 公司利润如何分配到个人
  • 费用报销单的日期
  • 旧物品翻新
  • 出口佣金比例
  • 王者荣耀怎么解除关系
  • 以前年度损益调整借贷方向
  • 电子商务如何做账
  • 税务自查补税后还有风险吗
  • 会计中在建工程与建筑安装工程的区别
  • 快启动u盘装系统教程
  • echarts纵坐标加单位
  • laccadive islands
  • 如何进行企业商务谈判
  • 外包员工的工资外包公司会扣吗
  • 企业出租房屋怎么做账
  • 租赁合同印花税率多少
  • load命令怎么用
  • 预缴纳税申报怎么不能保存
  • 怎么调整利润分配
  • 会计计入其他业务收入的有哪些
  • 查看php
  • 发票上没有数量可以吗
  • 开票信息修改
  • 企业所得税的征税对象和纳税人分别负有的纳税义务
  • 个税代扣代缴手续费返还需要缴纳增值税吗
  • 进口货物如何支付外汇
  • sql chr函数
  • 股权变更如何交税
  • 资产负债表调整事项
  • 合作经营利润分配协议
  • 一张凭证上可以写多个摘要吗
  • 物业公司收取电费服务费
  • 非现金资产抵偿债务
  • 增值税留抵退税最新政策
  • 以前年度损益调整属于哪类科目
  • 支付厂房租赁费现金流
  • 装修费用摊销是指什么
  • 汽车租赁公司成本
  • 企业采用公允价值进行会计核算,所体现的会计质量要求
  • 装订好的凭证可以拿掉一页吗
  • 公司注销固定资产清理怎么做账务处理
  • sql常用语句大全 实例
  • linux sshd是什么
  • centos7 login账号
  • xp系统安装版
  • window八
  • cocos做游戏
  • scrollpane.setviewportview
  • opengl programming guide
  • nodeJS文件操作自动创建目录
  • Android:Activity+Fragment及它们之间的数据交换(一)
  • node.js怎么用
  • JavaScript Array对象详解
  • c#委托的理解
  • 理解JavaScript事件对象
  • JavaScript数据类型
  • javascriptjs
  • Android的PopupWindow使用android学习之旅(四十三)
  • 最新印花税税目表2022
  • 税务工作创新
  • 河南省教育厅纪检组举报电话
  • 柬埔寨现在的领导
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设