Magic

Javascript之事件监听

Thu, 08 Aug 2024 11:15:25 +0800

S之事件监听

事件监听是JavaScript中的一种功能，可以对页面中的特定元素进行监视，然后在特定的用户操作（例如点击按钮，提交表单等）发生时触发特定的代码。

一、事件监听的两种模式

在浏览器中，事件监听处理有两种模式，一种是事件冒泡，另一种是事件捕获。

事件冒泡（bubbling）：当一个元素接收到事件的时候，会把它接收到的事件传给它的父元素，然后再传给父元素的父元素，一直传递到最顶层的 Document 对象。这种事件处理方式就是事件冒泡。大多数事件都会冒泡。简单来说，如果你点击了一个按钮，那么你不仅仅只是点击了按钮，同时也点击了包含这个按钮的所有父元素。
事件捕获（capturing）：事件捕获与事件冒泡恰好相反，事件会从最外层元素先接收，然后向内层嵌套的元素传递，最后达到最精确的元素。

二、事件监听函数

在JavaScript中，常用的事件监听函数是addEventListener。这个函数可以接受三个参数

·第一个是想监听的事件名称（例如"click"，"mouseover"等）
·第二个是当事件发生时想运行的函数。
·第三个是可选参数，用于指定事件是否在捕获或冒泡阶段处理

例子：

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">点击我</button>

<script>//js语法
document.getElementById("myBtn").addEventListener("click", function(){
  alert("按钮被点击了！");
});
</script>

</body>
</html>

在这个例子中，我们监听id为"myBtn"的按钮，当用户点击按钮时，浏览器会弹出一个警告框。

document.getElementById("myBtn")：这个方法获取了DOM树中ID为"myBtn"的元素。这个元素可能是任何类型的HTML元素，只要它的ID是"myBtn"即可。
addEventListener("click", function())：这是一个事件监听器，它告诉浏览器：当用户点击id为"myBtn"的元素时，我希望你执行后面那个函数。
function() {alert("按钮被点击了！");}：这是被注册到点击事件的回调函数。当用户点击id为"myBtn"的元素时，这个函数就会被执行。在这个函数里，我们让浏览器弹出一个警告框，显示"按钮被点击了！"。

三、所谓第三个可选参数

addEventListener方法还有第三个可选参数，用于指定事件是否在捕获或冒泡阶段处理。

默认的情况下，addEventListener 使用事件冒泡方式，也就是如果没有提供第三个参数，或者提供的值为 false，那么就采用事件冒泡方式处理。如果你想让事件以捕获方式触发，你可以提供第三个参数为 true。

// 使用事件捕获
document.getElementById("myBtn").addEventListener("click", function(){
  alert("按钮被点击了！");
}, true);

在实际编程中，与其设置捕获模式，我们更多的是在冒泡阶段处理事件。这样可以最大限度地保证我们代码的兼容性，因为并非所有的事件都支持冒泡，但是更少的事件支持捕获。

四、添加多个事件监听器

需要注意的是，可以为一个元素添加多个事件监听器，甚至可以为同一个事件添加多个监听器，当事件发生时，监听器会按照它们被添加的顺序执行。

为一个元素添加多个不同的事件监听器：

var btn = document.getElementById('myBtn');

    // 修改页面标题
    btn.addEventListener('click', function(){
      document.title = '你点击了按钮！';
    });

    // 修改元素背景颜色
    btn.addEventListener('mouseover', function(){
      this.style.backgroundColor = 'red';
    });

    // 还原元素背景颜色
    btn.addEventListener('mouseout', function(){
      this.style.backgroundColor = '';
    });

在这个例子中，我们为同一个按钮元素添加了三个事件监听器：
对于点击事件（click），我们将页面的标题修改为“你点击了按钮！”；
对于鼠标移上去的事件（mouseover），我们将按钮的背景色改为红色；
对于鼠标移出去的事件（mouseout），我们将按钮的背景色还原。

同一类型的事件添加多个处理函数：

var btn = document.getElementById('myBtn');

    // 显示第一个事件处理消息
    btn.addEventListener('click', function(){
      console.log('这是第一个点击事件处理函数');
    });

    // 显示第二个事件处理消息
    btn.addEventListener('click', function(){
      console.log('这是第二个点击事件处理函数');
    });

在这个例子中，我们为同一个点击事件（click）绑定了两个处理函数。当点击这个按钮时，将会依次在控制台打印出“这是第一个点击事件处理函数”和“这是第二个点击事件处理函数”两个消息。
这是因为当一个元素的同一事件类型被多次绑定事件处理函数时，这些函数将按照添加的顺序依次执行。

注意：在 JavaScript 中，addEventListener 方法只能同时为一个特定事件添加一个监听器

如果你想为一个元素的两个事件（例如 'click' 和 'mouseover'）都添加同一个监听器函数，你需要分别调用 addEventListener 方法，就像下面这样：

var btn = document.getElementById('myBtn');

var handler = function(){
   text.innerText = '文本已发生改变';
}//设置一个名为handler的函数，能够改变文本内容

btn.addEventListener('click', handler);//当事件发生时，调用handler函数
btn.addEventListener('mouseover', handler)

参数一的事件类型

鼠标事件
click 当用户点击某个对象时调用的事件句柄。
contextmenu 在用户点击鼠标右键打开上下文菜单时触发
dblclick 当用户双击某个对象时调用的事件句柄。
mousedown 鼠标按钮被按下。
mouseenter 当鼠标指针移动到元素上时触发。
mouseleave 当鼠标指针移出元素时触发
mousemove 鼠标被移动。
mouseover 鼠标移到某元素之上。
mouseout 鼠标从某元素移开。
mouseup 鼠标按键被松开。

键盘事件
属性描述 DOM
keydown 某个键盘按键被按下。
keypress 某个键盘按键被按下并松开。
keyup 某个键盘按键被松开。

框架/对象（Frame/Object）事件
abort 图像的加载被中断。 ( )
beforeunload 该事件在即将离开页面（刷新或关闭）时触发
error 在加载文档或图像时发生错误。 ( , 和 )
hashchange 该事件在当前 URL 的锚部分发生修改时触发。
load 一张页面或一幅图像完成加载。
pageshow 该事件在用户访问页面时触发
pagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
resize 窗口或框架被重新调整大小。
scroll 当文档被滚动时发生的事件。
unload 用户退出页面。 ( 和 )

表单事件
blur 元素失去焦点时触发
change 该事件在表单元素的内容改变时触发( , , , 和 )
focus 元素获取焦点时触发
focusin 元素即将获取焦点是触发
focusout 元素即将失去焦点是触发
input 元素获取用户输入是触发
reset 表单重置时触发
search 用户向搜索域输入文本时触发

剪贴板事件
copy 该事件在用户拷贝元素内容时触发
cut 该事件在用户剪切元素内容时触发
paste 该事件在用户粘贴元素内容时触发

打印事件
afterprint 该事件在页面已经开始打印，或者打印窗口已经关闭时触发
beforeprint 该事件在页面即将开始打印时触发

拖动事件
drag 该事件在元素正在拖动时触发
dragend 该事件在用户完成元素的拖动时触发
dragenter 该事件在拖动的元素进入放置目标时触发
dragleave 该事件在拖动元素离开放置目标时触发
dragover 该事件在拖动元素在放置目标上时触发
dragstart 该事件在用户开始拖动元素时触发
drop 该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件
abort 事件在视频/音频（audio/video）终止加载时触发。
canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
canplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
durationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
emptied The event occurs when the current playlist is empty
ended 事件在视频/音频（audio/video）播放结束时触发。
error 事件在视频/音频（audio/video）数据加载期间发生错误时触发。
loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
loadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
loadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。
pause 事件在视频/音频（audio/video）暂停时触发。
play 事件在视频/音频（audio/video）开始播放时触发。
playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。
ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。
seeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
seeking 事件在用户开始重新定位视频/音频（audio/video）时触发。
stalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。
suspend 事件在浏览器读取媒体数据中止时触发。
timeupdate 事件在当前的播放位置发送改变时触发。
volumechange 事件在音量发生改变时触发。
waiting 事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件
animationend 该事件在 CSS 动画结束播放时触发
animationiteration 该事件在 CSS 动画重复播放时触发
animationstart 该事件在 CSS 动画开始播放时触发

过渡事件
transitionend 该事件在 CSS 完成过渡后触发。

其他事件
message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
online 该事件在浏览器开始在线工作时触发。
offline 该事件在浏览器开始离线工作时触发。
popstate 该事件在窗口的浏览历史（history 对象）发生改变时触发。 event occurs when the window’s history changes
show 该事件当

元素在上下文菜单显示时触发
storage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
toggle 该事件在用户打开或关闭元素时触发
wheel 该事件在鼠标滚轮在元素上下滚动时触发

百度万年历API 查询年工作日，法定节假日，调休工作日

Thu, 08 Aug 2024 10:15:41 +0800

https://sp0.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?query=2020%E5%B9%B46%E6%9C%88&co=&resource_id=6018&t=d21eb6a7-5de6-4d3f-9b06-09e14e5877e3&ie=utf8&oe=gbk&cb=op_aladdin_callback&format=json&tn=baidu&cb=jQuery110209630343350406516_1544930242767&_=1544930242772

http://opendata.baidu.com/api.php?query=2020%E5%B9%B45%E6%9C%88&resource_id=6018&format=json

正则表达式取反

Thu, 08 Aug 2024 10:08:56 +0800

取反正则：^((?!要取反的正则表达式).)*$

示例：

import java.util.regex.Matcher;
import java.util.regex.Pattern;
 
public class Main {
    public static void main(String[] args) {
 
        // 匹配以test开头的字符串
        Pattern pattern = Pattern.compile("^test");
        Matcher matcher = pattern.matcher("test11");
        System.out.println(matcher.find());
 
        // 匹配不是以test开头的字符串
        Pattern pattern2 = Pattern.compile("^((?!^test).)*$");
        Matcher matcher2 = pattern2.matcher("hellotest");
        System.out.println(matcher2.find());
 
 
    }
}

getBoundingClientRect

Thu, 08 Aug 2024 10:02:56 +0800

getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

API

let DOMRect = object.getBoundingClientRect()

它的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

应用场景

1、获取 dom 元素相对于网页左上角定位的距离

以前的写法是通过 offsetParent 找到元素到定位父级元素，直至递归到顶级元素 body 或 html。

// 获取dom元素相对于网页左上角定位的距离
function offset(el) {
  var top = 0
  var left = 0
  do {
    top += el.offsetTop
    left += el.offsetLeft
  } while ((el = el.offsetParent)) // 存在兼容性问题，需要兼容
  return {
    top: top,
    left: left
  }
}

var odiv = document.getElementsByClassName('markdown-body')
offset(a[0]) // {top: 271, left: 136}

现在根据 getBoundingClientRect 这个 api，可以写成这样：

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollTop

2、判断元素是否在可视区域内

function isElView(el) {
  var top = el.getBoundingClientRect().top // 元素顶端到可见区域顶端的距离
  var bottom = el.getBoundingClientRect().bottom // 元素底部端到可见区域顶端的距离
  var se = document.documentElement.clientHeight // 浏览器可见区域高度。
  if (top < se && bottom > 0) {
    return true
  } else if (top >= se || bottom <= 0) {
    // 不可见
  }
  return false
}

git怎样恢复删除的远程分支

Thu, 08 Aug 2024 09:48:15 +0800

方法：1、利用reflog操作找到最后一次commitid，语法为“git reflog --date=iso”；

2、利用checkout切出分支即可恢复删除的远程分支，语法为“git checkout -b 分支名 commitid”。

实际工作上，肯定会有不小心的时候，比如我吧，删除了本地dev分支，intellij idea提示是否将tracked branch也删掉，结果一不小心将远程分支也删除了，接下来就是我的救赎之旅。

查看reflog，找到最后一次commitid

git reflog --date=iso

reflog是reference log的意思，也就是引用log，记录HEAD在各个分支上的移动轨迹。选项 --date=iso，表示以标准时间格式展示。这里你肯定会问，为什么不用git log？git log是用来记录当前分支的commit log，分支都删除了，找不到commit log了。

找到目标分支最后一次的commitid，

D:\>git reflog --date=iso
287ba1b HEAD@{2019-05-13 15:35:18 +0800}: checkout: moving from dev to deploy
528a169 HEAD@{2019-05-13 09:23:58 +0800}: commit : 添加忽略，.idea,*.iml,*.log

切出分支

git checkout -b recovery_branch_name commitid

切出分支后，本地有分支了，再push到远程仓库就可以了

git push origin recovery_branch_name

关于高德地图崩溃的问题

Thu, 08 Aug 2024 09:39:45 +0800

开发中依赖高德地图sdk
implementation 'com.amap.api:search:8.1.0'
implementation 'com.amap.api:3dmap:9.1.0'
使用中并无问题，但在页面finish的时候按照文档销毁资源的时候却出现了问题。

代码如下，我在页面销毁时，调用销毁地图资源的方法，并在前后都加上了日志。

@Override
    public void onDestroy() {
        super.onDestroy();
        Log.d(TAG, "onDestroy()");
        if (null != mMapView) {
            Log.d(TAG, "mMapView onDestroy()");
            mMapView.onDestroy();
            Log.d(TAG, "mMapView onDestroy() end");
        }
    }

结果在退出页面后，app就崩了。

"mMapView onDestroy()"日志正常输出，但是却没有"mMapView onDestroy() end"的日志，实际上我打断点追进去也确定了，崩溃就是发生在MapView的onDestory方法内部，但里面都是混淆过的代码，实在找不到原因。

而且这崩溃并没有抛出明确的异常，我用try-catch没有效果；将其放入子线程也无法阻止应用崩溃。

好消息，官方客服终于给了有用的解答。
在清单文件中的application里加上android:allowNativeHeapPointerTagging="false"
亲测有效。

Bad credentials异常

Thu, 08 Aug 2024 09:33:44 +0800

在spring-security中出现Bad credentials异常，可能是如下情况：

一.username和password错误

二.访问权限不够

三.密码加密问题，对于密码加密问题可能是如下情况：

1.密码无加密，这时应该在密码前加上 {noop},具体原因请翻阅官方api

User user = new User(userInfo.getUsername(),"{noop}"+ userInfo.getPassword(),getAuthority(userInfo.getRoles()));

2.在配置文件中设置了密码加密却没有对其在service中对其应用

Lodop打印控件打印机可打区域的影响设置纸张边缘为基点

Thu, 08 Aug 2024 09:18:03 +0800

由于打印机千差万别，打印开发也要注意针对客户各种打印机进行处理，Lodop提供了打印维护（PRINT_SETUP）可针对每个客户端进行微调，保存结果保存在客户端本地，对其他访问网站的客户没有影响。

由于打印机的限制，有些打印机不能打印某些规格的纸张，或打印区域有限制，不是所有打印机都支持自定义纸张，也不是所有打印机可打区域都相同，在打印预览界面里选择真实打印机，有时候预览能看到一些虚线，这些虚线是打印机的可打区域，受打印机的影响。
虚线外是不可打的，因此Lodop对打印项的top、left等起始点默认是从可打区域的边缘为起始位置的，这样可以避免有内容超过可打区域造成打印不全，但是这样一来不同打印机可打区域不同，所以坐标的基点不同，也就造成内容在纸张中位置不同，如果不想这样，也可以设置以纸张边缘为基点，那么起始位置就不再是可打区域的边缘了，需要注意内容不要在可打区域外输出。

如图，左侧是默认以可打区域（不同打印机可打区域不同）为基点，打印项top、left均设置成0，却还有边距，这是由于默认不是以纸张边缘为基点。
右侧是设置以纸张边缘为基点后，打印项起始位置变成了纸张最左上角，由于在可打区域外，因此那部分打印不出来，该top、left的依据是纸张边缘。

top值为0,left为0，应该是在纸张的最左上角位置显示，用虚拟打印机可以看出，top值为0,left为0确实是在纸张的最左上角，然而实际用打印机打印中不一定在最左上角。

虚线是打印机的可打印区域边界，也就是打印机走纸的物理边界。

不同的打印机边界值不同，一般是1——5mm的差异。
打印机预留的物理边距，不可以取消，有个别打印可以提供修改，具体查看一下相应的打印管理程序。

以可打区域为基点，能保证内容不会超出可打区域，从而把内容都打印出来。
以纸张边缘为基点，能更好的设计，让不同打印机内容在纸张中的位置一样。
可根据需要，选择默认，或以纸张边缘为基点（设置以纸张边缘为基点需要加如下语句）
LODOP.SET_PRINT_MODE("POS_BASEON_PAPER",true);//设置以纸张边缘为基点

注意：可打区域外是打印不出来的，和打印机有关。
设置以纸张为基点，只是设计的内容的坐标定位的位置有关，如图所示。

js中小数四舍五入和浮点数的研究

Thu, 08 Aug 2024 09:03:12 +0800

toFixed可以实现小数四舍五入，但有时候却不正确，1.335.toFixed(2)=1.33，使用提升倍数然后除以倍数有时候也有问题，35.41 * 100 = 3540.9999999999995，本文讲怎么解决这些。 JS中浮点数精度问题最近在做项目的时候，涉及到商品价格的计算，经常会出现计算出现精度问题。刚开始草草了事，直接用toFixed就解决了问题，并没有好好的思考一下这个问题。后来慢慢的，问题越来越多，连toFixed也出现了（允悲）。

问题的发现

总结了一下，一共有以下两种问题

浮点数运算后的精度问题

在计算商品价格加减乘除时，偶尔会出现精度问题，一些常见的例子如下：

// 加法 =====================
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001

// 减法 =====================
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
 
// 乘法 =====================
19.9 * 100 = 1989.9999999999998
0.8 * 3 = 2.4000000000000004
35.41 * 100 = 3540.9999999999995

// 除法 =====================
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999

toFixed奇葩问题

在遇到浮点数运算后出现的精度问题时，刚开始我是使用toFixed(2)来解决的，因为在W3school和菜鸟教程（他们均表示这锅不背）上明确写着定义：toFixed()方法可把Number四舍五入为指定小数位数的数字。但是在chrome下测试结果不太令人满意：

1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.33 错误
1.3335.toFixed(3) // 1.333 错误
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5)  // 1.33333 错误
1.3333335.toFixed(6) // 1.333333 错误

使用IETester在IE下面测试的结果却是正确的。

为什么会产生

让我们来看一下为什么0.1+0.2会等于0.30000000000000004，而不是0.3。首先，想要知道为什么会产生这样的问题，让我们回到大学里学的复（ku）杂（zao）的计算机组成原理。虽然已经全部还给大学老师了，但是没关系，我们还有百度嘛。

浮点数的存储

和其它语言如Java和Python不同，JavaScript中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准，使用64位固定长度来表示，也就是标准的 double 双精度浮点数（相关的还有float 32位单精度）。这样的存储结构优点是可以归一化处理整数和小数，节省存储空间。 64位比特又可分为三个部分：

符号位S：第 1 位是正负数符号位（sign），0代表正数，1代表负数

指数位E：中间的 11 位存储指数（exponent），用来表示次方数

尾数位M：最后的 52 位是尾数（mantissa），超出的部分自动进一舍零

浮点数的运算

那么JavaScript在计算0.1+0.2时到底发生了什么呢？首先，十进制的0.1和0.2会被转换成二进制的，但是由于浮点数用二进制表示时是无穷的：

0.1 -> 0.0001 1001 1001 1001...(1100循环)
0.2 -> 0.0011 0011 0011 0011...(0011循环)

IEEE 754 标准的 64 位双精度浮点数的小数部分最多支持53位二进制位，所以两者相加之后得到二进制为：

0.0100110011001100110011001100110011001100110011001100

因浮点数小数位的限制而截断的二进制数字，再转换为十进制，就成了0.30000000000000004。所以在进行算术计算时会产生误差。

解决方法

针对以上两个问题，网上搜了一波解决方法，基本都大同小异的，分别来看一下。

解决toFixed

针对toFixed的兼容性问题，我们可以把toFix重写一下来解决，代码如下：

// toFixed兼容方法
Number.prototype.toFixed = function(len){
    if(len>20 || len<0){
        throw new RangeError('toFixed() digits argument must be between 0 and 20');
    }
    // .123转为0.123
    var number = Number(this);
    if (isNaN(number) || number >= Math.pow(10, 21)) {
        return number.toString();
    }
    if (typeof (len) == 'undefined' || len == 0) {
        return (Math.round(number)).toString();
    }
    var result = number.toString(),
        numberArr = result.split('.');

    if(numberArr.length<2){
        //整数的情况
        return padNum(result);
    }
    var intNum = numberArr[0], //整数部分
        deciNum = numberArr[1],//小数部分
        lastNum = deciNum.substr(len, 1);//最后一个数字
    
    if(deciNum.length == len){
        //需要截取的长度等于当前长度
        return result;
    }
    if(deciNum.length < len){
        //需要截取的长度大于当前长度 1.3.toFixed(2)
        return padNum(result)
    }
    //需要截取的长度小于当前长度，需要判断最后一位数字
    result = intNum + '.' + deciNum.substr(0, len);
    if(parseInt(lastNum, 10)>=5){
        //最后一位数字大于5，要进位
        var times = Math.pow(10, len); //需要放大的倍数
        var changedInt = Number(result.replace('.',''));//截取后转为整数
        changedInt++;//整数进位
        changedInt /= times;//整数转为小数，注：有可能还是整数
        result = padNum(changedInt+'');
    }
    return result;
    //对数字末尾加0
    function padNum(num){
        var dotPos = num.indexOf('.');
        if(dotPos === -1){
            //整数的情况
            num += '.';
            for(var i = 0;i<len;i++){
                num += '0';
            }
            return num;
        } else {
            //小数的情况
            var need = len - (num.length - dotPos - 1);
            for(var j = 0;j<need;j++){
                num += '0';
            }
            return num;
        }
    }
}

我们通过判断最后一位是否大于等于5来决定需不需要进位，如果需要进位先把小数乘以倍数变为整数，加1之后，再除以倍数变为小数，这样就不用一位一位的进行判断。

解决浮点数运算精度

既然我们发现了浮点数的这个问题，又不能直接让两个浮点数运算，那怎么处理呢？我们可以把需要计算的数字升级（乘以10的n次幂）成计算机能够精确识别的整数，等计算完成后再进行降级（除以10的n次幂），这是大部分变成语言处理精度问题常用的方法。例如：

0.1 + 0.2 == 0.3 //false
(0.1*10 + 0.2*10)/10 == 0.3 //true

但是这样就能完美解决么？细心的读者可能在上面的例子里已经发现了问题：

35.41 * 100 = 3540.9999999999995

看来进行数字升级也不是完全的可靠啊（允悲）。但是魔高一尺道高一丈，这样就能难住我们么，我们可以将浮点数toString后indexOf(‘.’)，记录一下小数位的长度，然后将小数点抹掉，完整的代码如下：

/*** method **
 *  add / subtract / multiply /divide
 * floatObj.add(0.1, 0.2) >> 0.3
 * floatObj.multiply(19.9, 100) >> 1990
 *
 */
var floatObj = function(){

    /*
     * 判断obj是否为一个整数
     */
    function isInteger(obj){
        return Math.floor(obj) === obj
    }

    /*
     * 将一个浮点数转成整数，返回整数和倍数。如 3.14 >> 314，倍数是 100
     * @param floatNum {number} 小数
     * @return {object}
     *   {times:100, num: 314}
     */
    function toInteger(floatNum){
        var ret = {times: 1, num: 0}
        if (isInteger(floatNum)) {
            ret.num = floatNum
            return ret
        }
        var strfi  = floatNum + ''
        var dotPos = strfi.indexOf('.')
        var len    = strfi.substr(dotPos+1).length
        var times  = Math.pow(10, len)
        var intNum = Number(floatNum.toString().replace('.',''))
        ret.times  = times
        ret.num    = intNum
        return ret
    }

    /*
     * 核心方法，实现加减乘除运算，确保不丢失精度
     * 思路：把小数放大为整数（乘），进行算术运算，再缩小为小数（除）
     *
     * @param a {number} 运算数1
     * @param b {number} 运算数2
     * @param digits {number} 精度，保留的小数点数，比如 2, 即保留为两位小数
     * @param op {string} 运算类型，有加减乘除（add/subtract/multiply/divide）
     *
     */
    function operation(a, b, digits, op){
        var o1 = toInteger(a)
        var o2 = toInteger(b)
        var n1 = o1.num
        var n2 = o2.num
        var t1 = o1.times
        var t2 = o2.times
        var max = t1 > t2 ? t1 : t2
        var result = null
        switch (op) {
            case 'add':
                if (t1 === t2) { // 两个小数位数相同
                    result = n1 + n2
                } else if (t1 > t2) { // o1 小数位 大于 o2
                    result = n1 + n2 * (t1 / t2)
                } else { // o1 小数位 小于 o2
                    result = n1 * (t2 / t1) + n2
                }
                return result / max
            case 'subtract':
                if (t1 === t2) {
                    result = n1 - n2
                } else if (t1 > t2) {
                    result = n1 - n2 * (t1 / t2)
                } else {
                    result = n1 * (t2 / t1) - n2
                }
                return result / max
            case 'multiply':
                result = (n1 * n2) / (t1 * t2)
                return result
            case 'divide':
                result = (n1 / n2) * (t2 / t1)
                return result
        }
    }

    // 加减乘除的四个接口
    function add(a, b, digits){
        return operation(a, b, digits, 'add')
    }
    function subtract(a, b, digits){
        return operation(a, b, digits, 'subtract')
    }
    function multiply(a, b, digits){
        return operation(a, b, digits, 'multiply')
    }
    function divide(a, b, digits){
        return operation(a, b, digits, 'divide')
    }

    // exports
    return {
        add: add,
        subtract: subtract,
        multiply: multiply,
        divide: divide
    }
}();

如果觉得floatObj调用麻烦，我们可以在Number.prototype上添加对应的运算方法。

真正可用的CSS文字两端对齐

Wed, 07 Aug 2024 14:56:16 +0800

最近在工作项目中接触到Web界面设计的问题，要实现文字两端对齐的效果。在网上搜索了一下，差不多都是互相转帖，用的都是类似的技巧：

text-align:justify;
text-justify:inter-ideograph;

但问题是，我怎么就看不到效果呢？无论是英文还是中文，在IE和chrome下都不起作用。后来，终于在StackOverflow上找到解决方法了。

样式：

div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;}
div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }

HTML：

<div class="justify">hello, text justify.</div><br/>
<div class="justify"> hello, text justify.<span></span></div><br/>
<div class="justify">中 文 两 端 对 齐</div><br/>
<div class="justify">中 文 两 端 对 齐<span></span></div>

效果图：

从效果图可以看到，除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。英文每个单词都有空格隔开，所以没问题。

兼容safiri 文字两端对齐

text-align: justify在当文案只有一行的时候是不会生效的。

解决方案是用text-align-last: justify来修复text-align: justify对最后一行不起作用的问题。

Android还是有一定的支持度的，但是ios就惨了，完全不支持，所以只能改。
分析text-align: justify不生效的原因就是文字在最后一行，所以可以再想要两端对齐的文字前后分别加一个标签，然后把文字挤在不是最后一行的位置上。

.content {
    width: 100px;/*要有固定宽度，不然没法两端对齐*/
    text-align: justify;/*设置两端对齐属性*/
}
.content:before, .content:after {
    display: inline-block;/*行内元素*/
    content: '';
    width: 100%;/*可以挤掉文字，保证不跟文字在同一行*/
    height: 0;
    visibility: hidden;
}