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. Step1：SQL Server 复制介绍

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 前言(Introduction) 复制逻辑结构图(Construction) 系列文章索引(Catalog) 总结&am ...

  2. Pony 编程语言介绍

    Pony,一种“Rust 遇上 Erlang”的语言,让开发快捷.安全.高效.高并发的程序更简单. 在 Wallaroo Labs,我是工程副总裁,我们正在构建一个用 Pony 编程语言编写的 高性能 ...

  3. EditPlus配置Java

    --Java Compile-- 命令:D:\Program Files\Java\jdk1.7.0_79\bin\javac.exe 参数:$(FileName) 初始目录:$(FileDir) 动 ...

  4. 4-20mA电流环路发送器入门（转）

    4-20mA电流环路发送器入门 作者:Collin Wells, 德州仪器精密模拟应用工程师 在现代工业控制系统中,4-20 mA电流环路发送器一直是在控制中心和现场传感器/执行器之间进行数据传输最为 ...

  5. Eloquent JavaScript #07# Project: A Robot

    索引 Notes Excercise Measuring a robot Robot efficiency Persistent group 注释即笔记: const roads = [ " ...

  6. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  7. Linux 安装本地 yum源

    放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom  /media/cdrom  #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...

  8. ionic 实现微信朋友圈分享的完整开发流程

    最近开始要着手负责开发ionic的项目了,一直很好奇想实现一个微信朋友圈分享的功能,所以我就网上找了找文章来练手实现,果不其然,找到了几篇,但是发现它们的流程都不太详细,清楚,直接,还有不少坑. 今天 ...

  9. linux 实时显示网速bash

    执行方法先授权再运行 chmod +x shi.sh脚本+网卡名称 ./shi.sh ens33 #!/bin/bash while [ "1" ] do eth=$1 RXpre ...

  10. bzoj 3993 星际战争 - 二分答案 - 最大流

    3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战.在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进攻X军团的阵地,其中第i个巨型机器人的装甲值为Ai.当一个巨型机器人的装甲值减少到0或者 ...