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>

效果如图所示

JaveWeb 公司项目（7）----- 通过JS动态生成DIV的更多相关文章

  1. js 动态生成div显示id

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  3. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  4. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  5. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  6. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  7. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  8. js 动态生成html 触发事件传参字符转义

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 “单.双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决.下面就来 ...

  9. 爬虫案例(js动态生成数据)

    需求:爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html页面中的 ...

随机推荐

  1. Symfony2 学习笔记之服务容器

    现在的PHP应用程序都是面向对象开发,所以主要是由对象构成.有的对象可以方便的分发邮件信息而有的可能帮你把信息写入到数据库中.在你的应用程序中,你可能创建一个对象用于管理你的产品库存,或者另外一个对象 ...

  2. Linux：CPU使用率100%排查方法

    Linux作为一个多任务操作系统,将每个CPU的时间划分为很短的时间片,再通过调度器轮流分配给各个任务使用,因此造成多任务同时运行的错觉. CPU使用率 Linux作为一个多任务操作系统,将每个CPU ...

  3. C++中static_cast和dynamic_cast强制类型转换

    在C++标准中,提供了关于类型层次转换中的两个关键字static_cast和dynamic_cast. 一.static_cast关键字(编译时类型检查) 用法:static_cast < ty ...

  4. php 微信支付V3 APP支付

    前言:微信支付现在分为v2版和v3版,2014年9月10号之前申请的为v2版,之后申请的为v3版.V3版的微信支付没有paySignKey参数. php 微信支付类 <?php class We ...

  5. bzoj1088 P2327 [SCOI2005]扫雷

    P2327 [SCOI2005]扫雷 emmmmm.....这题真可以用状压写 因为每个数字只对3个格子有影响,相当于只有2^3=8种状态,所以可以用状压瞎搞 我们用8个数字代表二进制下的8种状态 0 ...

  6. ORA-12052: cannot fast refresh materialized view

    SQL> execute dbms_mview.refresh ('TX_FAIL_LOG_DAY_MV', 'f'); BEGIN DBMS_MVIEW.REFRESH ('TX_FAIL_L ...

  7. 在VS2010中使用Git

    转载:https://www.cnblogs.com/oec2003/archive/2012/11/13/2768860.html 一. 安装Git命令行,下载地址:http://code.goog ...

  8. 尚硅谷面试第一季-09SpringMVC中如何解决POST请求中文乱码问题GET的又如何处理呢

    目录结构: 关键代码: web.xml <filter> <filter-name>CharacterEncodingFilter</filter-name> &l ...

  9. CocoaPods出错

    1 Error: pod search Masonry /usr/local/lib/ruby/gems/2.3.0/gems/cocoapods-1.4.0.beta.2/lib/cocoapods ...

  10. 当模版引擎遇到点(".")，会按照下列顺序查询：

    字典查询,例如:foo["bar"] 属性或方法查询,例如:foo.bar 数字索引查询,例如:foo[bar]