【前端学习日记】利用reveal.js把实验报告做成一个简单的幻灯片

一、整体效果

把电磁场的实验报告做成网页PPT,原文是这里:<【电磁场实验作业】有限差分法(FDM)求解静电场电位分布_轩辕衍的博客-CSDN博客>

在这里插入图片描述

二、核心代码讲解

0.创建页面

第一篇内容有详细的讲解,可以去这里看看<【前端学习日记】用reveal.js实现制作网页幻灯片_轩辕衍的博客-CSDN博客>

1.插入数学公式

如果想在演示文稿中显示数学方程,可以使用MathJax插件,这是围绕MathJax库的一个的包装器,默认使用LaTeX,也可以通过数学配置对象进行调整。

如果你不知道什么是LaTeX,可以去看看这里<LaTeX - 知乎 (zhihu.com)>

如果不想输入复杂的代码,想要通过图形化界面输入公式转换后得到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: 'https://cdn.jsdelivr.net/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="https://blog.csdn.net/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{\Delta
                        f(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}{\partial
                        y^{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.000001
    k=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;
            end
        end
    end
    
    for 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;
            end
        end
    end
    
    for 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;
            end
        end
    end
    
    for 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;
            end
        end
    end
    v2(6:12,8)=v2(6:12,7);
    v2(12,8:18)=v2(13,8:18);
    v1=v2;
end
    v1=v2(hy:-1:1,:);
    save v1data v1
    
    subplot(1,2,1),mesh(v1)%画三维曲面图
    axis([0,25,0,17,0,100])
    subplot(1,2,2),contour(v1,50)%画等电位线图
    hold on
    x=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: 'https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js',
                config: 'TeX-AMS_HTML-full',
                TeX: { Macros: { RR: "{\\bf R}" } }
            },
        });
    </script>
</body>

</html>

觉得有用别忘了点个赞呀😄

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王贝贝的爸爸

觉得有用给点鼓励吧,求求你了

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值