h7ml-前端物语

代码展示

生活的洪流欲让人们窒息，我们却在缺氧的环境中肆意成长。

libie

chart

一个块状图案例

一个块状图案例

一个气泡图案例

一个气泡图案例

一个线状图案例

一个线状图案例

一个玫瑰图案例

一个玫瑰图案例

一个雷达图案例

一个雷达图案例

一个散点图案例

一个散点图案例

一个折线图案例

一个折线图案例

一个柱状图案例

一个柱状图案例

一个基础南丁格尔玫瑰图案例

一个基础南丁格尔玫瑰图案例

mermaid

code

一个普通 Demo

一个普通 Demo
<h1>h7ml</h1>
<p>
  <span id="very">十分</span>
  帅
</p>

document.querySelector('#very').addEventListener('click', () => {
  alert('十分帅')
})

span {
  color: red;
}

jquery Demo

jquery Demo
<p id="veryjquery">风华，深音，许我一场物是人非。</p>

var two_chars_words =
  '朱砂 天下 杀伐 人家 韶华 风华 繁华 血染 墨染 白衣 素衣 嫁衣 倾城 孤城 空城 旧城 旧人 伊人 心疼 春风 古琴 无情 迷离 奈何 断弦 焚尽 散乱 陌路 乱世 笑靥 浅笑 明眸 轻叹 烟火 一生 三生 浮生 桃花 梨花 落花 烟花 离殇 情殇 爱殇 剑殇 灼伤 仓皇 匆忙 陌上 清商 焚香 墨香 微凉 断肠 痴狂 凄凉 黄梁 未央 成双 无恙 虚妄 凝霜 洛阳 长安 江南 忘川 千年 纸伞 烟雨 回眸 公子 红尘 红颜 红衣 红豆 红线 青丝 青史 青冢 白首 白骨 黄土 黄泉 碧落 紫陌 浅唱 寂灭 无声 邂逅 流年 落寂 叙述 唯爱 晨曦 回忆 错落 迷茫 恬静 默诺 余音 情殇 背殇 落幕 黯然 拾忆 独寂 透彻 水影 浅陌 无垠 似水 流年 深音 铭记 迷遇 暖光 蘩藜 尘宵 磬音 黯伤 醉生 沉静 寂冷 白发'.split(
    ' '
  )

var four_chars_words =
  '情深缘浅 情深不寿 莫失莫忘 阴阳相隔 如花美眷 似水流年 眉目如画 曲终人散 繁华落尽 不诉离殇 一世长安 半世烟尘 落梅似雪 冷月花魂 平湖秋月 蝶恋忆回 秋水伊人 断桥残雪 风动铃心 伊人已逝 望断秋水 似水流年 如花美眷 落晚芳菲 沧山映水 上善若水 匠心独运 倾国倾城 天香国色 浑然一体 如梦如幻 风华绝代 繁华落尽 寂寞如烟 独坐如莲 清风有情 明月可鉴 落花有情 流水可懂 流星有情 星空可睹 红颜有梦 陌上花开 弦断花落 似水流年 物是人非 昔云楚楚 紫燕悠悠 在水一方 雪殇若兮 燕笑语兮 清风扶柳 夕颜若雪 笑若扶风 凭兰秋思 素兮饶眉 雨夜聆风 月舞神殇 似水流年 此去经年 烟雨平生 宛如红袖 飞泉鸣玉 曾经沧海 谁堪共语 古道西风 流荆默望 往事如烟 静水流深 相濡以沫 笑靥如花 花开堪折 浮生若梦 情非得已 思绪万千 豆寇年华 地老天荒 曲终人散 沧海桑田 柒指流年 灯火阑珊 与子偕老 过眼云烟 生如夏花 尘埃落定 彼岸流年 莫矢莫忘'.split(
    ' '
  )
var sentence_model =
  'xx，xx，xx了xx。 xxxx，xxxx，不过是一场xxxx。 你说xxxx，我说xxxx，最后不过xxxx。 xx，xx，许我一场xxxx。 一x一x一xx，半x半x半xx。 你说xxxxxxxx，后来xxxxxxxx。 xxxx，xxxx，终不敌xxxx。 xx，xxxx，xx，xxxx。 用我xxxx，换你xxxx。'.split(
    ' '
  )

// random number
function getR(num) {
  return Math.round(Math.random() * num)
}

// generator sentence
function getS() {
  var len1 = sentence_model.length
  var len2 = two_chars_words.length
  var len3 = four_chars_words.length
  var model = sentence_model[getR(len1 - 1)]
  var x = 0
  while (model.indexOf('xxxx') != -1) {
    model = replaceS(model, four_chars_words[getR(len3 - 1)])
  }
  while (model.indexOf('xx') != -1) {
    model = replaceS(model, two_chars_words[getR(len2 - 1)])
  }
  while (model.indexOf('x') != -1) {
    var one_chars_words = two_chars_words[getR(len2 - 1)].charAt(getR(1))
    model = replaceS(model, one_chars_words)
  }
  return model
}

function replaceS(model, term) {
  var m = model.split('') // string -> array
  var t = term.split('')
  var x = 0
  for (var i = 0; i < m.length; i++) {
    if (m[i] == 'x') {
      x++
    } else {
      x = 0
    }
    if (x == t.length) {
      for (var j = 0; j < t.length; j++) {
        m[i - j] = t[t.length - 1 - j]
      }
      break
    }
  }
  return m.join('') //array -> string
}

function addS() {
  document.getElementById('veryjquery').innerText = getS()
}

$(function () {
  setInterval(addS(), 3000)
})
window.onload = function () {
  setInterval(() => {
    addS()
  }, 1000)
}
document.querySelector('#veryjquery').addEventListener('click', () => {
  addS()
})

#veryjquery {
  color: red;
}

一个函数式 React Demo

[react] 一个函数式 React Demo
export default () => {
  const message = '十分帅'

  const handler = () => {
    alert(message)
  }

  return (
    <div className="box">
      h7ml
      <span id="very" onClick={handler}>
        {message}
      </span>
    </div>
  )
}

.box span {
  color: blue;
}

Vue Demo

[vue] 一个 Vue Demo
<template>
  <div class="box">
    h7ml
    <span @click="handler">{{ message }}</span>
  </div>
</template>
<script>
  export default {
    data: () => ({ message: '十分帅' }),
    methods: {
      handler() {
        alert(this.message)
      },
    },
  }
</script>
<style>
  .box span {
    color: red;
  }
</style>

一个使用浏览器不支持解析语言 Demo

一个使用浏览器不支持解析语言 Demo
# 标题

十分帅

const message: string = 'h7ml'

document.querySelector('h1').innerHTML = message

h1 {
  font-style: italic;

  + p {
    color: red;
  }
}

react-demo 一个类式 React Demo

一个类式 React Demo
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { message: '帅' }
  }
  handler() {
    this.setState((state) => ({
      message: `十分${state.message}`,
    }))
  }
  render() {
    return (
      <div className="box">
        <code>h7ml</code>
        <span id="powerful" onClick={this.handler.bind(this)}>
          {this.state.message}
        </span>
      </div>
    )
  }
}

.box #powerful {
  color: blue;
}

Vue Composition Demo

一个 Vue Composition Demo
<template>
  <div class="box">
    <code>h7ml</code>
    is
    <span @click="handler">{{ message }}</span>
    !
  </div>
</template>
<script>
  const { ref } = Vue

  export default {
    setup() {
      const message = ref('powerful')

      const handler = () => {
        message.value = 'very ' + message.value
      }

      return {
        message,
        handler,
      }
    },
  }
</script>
<style>
  .box span {
    color: red;
  }
</style>

Vue Option Demo

一个 Vue Option 演示
<template>
  <div class="box">
    <code>h7ml</code>
    is
    <span @click="handler">{{ message }}</span>
    !
  </div>
</template>
<script>
  export default {
    data: () => ({ message: 'powerful' }),
    methods: {
      handler() {
        this.message = 'very ' + this.message
      },
    },
  }
</script>
<style>
  .box span {
    color: red;
  }
</style>
MIT Licensed | Copyright © 2022-present h7ml