前端小技巧

简介: 项目中解决问题的前端小技巧

最近,接触的最多的就是工业智能化,这让我不得不学习一些以前从没接触过的东西,在完成项目的过程中又遇到了很多问题,我觉得很有意思,也很有参考意义,在这里记录一下,下面主要是前端js有关的一些内容。

js中的类型定义

js进行计算的时候如果两个不同类型计算,需要先定义一个初始值来确定计算后的类型。因为在javaScript中数据为弱类型,如不进行初始化赋值,可能会造成计算后类型不匹配的问题。

    testSelect: function() {
    table.set();
        //将0赋给totle这个变量,则totle的类型就会变成number
    var totle =0;
    var rows = $.map($("#" + table.options.id).bootstrapTable('getSelections'), 
    function (row) {
        totle +=row.rowLimit;
        return $.common.getItemField(row, table.options.columns[5].field);
    });
},
AI 代码解读

js处理number的三种方式

  1. eval()函数

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行,也就是说如果传入的字符串是表达式,就会计算表达式。

示例如下:

eval("amount+$(this).val()* duration")
AI 代码解读

其中 amount 是number类型的数字,在java中对应float类型;$(this).val()是jQuery获取匹配元素的当前值;duration为number类型的数字,在java中对应int类型。该函数的输出结果为number类型。

  1. ceil()函数

ceil()函数属于JavaScript Math对象,返回大于或等于一个给定数字的最小整数,即向上取整。

Math.ceil(parseFloat($(this).val()*100)* duration)/100
AI 代码解读

其中,$(this).val()是jQuery获取匹配元素的当前值的方法;duration为number类型的数字,在java中对应int类型,

  • Math.ceil() :向上取整
  • Math.floor():向下取整
  • Math.round():四舍五入
  1. toFixed()函数

toFixed() 方法使用定点表示法来格式化一个数值,可把 Number 四舍五入为指定小数位数的数字。

 numObj.toFixed(2); 
/* toFixed(n)中的n代表保留几位,但是保留小数后会保存为字符串类型*/
AI 代码解读

其中numObj表示number类型的对象。

获取label的value的两种方法

label.innerText
AI 代码解读
label.getAttribute('id')
AI 代码解读
Joliu
+关注
目录
打赏
0
0
0
0
1
分享
相关文章
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
65 1
每个前端都应该掌握的7个代码优化的小技巧
每个前端都应该掌握的7个代码优化的小技巧
126 0
前端页面调试小技巧(谷歌浏览器)
前端页面调试小技巧(谷歌浏览器)
83 0
【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?
在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。 这个时候 Mock 就可以很好的解决这个问题,前端团队可以在 API 还没开发完成的情况下,借助 Mock API 实现预对接,加速开发进程。测试团队可以通过 Mock API 解决不必要的系统,完成集成测试。 Eolink Apikit 为前端工程师提供 API 文档管理,快速接口测试,以及 Mock API 创建与调用,及查看文档变更历史的能力。有助于前端工程师快速查看 API 文档详情与历史记录,快速生成和使用 Mock API 提前进行页面效果验证。
93 0
【前端】React 组件调试小技巧
【前端】React 组件调试小技巧
274 0
前端开发提效小技巧之业务功能篇
用技术实现梦想,用梦想打开前端技术之门。分享我工作中总结的前端开发提效小技巧,本篇是关于业务功能的。
669 1
前端代码优化小技巧
今天分享一下开测前端代码的一些优化,及使用的一些小技巧,来优化我们的网站,前端开发中最常见的问题就是很少使用ES6方法导致代码冗余,不够清晰,定时器和闭包导致内存溢出及泄露,网站中css导致排版错乱,请求图片过多,导致网站加载缓慢,网站中兼容各种浏览器的问题。
前端面试题-一些小技巧分享
每逢跳槽倍思题 整理下吧 写着写着发现也不全是面试题,也有一些好的基础知识分享
192 0
前端面试题-一些小技巧分享

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    75
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 5
    详解智能编码在前端研发的创新应用
    15
  • 6
    巧用通义灵码,提升前端研发效率
    26
  • 7
    智能编码在前端研发的创新应用
    39
  • 8
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    22
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
    3
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    120
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75