内联 JavaScript 处理器、JavaScript练习-情话生成器

文章目录

HTML 中存在着真实的 JavaScript 代码
可以使用纯 JavaScript 结构来通过一个指令选取所有按钮
JavaScript练习-情话生成器
- HTML DOM querySelector() 方法
- 完整代码

HTML 中存在着真实的 JavaScript 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>使用 JavaScript 的示例</title><script>function createParagraph() {const para = document.createElement('p');para.textContent = '你点击了这个按钮！';document.body.appendChild(para);}</script></head><body><button onclick="createParagraph()">点我呀</button></body>
</html>

在 <button> 元素中包含了一个内联的 onclick 处理器，使得函数在按钮被按下时运行。效率低下。对于每个需要应用 JavaScript 的按钮，你都得手动添加 onclick="createParagraph()"属性。

可以使用纯 JavaScript 结构来通过一个指令选取所有按钮

这是一个事件监听器，监听浏览器的 “DOMContentLoaded” 事件，即 HTML 文档体加载、解释完毕事件。事件触发时将调用 " . . ." 处的代码。

示例：

document.addEventListener("DOMContentLoaded", function() {. . .
});

示例一

guessSubmit 按钮添加了一个事件监听器，addEventListener() 方法包含两个可输入值（称为“参数”（argument）），监听事件的类型（本例中为“click”），和当事件发生时我们想要执行的代码（本例中为 checkGuess() 函数）。

guessSubmit.addEventListener('click', checkGuess);

示例二

DOMContentLoaded这个事件可以替代window.onload事件。querySelectorAll获取标签button的句柄，然后绑定createParagraph()函数。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>使用 JavaScript 的示例</title><script>document.addEventListener("DOMContentLoaded", function() {function createParagraph() {const para = document.createElement('p');para.textContent = '你点击了这个按钮！';document.body.appendChild(para);}const buttons = document.querySelectorAll('button');for(let i = 0; i < buttons.length ; i++) {buttons[i].addEventListener('click', createParagraph);}});</script></head><body><button>点我呀</button></body>
</html>

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>