Skip to content
h7ml-前端物语h7ml-前端物语
前端物语
项目主页
github icon

    h7ml

    前端物语

    代码展示 💡

    # 代码演示

    <h1>h7ml</h1>
    <p><span id="very">十分</span> 帅</p>
    
    1
    2
    document.querySelector('#very').addEventListener('click', () => {
      alert('十分帅')
    })
    
    1
    2
    3
    span {
      color: red;
    }
    
    1
    2
    3
    一个普通 Demo
    <p id="veryjquery">风华,深音,许我一场物是人非。</p>
    
    1
    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()
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    #veryjquery {
      color: red;
    }
    
    1
    2
    3
    jquery Demo
    export default () => {
      const message = '十分帅'
    
      const handler = () => {
        alert(message)
      }
    
      return (
        <div className="box">
          h7ml
          <span id="very" onClick={handler}>
            {message}
          </span>
        </div>
      )
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .box span {
      color: blue;
    }
    
    1
    2
    3
    一个函数式 React 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>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    一个 Vue Demo
    # 标题
    
    十分帅
    
    1
    2
    3
    const message: string = 'h7ml'
    
    document.querySelector('h1').innerHTML = message
    
    1
    2
    3
    h1 {
      font-style: italic;
    
      + p {
        color: red;
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    一个使用浏览器不支持解析语言 Demo

    MIT Licensed | Copyright © 2019-present h7ml

    该应用可以安装在你的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和你的操作系统安全地进行交互。

    详情