<script type="text/javascript"> const tempElement = document.querySelector(".introduce-Eng"); const translationElement = document.querySelector(".introduce-Eng"); translationElement.addEventListener("mouseover", () => { // 将英文文本替换为中文文本 translationElement.innerText = "我的名字是梁颂扬，目前就读于人工智能21-2班，" + "迄今为止，我已经熟练的掌握Python,Java,HTML,CSS,Javascript,Django,Linux Centos7.6," + "能搭建基于Django框架的网络服务器。现在，我正在努力的往Vue，React以及JavaWeb、" + "和其它网页协议学习，致力于成为一名合格的网页全栈开发工程师，同时，为了迎合人工智能时代的发展，我将努力学习机器学习的相关方面。"; // 更新字体颜色和背景颜色 translationElement.style.color = "white"; translationElement.style.backgroundColor = "black"; }); translationElement.addEventListener("mouseout", () => { // 恢复原始文本和样式 translationElement.innerText = tempElement; translationElement.style.color = "black"; translationElement.style.backgroundColor = "white"; }); </script>

时间: 2024-04-11 11:30:30 浏览: 11

这是一段JavaScript代码，它通过监听鼠标的悬停和离开事件来实现文本的替换和样式的改变。首先，代码通过`document.querySelector`方法获取了两个元素，分别是具有类名"introduce-Eng"的元素，分别存储在`tempElement`和`translationElement`变量中。接下来，代码使用`addEventListener`方法给`translationElement`添加了鼠标悬停事件的监听器。当鼠标悬停在该元素上时，将执行一个回调函数。在回调函数中，通过修改`innerText`属性，将英文文本替换为中文文本。同时，修改`style.color`和`style.backgroundColor`属性，改变字体颜色为白色，背景颜色为黑色。同样地，代码使用`addEventListener`方法给`translationElement`添加了鼠标离开事件的监听器。当鼠标离开该元素时，将执行另一个回调函数。在回调函数中，通过恢复原始的英文文本和样式，将`innerText`属性恢复为之前存储在`tempElement`变量中的值，同时修改字体颜色为黑色，背景颜色为白色。这段代码的作用是，在鼠标悬停在指定元素上时，将显示中文文本，并修改样式；鼠标离开时，则恢复原始的英文文本和样式。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="1.css"> <script src="1.js"></script> </head> <body> <div class="login-container"> <h1>登录</h1> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> </div> </body> </html> const form = document.querySelector('form'); const usernameInput = document.querySelector('#username'); const passwordInput = document.querySelector('#password'); form.addEventListener('submit', e => { e.preventDefault(); const username = usernameInput.value; const password = passwordInput.value; if (username == '姜文俊' && password == '123') { alert('登录成功！'); window.location.href = '网页设计.html'; } else { alert('用户名或密码错误！'); } }); 修改此代码使登录有反应

您可以尝试在页面中添加一个用于显示登录状态的元素，例如一个 div 标签，然后在登录成功或失败时动态修改该元素的内容。修改后的代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="1.css"> <script src="1.js"></script> </head> <body> <div class="login-container"> <h1>登录</h1> <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> <div id="login-status"></div>  </div> <script> const form = document.querySelector('form'); const usernameInput = document.querySelector('#username'); const passwordInput = document.querySelector('#password'); const loginStatusDiv = document.querySelector('#login-status'); // 获取用于显示登录状态的元素 form.addEventListener('submit', e => { e.preventDefault(); const username = usernameInput.value; const password = passwordInput.value; if (username == '姜文俊' && password == '123') { loginStatusDiv.textContent = '登录成功！'; // 修改用于显示登录状态的元素的内容 window.location.href = '网页设计.html'; } else { loginStatusDiv.textContent = '用户名或密码错误！'; // 修改用于显示登录状态的元素的内容 } }); </script> </body> </html> 在用户输入正确的用户名和密码后，页面将显示 "登录成功！" 的提示信息，并自动跳转到名为 "网页设计.html" 的页面；在用户输入错误的用户名或密码时，页面将显示 "用户名或密码错误！" 的提示信息。

<body> <div class="countdown"> <p class="next">今天是2023年4月24日</p> <p class="title">下课倒计时</p> <p class="clock"> <span id="hour">00</span> <i>:</i> <span id="minutes">25</span> <i>:</i> <span id="scond">20</span> </p> <p class="tips"> 现在是09:00:00 </p> </div> <script> </script> </body>补全以上的JavaScript代码

可以使用以下代码实现下课倒计时： ``` <script> // 获取倒计时元素 const hourEl = document.getElementById('hour') const minuteEl = document.getElementById('minutes') const secondEl = document.getElementById('scond') // 设定下课时间（24小时制） const hour = 14 const minute = 25 const second = 0 // 更新倒计时函数 function updateCountdown() { // 获取当前时间 const now = new Date() const currentHour = now.getHours() const currentMinute = now.getMinutes() const currentSecond = now.getSeconds() // 计算剩余时间 let remainingHour = hour - currentHour let remainingMinute = minute - currentMinute let remainingSecond = second - currentSecond // 处理时间不足的情况 if (remainingSecond < 0) { remainingSecond += 60 remainingMinute -= 1 } if (remainingMinute < 0) { remainingMinute += 60 remainingHour -= 1 } if (remainingHour < 0) { remainingHour += 24 } // 更新倒计时元素 hourEl.innerText = remainingHour.toString().padStart(2, '0') minuteEl.innerText = remainingMinute.toString().padStart(2, '0') secondEl.innerText = remainingSecond.toString().padStart(2, '0') } // 初次更新倒计时 updateCountdown() // 每秒更新倒计时 setInterval(updateCountdown, 1000) </script> ``` 其中，倒计时元素的 HTML 结构如下： ``` <div class="countdown"> <p class="next">今天是2023年4月24日</p> <p class="title">下课倒计时</p> <p class="clock"> <span id="hour">00</span> <i>:</i> <span id="minutes">25</span> <i>:</i> <span id="scond">20</span> </p> <p class="tips"> 现在是09:00:00 </p> </div> ``` 其中，`hour`、`minutes`、`scond` 分别是小时、分钟和秒数的元素 ID。可以根据实际需要进行修改。

相关推荐

MariaDB Connector/Node.js（mariadb-connector-nodejs-2.5.4.zip）

js代码-解释Promise输出顺序

azure-cosmos-js：@azurecosmos已移至新的仓库https：github.comAzureazure-sdk-for-js

最新推荐

基于SSM+JSP的企业人事管理信息系统毕业设计(源码+录像+说明).rar

zigbee-cluster-library-specification

管理建模和仿真的文件

实现实时数据湖架构：Kafka与Hive集成

spring添加xml配置文件

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"

实现实时监控告警系统：Kafka与Grafana整合

输出这段Python代码输出所有3位整数中，个位是5且是3的倍数的整数

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf