一、整体效果
把电磁场的实验报告做成网页PPT，原文是这里：<【电磁场实验作业】有限差分法(FDM)求解静电场电位分布_轩辕衍的博客-CSDN博客>
二、核心代码讲解
0.创建页面
第一篇内容有详细的讲解，可以去这里看看<【前端学习日记】用reveal.js实现制作网页幻灯片_轩辕衍的博客-CSDN博客>
1.插入数学公式
如果想在演示文稿中显示数学方程，可以使用MathJax插件，这是围绕MathJax库的一个的包装器，默认使用LaTeX，也可以通过数学配置对象进行调整。
如果你不知道什么是LaTeX,可以去看看这里<LaTeX - 知乎 ()>
如果不想输入复杂的代码，想要通过图形化界面输入公式转换后得到LaTeX公式，可以去这里看看<用公式编辑器将数学公式转为LaTeX代码_轩辕衍的博客-CSDN博客>
下面这是一个插入数学公式简单的demo：
<h3>2.3求解方法</h3><small>\[\begin{equation}\text{简单迭代法:}\quad \varphi_{i, j}^{n+1}=\frac{1}{4}\left(\varphi_{i, j+1}^{n}+\varphi_{i,j-1}^{n}+\varphi_{i-1, j}^{n}+\varphi_{i+1, j}^{n}\right)\end{equation} \]\[\begin{equation}\text{松弛迭代法:}\quad \varphi_{i, j}^{n+1}=\varphi_{i, j}^{n}+\frac{\omega}{4}\left(\varphi_{i,j+1}^{n}+\varphi_{i, j-1}^{n+1}+\varphi_{i-1, j}^{n+1}+\varphi_{i+1, j}^{n}-4 \varphi_{i,j}^{n}\right)\\\omega=\frac{2}{1+\sqrt{1-\left[\frac{\cos (\pi / m)+\cos (\pi / n)}{2}\right]^{2}}}\end{equation} \]</small></section><script src="plugin/math/math.js"></script><script>Reveal.initialize({math: {mathjax: '/gh/mathjax/mathjax@2.7.8/MathJax.js',config: 'TeX-AMS_HTML-full',// pass other options into `MathJax.Hub.Config()`TeX: {Macros: {RR: "{\\bf R}" } }},plugins: [ RevealMath ]});</script>
2.插入代码
reveal.js包括一套强大的功能，旨在展示语法高亮的代码 ,这个功能由highlight.js提供，并包含在我们的默认演示模板中。
下面这是一个Java代码简单的demo：
<section><pre><code data-trim data-noescape>public class hello{public static void main(String[] args){System.out.println("Hello world!");}}</code></pre></section>
data-trim:自动删除<code>周围的空白；
data-noescape:避免HTML被转义；
三、全部代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>有限差分法(FDM)求解静电场电位分布</title><link rel="stylesheet" href="dist/reset.css"><link rel="stylesheet" href="dist/reveal.css"><link rel="stylesheet" href="dist/theme/black.css" id="theme"><link rel="stylesheet" href="plugin/highlight/monokai.css"></head><body><div class="reveal"><div class="slides"><section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png"><h3>有限差分法(FDM)求解静电场电位分布</h3><img src="pic/Avatar.jpg" height="300px" width="300px"><h5>作者:<a href="/weixin_48276030?spm=1001.2101.3001.5343">轩辕怡湘</a></h5></section><section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png"><h3>一、题目描述</h3><small>试用超松弛法确定如图二维静电场区域的电位分布</small><img src="pic/15931a95b32a47ed914c6bfa43d7f9a6.png" height="300" width="450px"></section><section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png"><section><h3>二、有限差分法</h3><p><small>有限差分法(Finite Difference Methods，简称FDM),是一种微分方程的数值解法，是通过有限差分来近似导数，从而寻求微分方程的近似解，是一种以以差分为原理的一种数值解法。</small></p></section><section><h3>2.1差分的基本定义</h3><small>\[\begin{equation}\text{一阶差分:}\quad \Delta f(x)=f(x+h)-f(x)\end{equation} \]\[\begin{equation}\text{一阶差商:}\quad \frac{\Delta f(x)}{\Delta x}=\frac{f(x+h)-f(x)}{h}\end{equation} \]\[\begin{equation}\text{二阶差分:}\quad \Delta^{2} f(x)=\Delta f(x+h)-\Delta f(x)\end{equation} \]\[\begin{equation}\text{二阶差商:}\quad \frac{\Delta^{2} f(x)}{\Delta x^{2}}=\frac{1}{h}\left[\frac{\Deltaf(x+h)}{h}-\frac{\Delta f(x)}{h}\right]\end{equation} \]</small></section><section><h3>2.2拉普拉斯方程的有限差分形式</h3><small>\[\begin{aligned}\varphi_{i, j+1}&=\varphi_{i, j}+\frac{\partial \varphi}{\partial x} h+\frac{1}{2}\frac{\partial^{2} \varphi}{\partial x^{2}} h^{2}+\frac{1}{6} \frac{\partial^{3}\varphi}{\partial x^{3}} h^{3}+\cdots \\\varphi_{i, j-1}&=\varphi_{i, j}-\frac{\partial \varphi}{\partial x} h+\frac{1}{2}\frac{\partial^{2} \varphi}{\partial x^{2}} h^{2}-\frac{1}{6} \frac{\partial^{3}\varphi}{\partial x^{3}} h^{3}+\cdots \\\varphi_{i-1, j}&=\varphi_{i, j}-\frac{\partial \varphi}{\partial y} h+\frac{1}{2}\frac{\partial^{2} \varphi}{\partial y^{2}} h^{2}-\frac{1}{6} \frac{\partial^{3}\varphi}{\partial y^{3}} h^{3}+\cdots \\\varphi_{i+1, j}&=\varphi_{i, j}+\frac{\partial \varphi}{\partial y} h+\frac{1}{2}\frac{\partial^{2} \varphi}{\partial y^{2}} h^{2}+\frac{1}{6} \frac{\partial^{3}\varphi}{\partial y^{3}} h^{3}+\cdots \\\varphi_{i, j+1}+\varphi_{i, j-1}&+\varphi_{i-1, j}+\varphi_{i+1, j}=4 \varphi_{i,j}+h^{2}\left(\frac{\partial^{2} \varphi}{\partial x^{2}}+\frac{\partial^{2} \varphi}{\partialy^{2}}\right)+\cdots \\\nabla^{2} \varphi&=\frac{\partial^{2} \varphi}{\partial x^{2}}+\frac{\partial^{2}\varphi}{\partial y^{2}}=0 \\\varphi_{i, j}&=\frac{1}{4}\left(\varphi_{i, j+1}+\varphi_{i, j-1}+\varphi_{i-1,j}+\varphi_{i+1, j}\right)\end{aligned}\]</small></section><section><h3>2.3求解方法</h3><small>\[\begin{equation}\text{简单迭代法:}\quad \varphi_{i, j}^{n+1}=\frac{1}{4}\left(\varphi_{i, j+1}^{n}+\varphi_{i,j-1}^{n}+\varphi_{i-1, j}^{n}+\varphi_{i+1, j}^{n}\right)\end{equation} \]\[\begin{equation}\text{松弛迭代法:}\quad \varphi_{i, j}^{n+1}=\varphi_{i, j}^{n}+\frac{\omega}{4}\left(\varphi_{i,j+1}^{n}+\varphi_{i, j-1}^{n+1}+\varphi_{i-1, j}^{n+1}+\varphi_{i+1, j}^{n}-4 \varphi_{i,j}^{n}\right)\\\omega=\frac{2}{1+\sqrt{1-\left[\frac{\cos (\pi / m)+\cos (\pi / n)}{2}\right]^{2}}}\end{equation} \]</small></section></section><section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png"><h3>三、示例代码</h3><pre><code data-trim data-line-numbers>hx=25;hy=17; %设置网格节点数v1=ones(hy,hx); %设置行列二维数组v1(6:12,8:18)=zeros(7,11);m=24;n=16;%横纵向网格数%边界的Dirichlet边界条件值v1(1,1:25)=0; %上边界v1(17,1:25)=0;%下边界v1(2:16,1)=0;%左边界v1(2:16,25)=0;%右边界v1(6,9:18)=ones(10,1)*100;%中间上边界v1(7:11,18)=ones(5,1)*100;%中间上边界%计算松弛因子t1=(cos(pi/m)+cos(pi/n))/2;w=2/(1+sqrt(1-t1*t1));v2=v1;maxt=1;t=0;%初始化k=0;while(maxt>1e-6)%由v1迭代，算出v2，迭代精度为0.000001k=k+1;%计算迭代次数maxt=0;for i=2:16%从2到16行循环for j=2:7%从2到7列循环v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式t=abs(v2(i,j)-v1(i,j));if(t>maxt) maxt=t;endendendfor i=2:5%从2到5行循环for j=8:18%从8到18列循环v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式t=abs(v2(i,j)-v1(i,j));if(t>maxt) maxt=t;endendendfor i=13:16%从13到16行循环for j=8:18%从8到18列循环v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式t=abs(v2(i,j)-v1(i,j));if(t>maxt) maxt=t;endendendfor i=2:16%从2到16行循环for j=19:24%从19到24列循环v2(i,j)=v1(i,j)+(v1(i,j+1)+v1(i+1,j)+v2(i-1,j)+v2(i,j-1)-4*v1(i,j))*w/4;%拉普拉斯方程差分式t=abs(v2(i,j)-v1(i,j));if(t>maxt) maxt=t;endendendv2(6:12,8)=v2(6:12,7);v2(12,8:18)=v2(13,8:18);v1=v2;endv1=v2(hy:-1:1,:);save v1data v1subplot(1,2,1),mesh(v1)%画三维曲面图axis([0,25,0,17,0,100])subplot(1,2,2),contour(v1,50)%画等电位线图hold onx=1:1:hx;y=1:1:hy;[xx,yy]=meshgrid(x,y);%形成栅格[Gx,Gy]=gradient(v1,0.6,0.6);%计算梯度quiver(xx,yy,Gx,Gy,'r')%根据梯度数据画箭头axis([-1.5,hx+2.5,-2,20])%设置坐标边框plot([1,1,hx,hx,1],[1,hy,hy,1,1],'k')%画导体边框text(hx/2-0.5,hy+0.4,'0V','fontsize',11);%上标注text(hx/2-0.5,0.4,'0V','fontsize',11);%下标注text(-1,hy/2,'0V','fontsize',11);%左标注text(hx+1,hy/2,'0V','fontsize',11);%右标注text(hx/2-3,hy/2+2,'\phi=50V','fontsize',11);%中间上标注text(hx/2-4,hy/2-1,'\partial\phi/\partialn=0','fontsize',11);%中间下标注hold off</code></pre></section><section data-background-image="pic/CSDN浏览器助手_壁纸_1631537450408.png"><h3>四、实验结果</h3><img src="pic/exp1.jpg" height="400" width="600"></section></div></div><script src="dist/reveal.js"></script><script src="plugin/zoom/zoom.js"></script><script src="plugin/notes/notes.js"></script><script src="plugin/search/search.js"></script><script src="plugin/markdown/markdown.js"></script><script src="plugin/highlight/highlight.js"></script><script src="plugin/math/math.js"></script><script>Reveal.initialize({controls: true,progress: true,center: true,hash: true,plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight, RevealMath],math: {mathjax: '/gh/mathjax/mathjax@2.7.8/MathJax.js',config: 'TeX-AMS_HTML-full',TeX: {Macros: {RR: "{\\bf R}" } }},});</script></body></html>
觉得有用别忘了点个赞呀😄
