Kai Soong

获取元素距离顶部的距离 ​

  • MDN Element.getBoundingClentRect()

IOS 时间 ​

  • 不支持 new Date('2018-07-06 15:32:24')
  • new Date('2019-07')也不支持
  • 只支持 new Date('2018-07-06')

canvas 双指缩小放大以手指中心点的理解 ​

实现的源码

JS scroll to view (scrollIntoView) ​

document.getElementById("nn").scrollIntoView(true);

监听浏览器 history back ​

function pushHistory() {
			var state = {
				title: "pay",
				url: "#pay"
			}
			window.history.pushState(state, "pay", "#pay");
		}
		pushHistory()

		window.addEventListener("popstate", function () {
			history.go(-2)
		}, false)

clientWidth , offsetHeight 等属性详解 参考 ​

获取元素最终 CSS 属性值 ​

  • window.getComputedStyle("元素", "伪类"); 可以获取当前元素所有最终使用的 CSS 属性值。

  • 示例:

let end_style = window.getComputedStyle(document.getElementByID('test'))
alert(end_style.marginTop)

鼠标滚轮横向滚动 ​

            let ScrollEle = document.querySelector('.scroll-task-main')

            function MouseWheel(e) {
                e = e || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true;
                }

                if (e.preventDefault) {
                    e.preventDefault();
                } else {
                    e.returnValue = false;
                }

                if (e.wheelDelta > 0) {
                    ScrollEle.scrollLeft -= 60
                } else {
                    ScrollEle.scrollLeft += 60
                }

            }
            ScrollEle.onmousewheel = MouseWheel

textarea 自动增高并隐藏滚动条 ​

<textarea id="tValue" style="overflow-y:hidden; height:20px;" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

textarea 高度自适应 参考 1参考 2 ​

input、textarea、div(contenteditable=true)光标定位到最后 参考 1 ​

手机端点击其他组件调起 select ​

将 select 透明，然后通过定位将组件放到 select 位置

判断多个或者单个图片是否加载完成 ​

在 Google 浏览器图片加载以后就不会调起 onload 方法,所以需要通过 complete 去判断

let btnPromises = []
        btnPromises.push(new Promise((res, rej) => {
            let ele = document.getElementById('down-ios-img')
            if (!ele.complete) {
                ele.onload = () => {
                    res()
                }
            } else {
                res()
            }

        }))
        btnPromises.push(new Promise((res, rej) => {
            let ele = document.getElementById('down-andriod-img')
            if (!ele.complete) {
                ele.onload = () => {
                    res()
                }
            } else {
                res()
            }
        }))
        Promise.all(btnPromises).then(() => {
            let ele = document.getElementById('btn-animate')
            ele.velocity({ left: '0px', opacity: 1 }, { duration: 1000 });
        })

微信支付浏览器 url 传参只能传一个 ​

使用 encodeURIComponent 包装一层,使用 encodeURI 只会对中文转码,&和/不会转码

encodeURI 和 encodeURIComponent 的区别在于前者被设计来用于对完整 URL 进行 URL Encode，于是 URL 中的功能字符，比如&, ?, /, =等等这些并不会被转义；而后者被设计来对一个 URL 中的值进行转义，会把这些功能字符也进行转义。