用js写一个课程播放的页面
时间: 2023-12-10 21:04:08 浏览: 24
好的,以下是一个简单的课程播放页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>课程播放页面</title>
</head>
<body>
<h1>课程名称</h1>
<video id="videoPlayer" width="640" height="360" controls>
<source src="video.mp4" type="video/mp4" />
</video>
<script>
// 获取视频元素
var video = document.getElementById("videoPlayer");
// 播放课程视频
video.play();
</script>
</body>
</html>
```
在这个示例中,我们使用了 HTML5 的 `<video>` 标签来播放视频,同时使用 JavaScript 控制视频的播放。你可以将 `video.mp4` 替换为你自己的视频文件,然后在浏览器中打开这个 HTML 文件,就可以开始播放课程视频了。
相关问题
用javascript写一个课程表
好的,以下是一个简单的用 JavaScript 实现的课程表:
HTML 代码:
```html
<table id="timetable">
<thead>
<tr>
<th></th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-9:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00-10:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00-11:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00-12:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00-13:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>14:00-15:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>15:00-16:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>16:00-17:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
```
JavaScript 代码:
```javascript
// 定义课程表数据
const timetableData = [
{
day: 1, // 星期一
time: '8:00-9:00',
course: '高等数学',
teacher: '张三',
classroom: '教学楼101'
},
{
day: 2, // 星期二
time: '14:00-15:00',
course: '英语',
teacher: '李四',
classroom: '教学楼201'
},
{
day: 3, // 星期三
time: '10:00-11:00',
course: '计算机网络',
teacher: '王五',
classroom: '教学楼301'
},
{
day: 4, // 星期四
time: '11:00-12:00',
course: '操作系统',
teacher: '赵六',
classroom: '教学楼401'
},
{
day: 5, // 星期五
time: '9:00-10:00',
course: '数据库',
teacher: '钱七',
classroom: '教学楼501'
}
];
// 获取课程表元素
const timetable = document.getElementById('timetable');
// 遍历课程表数据,渲染到页面上
timetableData.forEach(data => {
const row = timetable.rows[data.time.substr(0, 1) - 8]; // 获取课程对应的行
const cell = row.cells[data.day]; // 获取课程对应的格子
cell.innerHTML = `
<p>${data.course}</p>
<p>${data.teacher}</p>
<p>${data.classroom}</p>
`;
});
```
以上代码实现了一个简单的课程表,可以根据自己的需求进行修改和扩展。
写一个jQuery课程设计页面
好的,下面是一个简单的jQuery课程设计页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery课程设计</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.course {
margin-bottom: 20px;
}
.course h2 {
font-size: 24px;
margin: 0;
padding: 0;
}
.course p {
font-size: 16px;
margin: 0;
padding: 0;
}
.course button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="course">
<h2>jQuery入门课程</h2>
<p>本课程将教你从基础开始学习jQuery,包括选择器、事件、动画等内容。</p>
<button class="btn-learn-more">了解更多</button>
<div class="more-info hidden">
<p>本课程包括以下内容:</p>
<ul>
<li>jQuery选择器的基本用法</li>
<li>事件绑定和解绑</li>
<li>常用的DOM操作</li>
<li>动画效果的实现</li>
</ul>
</div>
</div>
<div class="course">
<h2>jQuery高级课程</h2>
<p>本课程将教你深入学习jQuery,包括Ajax、插件开发等内容。</p>
<button class="btn-learn-more">了解更多</button>
<div class="more-info hidden">
<p>本课程包括以下内容:</p>
<ul>
<li>Ajax的使用和原理</li>
<li>插件开发的基本流程</li>
<li>常用jQuery插件的介绍和使用</li>
<li>jQuery源码解析</li>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.btn-learn-more').click(function(){
$(this).siblings('.more-info').toggleClass('hidden');
});
});
</script>
</body>
</html>
```
这个页面包括了两个课程的介绍,每个课程都有一个“了解更多”的按钮,点击按钮可以展开更多内容。使用了jQuery的toggleClass()方法来切换隐藏和显示状态。