实用小工具不定期合集(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
    }

 

转载于:https://www.cnblogs.com/CheapTrick/p/9688381.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值