1秒自动写诗程序彩虹背景代码

04050

生成好诗难，生成一般的诗还不容易？使用这个生成器，1秒即可生成至少千余首诗。

如果不欣赏诗，也可以参考下文字动效和彩虹背景的实现原理，应用到自己的网站来显示其它内容。

如何看待 14 岁突然火起来的岑怡诺，其简历称「一天能写 2000 首诗」? – 乔加西的回答 – 知乎-，某人一天能写 2000 首诗，计算机毫秒间就可以生成

效果截图：

1秒自动写诗程序彩虹背景代码插图

具体使用：

本地新建一个网页文件，将html，css，js代码完整的复制到网页中合适的位置中即可，

在js的代码中都有注释说明，你可以更改里面的一些词语，换成自己想要的词，这样就可以生成你喜欢的诗句了。

html代码：

<!--灵感：如何看待 14 岁突然火起来的岑怡诺，其简历称「一天能写 2000 首诗」? - 乔加西的回答 - 知乎-->
    <p style="--order: 0;">不要急</p>
    <p style="--order: 1;">正在加载</p>
    <p style="--order: 2;">马上就好</p>
    <noscript>
      <p style="--order: 0;">要想诗歌</p>
      <p style="--order: 1;">写得好</p>
      <p style="--order: 2;">JavaScript</p>
      <p style="--order: 3;">少不了</p>
    </noscript>
<!--灵感：如何看待 14 岁突然火起来的岑怡诺，其简历称「一天能写 2000 首诗」? - 乔加西的回答 - 知乎-->
    <p style="--order: 0;">不要急</p>
    <p style="--order: 1;">正在加载</p>
    <p style="--order: 2;">马上就好</p>
    <noscript>
      <p style="--order: 0;">要想诗歌</p>
      <p style="--order: 1;">写得好</p>
      <p style="--order: 2;">JavaScript</p>
      <p style="--order: 3;">少不了</p>
    </noscript>
<!--灵感：如何看待 14 岁突然火起来的岑怡诺，其简历称「一天能写 2000 首诗」? - 乔加西的回答 - 知乎-->
		<p style="--order: 0;">不要急</p>
		<p style="--order: 1;">正在加载</p>
		<p style="--order: 2;">马上就好</p>
		<noscript>
		  <p style="--order: 0;">要想诗歌</p>
		  <p style="--order: 1;">写得好</p>
		  <p style="--order: 2;">JavaScript</p>
		  <p style="--order: 3;">少不了</p>
		</noscript>

css代码：

<style type="text/css">
      html,body {
        height:100%;
        width:100%;
      }
      body {
        margin:0;
        background:linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#cdd115,#16d836,#15c8d1,#2b1de8,#dd00f3,#dd00f3);
        background-size:1800% 1800%;
        animation:rainbow 15s ease infinite;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        /*counter-reset:delay;
        */
      }
      @keyframes rainbow {
        0% {
        background-position:0% 82%;
      }
      25% {
        background-position:50% 50%;
      }
      50% {
        background-position:100% 19%;
      }
      75% {
        background-position:100% 100%;
      }
      100% {
        background-position:0% 82%;
      }
      }p {
        font-size:30px;
        height:50px;
        line-height:50px;
        animation:slideup .6s cubic-bezier(0,0.9,0.1,1);
        margin:0;
        /*纯CSS方法失败*/
        /*counter-increment:delay;
        animation-delay:calc( 50ms * ( counter(delay) - 1) );
        */
        animation-delay:calc( 50ms * var(--order) );
        animation-fill-mode:backwards;
        color:white;
      }
      @keyframes slideup {
        from {
        color:transparent;
        transform:translateY(50px);
      }
      to {
        color:white;
        transform:translateY(0);
      }
      }
    </style>
<style type="text/css">
      html,body {
        height:100%;
        width:100%;
      }
      body {
        margin:0;
        background:linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#cdd115,#16d836,#15c8d1,#2b1de8,#dd00f3,#dd00f3);
        background-size:1800% 1800%;
        animation:rainbow 15s ease infinite;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        /*counter-reset:delay;
        */
      }
      @keyframes rainbow {
        0% {
        background-position:0% 82%;
      }
      25% {
        background-position:50% 50%;
      }
      50% {
        background-position:100% 19%;
      }
      75% {
        background-position:100% 100%;
      }
      100% {
        background-position:0% 82%;
      }
      }p {
        font-size:30px;
        height:50px;
        line-height:50px;
        animation:slideup .6s cubic-bezier(0,0.9,0.1,1);
        margin:0;
        /*纯CSS方法失败*/
        /*counter-increment:delay;
        animation-delay:calc( 50ms * ( counter(delay) - 1) );
        */
        animation-delay:calc( 50ms * var(--order) );
        animation-fill-mode:backwards;
        color:white;
      }
      @keyframes slideup {
        from {
        color:transparent;
        transform:translateY(50px);
      }
      to {
        color:white;
        transform:translateY(0);
      }
      }
    </style>
<style type="text/css">
			html,body {
				height:100%;
				width:100%;
			}
			body {
				margin:0;
				background:linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#cdd115,#16d836,#15c8d1,#2b1de8,#dd00f3,#dd00f3);
				background-size:1800% 1800%;
				animation:rainbow 15s ease infinite;
				display:flex;
				flex-direction:column;
				justify-content:center;
				align-items:center;
				/*counter-reset:delay;
				*/
			}
			@keyframes rainbow {
				0% {
				background-position:0% 82%;
			}
			25% {
				background-position:50% 50%;
			}
			50% {
				background-position:100% 19%;
			}
			75% {
				background-position:100% 100%;
			}
			100% {
				background-position:0% 82%;
			}
			}p {
				font-size:30px;
				height:50px;
				line-height:50px;
				animation:slideup .6s cubic-bezier(0,0.9,0.1,1);
				margin:0;
				/*纯CSS方法失败*/
			  /*counter-increment:delay;
				animation-delay:calc( 50ms * ( counter(delay) - 1) );
				*/
			  animation-delay:calc( 50ms * var(--order) );
				animation-fill-mode:backwards;
				color:white;
			}
			@keyframes slideup {
				from {
				color:transparent;
				transform:translateY(50px);
			}
			to {
				color:white;
				transform:translateY(0);
			}
			}
		</style>

js代码：

<script type="text/javascript">
      //Shift键磨损行为
      const 词汇 = {
          2: [
              "垂杨", "新柳", "金嫩", "柔条", "柳丝", "闲柳", "花海",
              "芳甸", "吐嫩", "摇绿", "绿卷", "浓翠", "横翠", "金碧",
              "舒卷", "款款", "片片", "缕缕", "新晴", "笼晴", "韶光",
              "婉媚", "温丽", "芊绵", "春华", "空灵", "春柔", "清婉",
              "馨烈", "和婉", "清蕊", "清芬", "素约", "红素", "旖旎",
              "飞花", "浮花", "落英", "花影", "芳丛", "浮香", "锦花",
              "绣草", "烂漫", "芳踪", "镂玉", "雕琼", "繁枝", "素景",
              "密叶", "稠花", "点水", "扑面", "风轻", "水胧", "倚暖"
          ],
          3: [
              "玉丝纶", "落纷纷", "胭脂色",
              "水溶溶", "不留痕", "几点春",
              "邀春驻", "花映柳", "花深浅",
              "树高低", "翻微风", "香接天"
          ],
          4: [
              "曲岸垂杨", "千花万柳", "浓露飘香",
              "软软东风", "水逝云卷", "繁花盈枝",
              "百卉团团", "和风轻暖", "春光满树",
              "秀色灼灼", "红尘倦客", "柳带摇风",
              "香坠庭户", "水阔花飞", "瘦叶和风",
              "叶叶心心", "眼迷魂牵", "浅粉深红" // 不够的话来点儿《生僻字》的歌词
          ]
      };
      const 短模板 = [ //三言及以下
          //一言
          "啊",
          //二言
          "2",
          "人啊",
          "人呢",
          //三言
          "3",
          "2呢",
          "2啊",
          "是2"
      ];
      const 长模板 = [ //四言及以上
          //四言
          "4",
          "22",
          "3兮",
          //五言
          "23",
          "32",
          "4兮",
          "22兮",
          "是4",
          "是22",
          //六言
          "33",
          "42",
          "24",
          "222",
          //这里可以再兮一把，不过我懒得兮
          //七言
          "223",
          "43",
          "322",
          "34",
          "33兮",
          "42兮",
          "24兮",
          "222兮"
      ];
      const 长短模板 = [...短模板, ...长模板];
      const 套模板 = 模板 => 模板.replace(
          /\d/g,
          长度 => 随机抽取(词汇[长度])
      );
      const 随机抽取 = 数组 => 数组[
          Math.round(
              Math.random() * (数组.length - 1)
          )
      ];
      
      function 插入身体(诗句, 顺序) {
          const 段落 = document.createElement('p');
          段落.style.setProperty('--order', 顺序);
          段落.append(诗句);
          document.body.append(段落);
      }
      setInterval(() => {
          for (let 旧句子 of document.querySelectorAll('p'))
              旧句子.remove();
          const 长度因素 = Math.random() * 2 | 0;
          let 诗句;
          if (Math.random() > 0.5) // true 代表它是错落诗
              诗句 = Array(长度因素 + 6)
              .fill(2333) //不填点什么map就不工作
              .map(() => 随机抽取(长短模板));
          else
              诗句 = Array(长度因素 * 2 + 4)
              .fill(随机抽取(长模板));
          诗句
              .map(套模板)
              .forEach(插入身体);
      }, 1000);
    </script>
<script type="text/javascript">
      //Shift键磨损行为
      const 词汇 = {
          2: [
              "垂杨", "新柳", "金嫩", "柔条", "柳丝", "闲柳", "花海",
              "芳甸", "吐嫩", "摇绿", "绿卷", "浓翠", "横翠", "金碧",
              "舒卷", "款款", "片片", "缕缕", "新晴", "笼晴", "韶光",
              "婉媚", "温丽", "芊绵", "春华", "空灵", "春柔", "清婉",
              "馨烈", "和婉", "清蕊", "清芬", "素约", "红素", "旖旎",
              "飞花", "浮花", "落英", "花影", "芳丛", "浮香", "锦花",
              "绣草", "烂漫", "芳踪", "镂玉", "雕琼", "繁枝", "素景",
              "密叶", "稠花", "点水", "扑面", "风轻", "水胧", "倚暖"
          ],
          3: [
              "玉丝纶", "落纷纷", "胭脂色",
              "水溶溶", "不留痕", "几点春",
              "邀春驻", "花映柳", "花深浅",
              "树高低", "翻微风", "香接天"
          ],
          4: [
              "曲岸垂杨", "千花万柳", "浓露飘香",
              "软软东风", "水逝云卷", "繁花盈枝",
              "百卉团团", "和风轻暖", "春光满树",
              "秀色灼灼", "红尘倦客", "柳带摇风",
              "香坠庭户", "水阔花飞", "瘦叶和风",
              "叶叶心心", "眼迷魂牵", "浅粉深红" // 不够的话来点儿《生僻字》的歌词
          ]
      };
      const 短模板 = [ //三言及以下
          //一言
          "啊",
          //二言
          "2",
          "人啊",
          "人呢",
          //三言
          "3",
          "2呢",
          "2啊",
          "是2"
      ];
      const 长模板 = [ //四言及以上
          //四言
          "4",
          "22",
          "3兮",
          //五言
          "23",
          "32",
          "4兮",
          "22兮",
          "是4",
          "是22",
          //六言
          "33",
          "42",
          "24",
          "222",
          //这里可以再兮一把，不过我懒得兮
          //七言
          "223",
          "43",
          "322",
          "34",
          "33兮",
          "42兮",
          "24兮",
          "222兮"
      ];
      const 长短模板 = [...短模板, ...长模板];
      const 套模板 = 模板 => 模板.replace(
          /\d/g,
          长度 => 随机抽取(词汇[长度])
      );
      const 随机抽取 = 数组 => 数组[
          Math.round(
              Math.random() * (数组.length - 1)
          )
      ];
      
      function 插入身体(诗句, 顺序) {
          const 段落 = document.createElement('p');
          段落.style.setProperty('--order', 顺序);
          段落.append(诗句);
          document.body.append(段落);
      }
      setInterval(() => {
          for (let 旧句子 of document.querySelectorAll('p'))
              旧句子.remove();
          const 长度因素 = Math.random() * 2 | 0;
          let 诗句;
          if (Math.random() > 0.5) // true 代表它是错落诗
              诗句 = Array(长度因素 + 6)
              .fill(2333) //不填点什么map就不工作
              .map(() => 随机抽取(长短模板));
          else
              诗句 = Array(长度因素 * 2 + 4)
              .fill(随机抽取(长模板));
          诗句
              .map(套模板)
              .forEach(插入身体);
      }, 1000);
    </script>
<script type="text/javascript">
			//Shift键磨损行为
			const 词汇 = {
			    2: [
			        "垂杨", "新柳", "金嫩", "柔条", "柳丝", "闲柳", "花海",
			        "芳甸", "吐嫩", "摇绿", "绿卷", "浓翠", "横翠", "金碧",
			        "舒卷", "款款", "片片", "缕缕", "新晴", "笼晴", "韶光",
			        "婉媚", "温丽", "芊绵", "春华", "空灵", "春柔", "清婉",
			        "馨烈", "和婉", "清蕊", "清芬", "素约", "红素", "旖旎",
			        "飞花", "浮花", "落英", "花影", "芳丛", "浮香", "锦花",
			        "绣草", "烂漫", "芳踪", "镂玉", "雕琼", "繁枝", "素景",
			        "密叶", "稠花", "点水", "扑面", "风轻", "水胧", "倚暖"
			    ],
			    3: [
			        "玉丝纶", "落纷纷", "胭脂色",
			        "水溶溶", "不留痕", "几点春",
			        "邀春驻", "花映柳", "花深浅",
			        "树高低", "翻微风", "香接天"
			    ],
			    4: [
			        "曲岸垂杨", "千花万柳", "浓露飘香",
			        "软软东风", "水逝云卷", "繁花盈枝",
			        "百卉团团", "和风轻暖", "春光满树",
			        "秀色灼灼", "红尘倦客", "柳带摇风",
			        "香坠庭户", "水阔花飞", "瘦叶和风",
			        "叶叶心心", "眼迷魂牵", "浅粉深红" // 不够的话来点儿《生僻字》的歌词
			    ]
			};
			const 短模板 = [ //三言及以下
			    //一言
			    "啊",
			    //二言
			    "2",
			    "人啊",
			    "人呢",
			    //三言
			    "3",
			    "2呢",
			    "2啊",
			    "是2"
			];
			const 长模板 = [ //四言及以上
			    //四言
			    "4",
			    "22",
			    "3兮",
			    //五言
			    "23",
			    "32",
			    "4兮",
			    "22兮",
			    "是4",
			    "是22",
			    //六言
			    "33",
			    "42",
			    "24",
			    "222",
			    //这里可以再兮一把，不过我懒得兮
			    //七言
			    "223",
			    "43",
			    "322",
			    "34",
			    "33兮",
			    "42兮",
			    "24兮",
			    "222兮"
			];
			const 长短模板 = [...短模板, ...长模板];
			const 套模板 = 模板 => 模板.replace(
			    /\d/g,
			    长度 => 随机抽取(词汇[长度])
			);
			const 随机抽取 = 数组 => 数组[
			    Math.round(
			        Math.random() * (数组.length - 1)
			    )
			];
			
			function 插入身体(诗句, 顺序) {
			    const 段落 = document.createElement('p');
			    段落.style.setProperty('--order', 顺序);
			    段落.append(诗句);
			    document.body.append(段落);
			}
			setInterval(() => {
			    for (let 旧句子 of document.querySelectorAll('p'))
			        旧句子.remove();
			    const 长度因素 = Math.random() * 2 | 0;
			    let 诗句;
			    if (Math.random() > 0.5) // true 代表它是错落诗
			        诗句 = Array(长度因素 + 6)
			        .fill(2333) //不填点什么map就不工作
			        .map(() => 随机抽取(长短模板));
			    else
			        诗句 = Array(长度因素 * 2 + 4)
			        .fill(随机抽取(长模板));
			    诗句
			        .map(套模板)
			        .forEach(插入身体);
			}, 1000);
		</script>
© 版权声明
版权声明 本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
THE END
主题美化技术教程
喜欢点个赞支持一下吧
点赞0赏币 分享
I can accept failure but I can’t accept not trying.
可以接受暂时的失败，但绝对不能接受未曾奋斗过的自己
大雄的头像-大雄搜集站钻石会员
相关推荐
评论交流 抢沙发

请登录后发表评论

    暂无评论内容

AI影视导航
免费看剧看大片网站推荐收藏-大雄搜集站

1免费看剧看大片网站推荐收藏

大雄的头像-大雄搜集站钻石会员3年前
1.1W+
ChatGPT免费秘钥-gpt网站工具文档汇总-大雄搜集站

2ChatGPT免费秘钥-gpt网站工具文档汇总

大雄的头像-大雄搜集站钻石会员2年前
免费236
超个性动画版本的个人简历源码-大雄搜集站

3超个性动画版本的个人简历源码

大雄的头像-大雄搜集站钻石会员4年前
免费363
免费领取2022年北京冬奥志愿者证书奖品冰墩墩-大雄搜集站

4免费领取2022年北京冬奥志愿者证书奖品冰墩墩

大雄的头像-大雄搜集站钻石会员3年前
1128
原生js炫酷点名随机抽奖-中奖效果源码-大雄搜集站

5原生js炫酷点名随机抽奖-中奖效果源码

大雄的头像-大雄搜集站钻石会员4年前
免费893
精选3个国内在线ChatGPT网站轻松体验免翻墙-大雄搜集站

6精选3个国内在线ChatGPT网站轻松体验免翻墙

大雄的头像-大雄搜集站钻石会员2年前
9994
TOP1
TOP2
TOP3
TOP4
TOP5
TOP6
 

AI影视导航

 
汇聚数百款全球AI工具。各种免费VIP影视免费观看
立即进入🚀
最新评论
江海寄余生的头像-大雄搜集站

江海寄余生35天前0

111111111111111111
一***1的头像-大雄搜集站

一***135天前0

谢谢站长
寻***央的头像-大雄搜集站

寻***央37天前0

123478
poiuy的头像-大雄搜集站

poiuy38天前0

夸就完事了
没必要，真就没必要的头像-大雄搜集站

没必要，真就没必要44天前0

6666666666666
shadow的头像-大雄搜集站

shadow45天前0

大佬，请教下安装完后台打开提示 链接服务器失败 怎么解决
minecraft的头像-大雄搜集站

minecraft50天前0

9884854894
hxhvip1989的头像-大雄搜集站

hxhvip19891个月前0

感谢分享
标签云
重装系统设计视频表白表情包舔狗日记脚本网页模板编程素材程序源码福利破解独立部署特效源码开源源码二开源码买断游戏油猴脚本摸鱼插件接码短信平台抖音影视
坚持每天来逛逛，会让你
生活也美好了！
心情也舒畅了！
走路也有劲了！
腿也不痛了！
腰也不酸了！
工作也轻松了！
你好我也好，不要忘记哦!