Deepseek幫我設計制作了一個數學化的交互式網頁，用來總結學習定積分的概念和性質

我用Deepseek設計制作了一個數學化的交互式網頁，用來演示定積分的概念、幾何意義和主要性質！最終頁面如下：

識別以下二維碼可以直接查看與體驗交互式網頁效果，或點擊本文文末左下角閱讀原文可以直接下載完整版網頁文件，或者通過考研競賽數學交流圈的文件分享中下載源文件！

也可以復制以下網址到瀏覽器地址欄打開：

http://cmathc.cn/xwmath/integrate20251130.html

生成以上網頁效果的Deepseek提示詞如下：

用最新網頁制作技術與數學公式渲染技術制作一個HTML網頁,內容的主題是定積分的定義,要求能夠以交互式分割曲邊梯形圖形的方式演示元素法構建定積分模型的過程,標明定積分表達式各部分的名稱,比如積分下限,積分上限,積分號,被積函數,被積表達式,積分變量,積分和等,利用定積分的幾何意義意義計算定積分,并輔以圖形進行演示說明,定積分的主要性質,比如線性運算性質,積分對區間的可加性,保號性,保序性,估值定理,中值定理,對于中值定理繪制圖形說明其幾何意義!

在生成后會在當前會話窗口的右上角有三個按鈕，如下圖。

三個按鈕分別是復制(將當前生成的網頁代碼復制到剪貼板中)、下載（將當前生成的HTML格式的網頁文件下載到本地電腦中）、運行（直接運行當前生成的文件，在右側會另外開一個區域用于顯示當前生成效果）。

輸入以上提示詞第一次生成時，有些數學公式不能正常顯示，因此生成后另外給出了提示詞：數學公式不能正常顯示，重新設計制作網頁文件，要求使用最新的網頁數學公式顯示技術正確在網頁中顯示數學公式。

經過一次修改后，公式顯示正常！但是原來的交互設計功能不能實時顯示效果，所以再次修改了要求其修改了交互式顯示效果。然后再下載了HTML文件到電腦中。

由于生成的網頁中有些文字內容和公式還是不能滿足要求，因此用記事本重新大概了網頁文件，用查找命令定位需要修改的地方，進行了部分文字修改！

值得注意的是：如果有些符號沒有正常顯示為數學公式，也可以直接修改公式內容，并求將要顯示的Latex格式的數學符號與公式放置到“\(數學公式表達式\)”中。如果要求數學公式單獨一樣顯示，則放置到“\[ 要顯示的數學公式\]”中.

在修改的時候可以雙擊網頁文件用瀏覽器打開，每次修改后可以直接通過瀏覽器的刷新按鈕刷新網頁查看修改效果。

最后得到的網頁完整代碼如下：

"zh-CN">

     
 "UTF-8">
    
 "viewport" content="width=device-width, initial-scale=1.0">
    定積分的定義與性質 - 交互式演示
  
 
    

     
 

 
 "container" 
 > 
 
 
         
 
 
 
             
定積分的定義與性質 

 

"subtitle">通過交互式圖形演示理解定積分的概念、幾何意義和主要性質
 

 
         
 

 
          

 
         

 
 "content" 
 > 
 
 
             
 

 
 "main-content" 
 > 
 
 
                 
 
 "definition" 
 > 
 
 
                     定積分的定義 
 
 
                     

定積分是微積分中的基本概念，用于計算曲線下的面積。設函數 \( f(x) \) 在區間 \([a, b]\) 上連續，將區間任意分割為 \( n \) 個小區間，每個小區間長度為 \( \Delta x_i \)，在每個小區間上任取一點 \( \xi_i \)，則定積分定義為：
 

 
                      

 
                     

 
 "math" 
  id= 
 "integral-definition" 
 > 
 
 
                         \[ \int_{a}^{b} f(x) \, dx =\mathop {\lim }\limits_{\lambda  \to 0} \sum\limits_{i= 1}^n {f({\xi _i})\Delta {x_i}}, \] 
 
 
 其中\(\lambda\)是所有子區間 \( \Delta x_i \) 的長度的最大值. 
 
 
 
 
                     
 
 

 
                      

 

其中：
 

 
                     

• 

• \( \int \) 是積分符號
• 

• \( a \) 和 \( b \) 分別是積分的下限和上限
• 

• \( f(x) \) 是被積函數
• 

• \( dx \) 表示積分變量
• 

• \( \sum_{i=1}^{n} f(\xi_i) \Delta x_i \) 稱為積分和或黎曼和
• 


 

 

 

特別注意：定積分要存在，要求對任意分割、每個子區間上任意取點，要求積分和的極限都存在且相等。 

 
                      

 
                     曲邊梯形的分割演示 

 

調整下面的參數，觀察曲邊梯形如何被分割為小矩形，以及隨著分割數增加，矩形面積和如何逼近曲邊梯形的面積： 

 
                      

 
                     

 
 "demo-container" 
 > 
 
 
                         
 
 "integralCanvas" 
 > 
 
 
 
                     
  

 
                      

 
                     

 
 "controls" 
 > 
 
 
                         
 
 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "nPartitions" 
 >分割數: 
 
 
                             
 
 type 
 = 
 "range" 
  id= 
 "nPartitions" 
  min= 
 "2" 
  max= 
 "100" 
  value= 
 "10" 
 > 
 
 
                             "nValue" class="value-display">10 
                        
 
 
  

 
                          

 
                         

 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "functionSelect" 
 >函數: 
 
 
                             "functionSelect">                                "quadratic">二次函數 f(x) = x2                                "sine">正弦函數 f(x) = sin(x)                                "linear">線性函數 f(x) = x                            
 
 
                         
 
  

 
                          

 
                         

 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "methodSelect" 
 >分割方法: 
 
 
                             "methodSelect">                                "left">左端點                                "right">右端點                                "midpoint" selected>中點                            
 
 
                         
 
  

 
                          

 
                         "resetBtn">重置 

 
                     

 

 
                      

 
                     

 
 "legend" 
 > 
 
 
                         
 
 
 "legend-item" 
 > 
 
 
                             
 
 
 "color-box" 
  style= 
 "background-color: rgba(65, 105, 225, 0.7);" 
 > 
  

 
                             曲邊梯形 

 
                         

 

 
                         

 
 "legend-item" 
 > 
 
 
                             
 
 
 "color-box" 
  style= 
 "background-color: rgba(255, 99, 71, 0.5);" 
 > 
  

 
                             小矩形 

 
                         

 

 
                         

 
 "legend-item" 
 > 
 
 
                             
 
 
 "color-box" 
  style= 
 "background-color: rgba(50, 205, 50, 0.7);" 
 > 
  

 
                             曲線 

 
                         

 

 
                     

 

 
                 

 

 
                  

 
                 
 
 "geometric-meaning" 
 > 

 
                     定積分的幾何意義 

 

定積分 \( \int_{a}^{b} f(x) \, dx \) 的幾何意義是曲線 \( y = f(x) \) 與 \(x\) 軸在區間 \([a, b]\) 上所圍成的曲邊梯形的面積。當 \( f(x) \) 在 \(x\)  軸上方時，面積為正；在 \(x\)  軸下方時，面積為負。 

 
                      

 
                     

 
 "demo-container" 
 > 
 
 
                         
 
 "areaCanvas" 
 > 
 
 
 
                     
  

 
                      

 
                     

 
 "controls" 
 > 
 
 
                         
 
 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "lowerLimit" 
 >積分下限 a: 
 
 
                             
 
 type 
 = 
 "range" 
  id= 
 "lowerLimit" 
  min= 
 "0" 
  max= 
 "4.5" 
  step= 
 "0.1" 
  value= 
 "1" 
 > 
 
 
                             "aValue" class="value-display">1.0 
                        
 
 
  

 
                          

 
                         

 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "upperLimit" 
 >積分上限 b: 
 
 
                             
 
 type 
 = 
 "range" 
  id= 
 "upperLimit" 
  min= 
 "0.5" 
  max= 
 "5" 
  step= 
 "0.1" 
  value= 
 "3" 
 > 
 
 
                             "bValue" class="value-display">3.0 
                        
 
 
  

 
                     

 

 
                      

 
                     

 
 "math" 
  id= 
 "areaResult" 
 > 
 
 
                         面積 = 計算中... 
 
 
                     
  

 
                 

 

 
                  

 
                 
 
 "properties" 
 > 

 
                     定積分的主要性質 

 
                      

 
                     

• "property-list" >


• "property-title" >線性運算性質

  "math" >
\[ \int_{a}^{b} [\alpha f(x) + \beta g(x)] \, dx = \alpha \int_{a}^{b} f(x) \, dx + \beta \int_{a}^{b} g(x) \, dx \]


  其中 \( \alpha \) 和 \( \beta \) 是常數。

• 



• "property-title" >積分對區間的可加性

  "math" >
\[ \int_{a}^{b} f(x) \, dx = \int_{a}^{c} f(x) \, dx + \int_{c}^{b} f(x) \, dx \]


  只要函數在三個積分區間上都可積，則上式都成立。

• 



• "property-title" >保號性

  如果在區間 \([a, b]\) 上 \( f(x) \geq 0 \)，則 \( \int_{a}^{b} f(x) \, dx \geq 0 \)。

• 



• "property-title" >保序性

  如果在區間 \([a, b]\) 上 \( f(x) \leq g(x) \)，則 \( \int_{a}^{b} f(x) \, dx \leq \int_{a}^{b} g(x) \, dx \)。

• 



• "property-title" >估值定理

  如果 \( m \leq f(x) \leq M \) 在區間 \([a, b]\) 上成立，則：

  "math" >
\[ m(b -a ) \leq \int_{a}^{b} f(x) \, dx \leq M(b -a ) \]


• 



• "property-title" >積分中值定理

  "math" >
\[ \int_{a}^{b} f(x) \, dx = f(\xi)(b -a ) \]


  其中 \( \xi \in [a, b] \)。該定理表明在區間 \([a, b]\) 上至少存在一點 \( \xi \)，使得以 \( f(\xi) \) 為高的矩形面積等于曲邊梯形的面積。

• 


 

 
                 

 

 
                  

 
                 
 
 "mean-value-theorem" 
 > 

 
                     積分中值定理的幾何意義 

 

積分中值定理表明，在區間 \([a, b]\) 上至少存在一點 \( \xi \)，使得以 \( f(\xi) \) 為高的矩形面積等于曲邊梯形的面積。下面的圖形演示了這一幾何意義： 

 
                      

 
                     

 
 "demo-container" 
 > 
 
 
                         
 
 "mvtCanvas" 
 > 
 
 
 
                     
  

 
                      

 
                     

 
 "controls" 
 > 
 
 
                         
 
 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "mvtLower" 
 >積分下限 a: 
 
 
                             
 
 type 
 = 
 "range" 
  id= 
 "mvtLower" 
  min= 
 "0" 
  max= 
 "4.5" 
  step= 
 "0.1" 
  value= 
 "1" 
 > 
 
 
                             "mvtAValue" class="value-display">1.0 
                        
 
 
  

 
                          

 
                         

 
 "control-group" 
 > 
 
 
                             
 
 for 
 = 
 "mvtUpper" 
 >積分上限 b: 
 
 
                             
 
 type 
 = 
 "range" 
  id= 
 "mvtUpper" 
  min= 
 "0.5" 
  max= 
 "5" 
  step= 
 "0.1" 
  value= 
 "3" 
 > 
 
 
                             "mvtBValue" class="value-display">3.0 
                        
 
 
  

 
                     

 

 
                      

 
                     

 
 "math" 
  id= 
 "mvtResult" 
 > 
 
 
                         中值點 ξ = 計算中... 
 
 
                     
  

 
                 

 

 
             

 

 
              

 
             

 
 "sidebar" 
 > 
 
 
                 
 
 "quick-nav" 
 > 
 
 
                     快速導航 
 
 
                     
 

• 

• ">定積分的定義
• 

• -meaning">幾何意義
• 

• ">主要性質
• 

• -value-theorem">中值定理
• 


 

 
                 

 

 
                  

 
                 
 
 "key-concepts" 
 > 

 
                     關鍵概念 

 
                     

• 

• 積分下限與上限
• 

• 被積函數與積分變量
• 

• 積分和（黎曼和）
• 

• 曲邊梯形
• 

• 面積元素
• 

• 積分中值
• 


 

 
                 

 

 
                  

 
                 
 
 "interactive-tips" 
 > 

 
                     交互提示 

 

調整分割數觀察近似精度的變化 

 

嘗試不同的分割方法（左端點、右端點、中點） 

 

拖動積分上下限觀察面積變化 

 

觀察中值定理的幾何解釋 

 
                 

 

 
             

 

 
         

 

 
          

 
         
 

 

定積分交互式演示 ? 2025 | 微信公眾號:考研競賽數學 | 使用 Canvas 繪制圖形 

 
         
 

 
     


 

注意：如果不想通過鏈接下載網頁文件，也可以直接復制上面的完整代碼，然后打開系統中的記事本程序，將它粘貼到文本編輯框中，然后在保存文件的會話框中，選擇保存類型為“所有文件（*.*）”，并在文件名編輯框中修改文件名的擴展名為“.html”，如下圖。

這樣保存的就是網頁文件，雙擊它就可以用系統默認的瀏覽器直接看到查閱最終顯示效果。

往期推薦閱讀

1、

2、

3、

4、

5、

微信公眾號：考研競賽數學(ID: xwmath)大學數學公共基礎課程分享交流平臺！支持咱號請點贊分享！