实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)
1.textarea高度自适应
这个非常有用,但是网上的解决方案都不尽人意,话不多说,上代码。
function auto (elem) {
var minHeight = 30
var change = function () {
elem.style.height = minHeight + 'px'
elem.style.overflowY = 'hidden'
if (elem.scrollHeight > minHeight) {
elem.style.height = elem.scrollHeight + 'px'
}
}
elem.addEventListener("input", change, false)
elem.addEventListener("focus", change, false)
elem.addEventListener("propertychange", change, false)
change()
}
思路很简单,根据内容高度不断重置textarea高度,绑定input, focus, propertychange事件
2.自动计算Y轴高度,先放算法参考链接:https://stackoverflow.com/questions/326679/choosing-an-attractive-linear-scale-for-a-graphs-y-axis
意思就是给定几个数值,要能在y轴上较好的展示(算出上下限和区间值)
function scaleNumber (max, min, i) {
let unround = (max - min) / i // 等分刻度
let x = Math.ceil(Math.log10(unround))
let pow10x = Math.pow(10, x)
let arr = [0.1, 0.2, 0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.75, 0.8, 0.9, 1]
for (let item of arr) {
if (unround / pow10x <= item) {
var range = item * pow10x
break
}
}
console.log(range)
min = range * Math.floor(min / range)
max = range * Math.ceil(max / range)
return [max, min]
}
参数i表示需要分几段
3.json转table,这个比较简单但是也比较实用,就记录下来:
function json2html (str) {
var reg = /\[{2}((?!\]\]).)+\]{2}/g
var jsonstrarr = []
var htmlstrarr = []
var result
while((result = reg.exec(str)) !== null) {
// console.log(result)
jsonstrarr.push(result[0])
}
console.log(jsonstrarr)
for (let item of jsonstrarr) {
let obj = JSON.parse(item)
let htmlstr = `<table cellpadding="0" border="1">`
for (let i of obj) {
htmlstr += '<tr>'
for (let j of i) {
htmlstr += `<td colspan="${j.col}" rowspan="${j.row}">${j.value}</td>`
}
htmlstr += '</tr>'
}
htmlstr += '</table>'
htmlstrarr.push(htmlstr)
}
let newstr = str
for (let index in jsonstrarr) {
newstr = newstr.replace(jsonstrarr[index], htmlstrarr[index])
}
return newstr
}
实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)的更多相关文章
- Python趣味实用小工具
代码地址如下:http://www.demodashi.com/demo/12918.html python 趣味实用小工具 概述 用python实现的三个趣味实用小工具: 图片转Execl工具 , ...
- ANDROID开发实用小工具
分享一些 Android开发中的实用小工具,你有发现好工具吗? 来这里分享一下呗 一.find bugs 静态检查工具 http://findbugs.sourceforge.net/ FindBug ...
- 批量下载网站图片的Python实用小工具(下)
引子 在 批量下载网站图片的Python实用小工具 一文中,讲解了开发一个Python小工具来实现网站图片的并发批量拉取.不过那个工具仅限于特定网站的特定规则,本文将基于其代码实现,开发一个更加通用的 ...
- 微信小程序解决方案合集
微信小程序解决方案合集:http://www.wxapp-union.com/special/solution.html 跳坑系列:http://www.wxapp-union.com/forum.p ...
- (转)超全整理!Linux性能分析工具汇总合集
超全整理!Linux性能分析工具汇总合集 原文:http://rdc.hundsun.com/portal/article/731.html 出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望, ...
- 实用小工具推荐 OpenWrite
[实用小工具推荐]给技术同学们推荐一款比较好用的工具,可以实现一稿多发,主流的技术渠道基本涵盖了:https://www.openwrite.cn/ 因为工作的关系,认识了很多做技术公众号的小伙伴,同 ...
- 实用小工具:screen
实用小工具:screen 首先,吹爆screen screen,实现了不间断的会话服务,通过SSH连接至远程服务器,当使用了screen开启的会话,不会因为你断开SSH而中断在远程服务器上运行的命令. ...
- textarea高度自适应自动展开
在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...
- Xcode 4.1实用小工具:模拟网络连接和带宽
暂无评论 适用于Mac OS X Lion的开发套件Xcode 4.1中,有个新鲜的小工具叫做Network Link Conditioner(网络连接调节器),是一款具有高度可定制性的辅助工具,让用 ...
随机推荐
- linux 文件权限除了r、w、x外还有s、t、i、a权限说明
linux 文件权限除了r.w.x外还有s.t.i.a权限 s: 文件属主和组设置SUID和GUID,文件在被设置了s权限后将以root身份执行.在设置s权限时文件属主.属组必须先设置相应的x权限,否 ...
- CF24D Broken robot 后效性DP
这题咕了好久..... 设$f[i][j]$表示从$(i,j)$到最后一行的期望步数: 则有 $ f[i][1]=\frac{1}{3}(f[i][1]+f[i][2]+f[i+1][1])+1$ $ ...
- 记录一个直接操作mediawiki数据库遇到的坑
我的mediawiki使用的是postgresql数据库,当你进入到mediawiki数据库时,运行sql select * from pg_tables; 你会发现mediawiki的数据表的sch ...
- 牛客网Java刷题知识点之构造函数是什么、一般函数和构造函数什么区别呢、构造函数的重载、构造函数的内存图解
不多说,直接上干货! 构造函数是什么? 构建创造对象时调用的函数. 构造函数是一种特殊的函数,用来在对象实例化时初始化对象的成员变量. 注意: 创建对象都必须要通过构造函数初始化. 构造函数的特点 ...
- discuz迁移到虚拟空间后无法上传图片的问题
discuz X3迁移到虚拟空间后无法上传图片,提示"附件无法保存": 解决方法: 1.看看虚拟空间的容量是不是满了. 2.登录管理员后台,工具->更新缓存.
- Windows下 bat调用TSql问题
一.建立sql文件 在sql管理工具中写好sql文件,并保证能够正常运行,之后用unique编码保存. 二.建立一个bat文件osql -U登录用户 -P密码 -S服务器 <sql文件.sql ...
- linux笔记学习大全,包括相关软件
1.如果tomcat正常启动,内部浏览器可以访问,外部电脑的浏览器布恩那个访问? 可以使用如下命令: iptables -F firewall-cmd --add-port=8080/tcp --pe ...
- Aspose.cell生成表格
public void ExportQueryPrj(HttpContext context) { //接受前端传递参数和数据 st ...
- jmeter压测配置
windows上面修改最大使用端口数和time_await等待时间 注册表需要添加两个配置,位置:HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ S ...
- usb-host一步一步学(一)安卓在usb-host模式下列出当前连接的usb设备
在本次尝试中,我的安卓手机(HTC One X) 通过OTG线作为usb主机模式列出当前插入的usb设备,版本要求minSDKVersion="12". 没有外设的情况下,结果如下 ...