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

原创已于 2025-08-30 18:19:06 修改 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2019-12-06 12:46:57 首次发布

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了如何避免使用内联JavaScript处理器，转而采用更高效的DOM事件监听器。通过一个JavaScript练习——情话生成器，展示了如何运用querySelector()方法选取元素，并结合事件监听器实现功能。此外，还分享了两个有趣的JavaScript应用实例。

文章目录

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>

在这里插入图片描述