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>

JavaScript练习-情话生成器

JavaScript练习-情话生成器

简介

基础知识

HTML DOM querySelector() 方法

完整代码

相关推荐