Web網頁項目的數據表格功能已經大體完成，下面是另一個主要功能，在線視頻的顯示
目前我做的項目是漁政監控方面，在之前C#的版本中已經實現了攝像頭的在線監控，用的海康封裝好的SDK，目前需要做的工作是在網頁端實現在線視頻的信號接入和雲台控制，示例已經做好，可以看到有攝像頭的選項，這時候我們可以對攝像頭進行操作，視屏的開關，攝像頭的調焦變焦，雲台控制等，實現這些功能的前提是需要安裝海康的名為WebComponents.exe的插件
對於海康攝像頭的控制等函數可以參考海康的網絡端，通過F12查看preview.asp頁面，查看對應按鈕的onclick事件即可
本篇博文的主要內容是通過JS語句動態生成，以上一篇博文為例，代碼如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head></head>
<body>
<div id="1" style="width:600px;height:300px;border:1px solid #000;">
<div id="2" style="float:left;width:500px;height:300px;border:1px solid #000;">div2</div>
<div id="3" style="float:right;width:94px;height:300px;border:1px solid #000;">div3</div>
</div>
</body>
</html>
生成的效果如圖所示：
下面將div的語句通過js代碼動態生成
首先，創建一個DIV對象
var div1=document.createElement("div");
在div內寫上文字以便標識：
div1.innerHTML = "div1";
設置DIV的id：
div1.id ="Video";
通過style.cssText設置DIv的CSS樣式屬性：
div1.style.cssText="width:850px;height:500px;border:1px solid #000;";
最后在Body內創建DIV:
document.body.appendChild(div1);
效果如圖所示:
創建好了打的div后，通過JS語句在DIV1內加載DIV2和DIV3，邏輯很簡單，和創建DIV1一樣創建div2和div3，不過最后生成div的時候是在div1內生成
代碼如下：
<script>
//創建div1
var div1=document.createElement("div");
//設置div的id
div1.id ="Video";
//設置div的css樣式
div1.style.cssText="width:850px;height:500px;border:1px solid #000;";
//在body內創建一個div
document.body.appendChild(div1);
//創建div2
var div2=document.createElement("div");
//設置div2的id
div2.id ="divPlugin";
div2.innerHTML="新的div2";
//div2的class為Box
div2.class ="Box";
//設置div的css樣式
div2.style.cssText="float:left;width:700px;height:500px;border:1px solid #000;";
//在div1內創建一個div3
div1.appendChild(div2);
//創建div3
var div3=document.createElement("div");
//設置div3的id
div3.id ="Control";
div3.innerHTML="新的div3";
//設置div3的css樣式
div3.style.cssText="float:right;width:144px;height:500px;border:1px solid #000;";
//在div1內創建一個div3
div1.appendChild(div3);
</script>
效果如圖所示