2.2 课堂实战2——请按要求设计如下页面1)创建一个网页,页面内容如下;2)使用JS为该页面添加弹窗如下3)使用JS为该页面动态通知如下。要求无论原始课表内容如何变化,通知中周四与周五课程均能和原始课表保持一致:
时间: 2024-09-09 19:13:20 浏览: 33
创建一个包含特定内容的网页并使用JavaScript为它添加弹窗和动态通知,可以分为以下步骤进行:
1. 创建HTML页面:首先,我们需要创建一个HTML文件,里面包含基本的HTML结构,包括`<!DOCTYPE html>`声明、`<html>`、`<head>`和`<body>`标签。在这个`<body>`标签中,我们将添加页面的内容,比如一个表格来展示课表。
2. 使用JavaScript创建弹窗:我们可以使用JavaScript的`window.alert()`函数来创建一个简单的弹窗,或者使用更复杂的模态对话框。弹窗内容可以根据需要来定制,比如显示欢迎信息或者特别提示。
3. 动态生成通知:为了确保通知中周四与周五的课程内容与原始课表保持一致,我们可以使用JavaScript来读取课表表格中的相应数据,并动态地生成通知内容。这通常涉及到DOM操作,比如使用`document.getElementById()`或`document.querySelector()`来获取课表中的数据,并使用`document.createElement()`等方法来创建新的HTML元素。
下面是一个简单的示例代码,展示了如何实现上述要求:
HTML页面示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>课表示例</title>
<script>
// JavaScript代码将放在这里
function createAlertDialog() {
alert("欢迎来到课程页面!");
}
function createDynamicNotification() {
// 假设周四和周五的课程分别在课表的第4行和第5行
var thursdayClass = document.querySelector("table tr:nth-child(4) td:last-child").textContent;
var fridayClass = document.querySelector("table tr:nth-child(5) td:last-child").textContent;
var notification = document.createElement("div");
notification.innerHTML = "本周课程安排:周四有" + thursdayClass + ",周五有" + fridayClass + "。";
document.body.appendChild(notification);
}
</script>
</head>
<body onload="createAlertDialog(); createDynamicNotification();">
<h1>课程表</h1>
<table>
<tr>
<th>时间/日期</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<!-- 课表数据 -->
<tr>
<td>第一节课</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>体育</td>
</tr>
<!-- 其他行数据 -->
</table>
</body>
</html>
```
在这个示例中,当页面加载完成时,`createAlertDialog`函数会被调用,弹出一个欢迎信息的窗口。同时,`createDynamicNotification`函数会被调用,读取表格中周四和周五的课程内容,并在页面上动态创建一个包含这些信息的通知。