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>
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22