分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

实用小工具不定期合集(textarea 高度自适应、自动计算Y轴刻度、json转table)

发布时间:2023-09-06 02:15责任编辑:熊小新关键词:jsjson自适应

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)

原文地址:https://www.cnblogs.com/CheapTrick/p/9688381.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved