JavaScript 练习 - 情话生成器

简介

在网络上总是有各种各样的新鲜项目!

善于学习知识, 然后利用到生活的方方面面应该是每个程序员都想过的. 对于我这种渣渣程序员也不例外. 学了 JavaScript, 碰巧在微信群里看到有网友发了这两个网站.

渣男: 说话的艺术 https://lovelive.tools/

骂人宝典 https://nmsl.shadiao.app/

这两个网站都是调用本身存储的语句然后生成. 想了一下用 JavaScript 实现其实也非常容易. 这是做完以后的 demo.

基础知识

html DOM querySelector() 方法

作用: 返回文档中匹配指定 CSS 选择器的一个元素.

语法: document.querySelector(CSS selectors)

##  获取文档中 id="demo" 的元素:
document.querySelector("#demo");
## 获取文档中第一个 <p> 元素:
document.querySelector("p");
## 获取文档中 class="example" 的第一个元素:
document.querySelector(".example");
## 获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");
## 获取文档中有 "target" 属性的第一个 <a> 元素:
document.querySelector("a[target]");

完整代码

<!DOCTYPE HTML>
<HTML>
  
  <body>
    <h2>
      JavaScript 练习 - 情话生成器
    </h2>
    <button class="build_example">
      随机生成
    </button>
    <p id="demo">
    </p>
    <script>
      /**  情话集合 */
      var lovesong = ["你眼瞎吗 撞我心口上了",

""不要抱怨" "抱我"",

"美好的事情你都用脸做到了",
"你是什么人 你是我的心上人",
"我不想撞南墙了 只想撞你的胸膛",
"我一点不想你 但一点半想你了",
"虽然溜肩, 但是锁骨真好看",
"我对你的爱, 就像拖拉机上山轰轰烈烈",
"你就委屈一下, 栽在我手里行不行?"];
// 获取指定区间范围随机数, 包括 lowerValue 和 upperValue
function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
/** 按钮点击 **/
document.addEventListener("DOMContentLoaded", function() {
    function createParagraph() {
        /* 随机数生成 */
        var upperValue = lovesong.length-1;
        var lowerValue = 0;
      let pre = 0;    /** 存储上一个数字 **/
        var random = randomFrom(upperValue,lowerValue);      /** 第一次生成随机数 **/
        while(random == pre)                                 /**  和上一次的值不相同 **/
        {
            random = randomFrom(upperValue,lowerValue);
            if (random != pre) {
                break;
            }
        }
        document.getElementById("demo").innerHTML = lovesong[random];   /** 变换内容 **/
        pre = random;
    }
    const btnBuilds = document.querySelector(".build_example");    // 随机生成
    btnBuilds.addEventListener('click', createParagraph);
});
</script>
</body>
</HTML>

来源: http://www.bubuko.com/infodetail-3258806.html

与本文相关文章

不错快递给力,大枣美味

2020-08-21

你好

2020-06-01