459 lines
13 KiB
HTML
459 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>万有引力定律课程总结</title>
|
||
<script src="./md/jquery.min.js"></script>
|
||
<script src="./md/marked.umd.min.js"></script>
|
||
<link rel="stylesheet" href="./md/prism-tomorrow.min.css">
|
||
<script src="./md/prism.min.js"></script>
|
||
<script src="./md/prism-javascript.min.js"></script>
|
||
<script src="./md/prism-python.min.js"></script>
|
||
<script src="./md/prism-css.min.js"></script>
|
||
<script src="./md/mermaid.min.js"></script>
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||
max-width: 800px;
|
||
width: 100%;
|
||
padding: 20px;
|
||
animation: fadeIn 1s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.header h1 {
|
||
color: #fff;
|
||
font-size: 2.5rem;
|
||
font-weight: 300;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.header p {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
#output {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 15px;
|
||
padding: 30px;
|
||
min-height: 400px;
|
||
color: #fff;
|
||
font-size: 1.1rem;
|
||
line-height: 1.8;
|
||
overflow-y: auto;
|
||
max-height: 600px;
|
||
position: relative;
|
||
}
|
||
|
||
#output::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
#output::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
#output::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
#output::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
#output h1,
|
||
#output h2,
|
||
#output h3 {
|
||
color: #fff;
|
||
margin: 20px 0 10px 0;
|
||
font-weight: 300;
|
||
}
|
||
|
||
#output h1 {
|
||
font-size: 2rem;
|
||
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
#output h2 {
|
||
font-size: 1.5rem;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
#output h3 {
|
||
font-size: 1.3rem;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
#output p {
|
||
margin-bottom: 15px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
#output ul,
|
||
#output ol {
|
||
margin-left: 30px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#output li {
|
||
margin-bottom: 5px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
#output code {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
padding: 3px 6px;
|
||
border-radius: 4px;
|
||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
#output pre {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
overflow-x: auto;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
#output pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
|
||
#output blockquote {
|
||
border-left: 4px solid rgba(255, 255, 255, 0.3);
|
||
padding-left: 20px;
|
||
margin: 15px 0;
|
||
font-style: italic;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
#output strong {
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
#output em {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.cursor {
|
||
display: inline-block;
|
||
width: 3px;
|
||
height: 1.2em;
|
||
background-color: #fff;
|
||
animation: blink 1s infinite;
|
||
vertical-align: middle;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
@keyframes blink {
|
||
|
||
0%,
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
|
||
51%,
|
||
100% {
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.controls {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.btn {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
color: #fff;
|
||
padding: 12px 30px;
|
||
border-radius: 30px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
transition: all 0.3s ease;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.typing-indicator {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 20px;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
#output table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
#output th,
|
||
#output td {
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
padding: 10px 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
#output th {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<!-- <div class="header">
|
||
<h1>Markdown 打字机</h1>
|
||
<p>优雅的打字效果，呈现精美的内容</p>
|
||
</div> -->
|
||
|
||
<div id="output">
|
||
<span class="cursor"></span>
|
||
<div class="typing-indicator" style="display: none;">正在打字...</div>
|
||
</div>
|
||
|
||
<!-- <div class="controls">
|
||
<button class="btn" onclick="startTyping()">开始打字</button>
|
||
<button class="btn" onclick="resetTyping()">重置</button>
|
||
</div> -->
|
||
</div>
|
||
|
||
<script>
|
||
|
||
// 配置 marked 使用自定义 renderer
|
||
const renderer = new marked.Renderer();
|
||
const originalCode = renderer.code.bind(renderer);
|
||
renderer.code = function (code, infostring, escaped) {
|
||
if (infostring === 'mermaid') {
|
||
return `<div class="mermaid">${code}</div>`;
|
||
}
|
||
return originalCode(code, infostring, escaped);
|
||
};
|
||
marked.setOptions({ renderer });
|
||
|
||
// 初始化 Mermaid
|
||
mermaid.initialize({ startOnLoad: false });
|
||
|
||
const markdownContent = `
|
||
|
||
# 高中物理《万有引力定律》视频课程总结
|
||
|
||
## 一、课程概述
|
||
本节课围绕**万有引力定律**进行深入探究，重点研究万有引力公式本身的考察和应用，而非天体运动的周期、速度方向等扩展内容。
|
||
|
||
## 二、教学目标
|
||
1. **深入理解万有引力定律**：掌握表达式及其适用范围
|
||
2. **应用能力培养**：能够运用万有引力定律解决相关问题
|
||
3. **物理观念建立**：培养正确的物理观念、科学思维和创新精神
|
||
4. **科学态度培养**：增强对客观世界的探究精神
|
||
|
||
## 三、典型习题解析
|
||
|
||
### 习题1：月地检验证明题
|
||
**题目要求**：通过计算验证苹果落地的力与维持月球绕地球运动的力是同一种性质的力
|
||
|
||
**解题思路**：
|
||
1. **理论分析**：如果两种力同性质，应遵循平方反比定律（F ∝ 1/R²）
|
||
2. **力学角度**：
|
||
- 月球轨道加速度：a₁ = g/3600 ≈ 0.0027 m/s²
|
||
- （基于地球半径R，月球轨道半径60R，平方反比关系）
|
||
3. **运动学角度**：
|
||
- 使用向心加速度公式：a₂ = 4π²R/T²
|
||
- 代入月球周期T=27.3天≈2.36×10⁶秒
|
||
- 计算结果：a₂ ≈ 0.0027 m/s²
|
||
4. **结论**：a₁ ≈ a₂，证明两种力性质相同
|
||
|
||
**关键点**：不能直接使用万有引力公式证明，需通过独立计算验证
|
||
|
||
### 习题2：平抛运动比较
|
||
**题目条件**：
|
||
- 地球质量：月球质量 = 81:1
|
||
- 地球半径：月球半径 = 4:1
|
||
- 相同高度、相同初速度水平抛出
|
||
|
||
**求解**：地球与月球表面平抛水平距离之比
|
||
|
||
**解题步骤**：
|
||
1. 水平距离公式：x = v₀t
|
||
2. 下落时间：t = √(2h/g)
|
||
3. 通过黄金代换式求重力加速度比：
|
||
- g地/g月 = (M地/R地²)/(M月/R月²) = 81/16
|
||
4. 时间比：t地/t月 = √(g月/g地) = 4/9
|
||
5. 距离比：x地/x月 = t地/t月 = 4/9
|
||
|
||
**答案**：地球表面与月球表面的平抛水平距离比为4:9
|
||
|
||
### 习题3：伯克效应与引力变化
|
||
**题目要求**：定性画出均匀球体内外各点所受引力随距离变化的函数图像
|
||
|
||
**关键知识**：
|
||
- 伯克效应：质量分布均匀的球壳对内部质点的引力为零
|
||
- 地球密度均匀：ρ = 常数
|
||
|
||
**解题分析**：
|
||
1. **球体内部（0 < r < R）**：
|
||
- 有效质量：M_eff = ρ×(4πr³/3)
|
||
- 引力公式：F = GM_effm/r² = (4πGρm/3)·r
|
||
- ∴ F ∝ r （线性增长）
|
||
|
||
2. **球体表面（r = R）**：
|
||
- F_max = GMm/R²
|
||
|
||
3. **球体外部（r > R）**：
|
||
- F = GMm/r² ∝ 1/r²
|
||
|
||
**函数图像特征**：
|
||
- 0→R：过原点的斜直线（线性增长）
|
||
- r = R：达到最大值F_max
|
||
- r > R：平方反比曲线（逐渐减小）
|
||
|
||
## 四、重点难点总结
|
||
|
||
### 核心概念
|
||
1. **万有引力定律**：F = G·M₁M₂/r²
|
||
2. **黄金代换式**：GM = gR²
|
||
3. **伯克效应**：均匀球壳内部引力为零
|
||
|
||
### 易错点提醒
|
||
1. 月地检验题中不能直接使用万有引力公式
|
||
2. 平抛问题要注意重力加速度的变化
|
||
3. 球体内外引力变化需要分段处理
|
||
|
||
### 方法技巧
|
||
1. **验证性题目**：通过独立计算进行验证，而非直接使用待证结论
|
||
2. **比例问题**：善用比例关系简化计算
|
||
3. **图像题**：定性分析时抓住关键点（原点、极值点、渐近线）
|
||
|
||
## 五、学习建议
|
||
1. 重视基础公式的理解和记忆
|
||
2. 掌握黄金代换式在各种情境下的应用
|
||
3. 理解伯克效应的物理意义
|
||
4. 加强数学计算能力，特别是科学计算
|
||
5. 注重数理结合，提高空间想象能力
|
||
|
||
`;
|
||
|
||
let isTyping = false;
|
||
let currentIndex = 0;
|
||
let typeInterval;
|
||
|
||
function typeWriter() {
|
||
if (currentIndex < markdownContent.length) {
|
||
const currentText = markdownContent.substring(0, currentIndex + 1);
|
||
const htmlContent = marked.parse(currentText);
|
||
$('#output').html(htmlContent + '<span class="cursor"></span>');
|
||
$('.typing-indicator').show();
|
||
|
||
// 高亮代码块
|
||
$('pre code').each(function () {
|
||
Prism.highlightElement(this);
|
||
});
|
||
|
||
// 渲染 Mermaid
|
||
// mermaid.run();
|
||
|
||
// 滚动到底部
|
||
$('#output').scrollTop($('#output')[0].scrollHeight);
|
||
|
||
currentIndex++;
|
||
|
||
// 根据字符类型调整速度
|
||
let delay = 30;
|
||
const char = markdownContent[currentIndex - 1];
|
||
if (char === '\n') delay = 100;
|
||
else if (char === '.') delay = 200;
|
||
else if (char === ',') delay = 80;
|
||
|
||
typeInterval = setTimeout(typeWriter, delay);
|
||
} else {
|
||
$('.cursor').hide();
|
||
$('.typing-indicator').hide();
|
||
isTyping = false;
|
||
// 最后再次渲染 Mermaid 确保图表完整
|
||
mermaid.run();
|
||
}
|
||
}
|
||
|
||
function startTyping() {
|
||
if (!isTyping) {
|
||
isTyping = true;
|
||
typeWriter();
|
||
}
|
||
}
|
||
|
||
function resetTyping() {
|
||
clearTimeout(typeInterval);
|
||
isTyping = false;
|
||
currentIndex = 0;
|
||
$('#output').html('<span class="cursor"></span>');
|
||
$('.typing-indicator').hide();
|
||
}
|
||
|
||
// 页面加载后自动开始
|
||
$(document).ready(function () {
|
||
setTimeout(startTyping, 1000);
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |