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

Posted 2021-01-07 cheaptrick

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
    }