DOM简介

1.获得元素

<!DOCTYPE html>

<html>

<head>

<title>MyHtml.html</title>

</head>

<body>

    <div id="intro">helloworld</div>

    <div id="main">

        <p>The DOM is very useful.</p>

    </div>

    <div class="content">1</div>

    <div class="content">2</div>

    <div class="content">3</div>

    <div class="content">4</div>

    <script type="text/javascript">

        // 通过js获取html标签

        var intro = document.getElementById("intro").innerHTML; // 通过id找html，唯一的

        var main = document.getElementById("main"); //先获得p标签

        var p = main.getElementsByTagName("p")[0]; //然后获得里面的值

        var content1 = document.getElementsByClassName("content")[0];

    </script>

</body>

</html>

2.修改html内容及属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dom html</title>

</head>

<body>

    <div id="main" data="nihao">123</div>

    <img src="1.jpg" id="image" />

    <a id="goUrl" href="">调到百度</a>

    <script type="text/javascript">

        var main = document.getElementById("main");

        main.innerHTML= 'helloWorld';

        // alert(main.getAttribute("data"));

        main.setAttribute("data", "buhao"); //设置属性标签值

        main.setAttribute("dd", "ddname"); //增加属性标签值

        var image = document.getElementById("image"); //改变图片路径

        image.src = "2.jpg";

        var goUrl = document.getElementById("goUrl"); //改变url

        goUrl.href = "http://www.baidu.com"

    </script>

</body>

</html>

3.修改样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Dom css</title>

</head>

<body>

    <div id="main">helloworld</div>

    <script type="text/javascript">

        var main = document.getElementById("main");

        main.style.color = "blue";

        main.style.fontSize = "100px";

    </script>

</body>

</html>

4.js案例：轮播图及导航栏

4.1轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>综合实例</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="main" id="main">

    <!-- 图片轮播 -->

    <div class="banner" id="banner">

        <a href="">

            <div class="banner-slide slide1 slide-active">

            </div>

        </a>

        <a href="">

            <div class="banner-slide slide2 ">

            </div>

        </a>

        <a href="">

            <div class="banner-slide slide3">

            </div>

        </a>

    </div>

    <a href="javascript:void(0)" class="button prev" id="prev"></a>

    <a href="javascript:void(0)" class="button next" id="next"></a>

    <!-- 原点导航 -->

    <div class="dots" id="dots">

            <span class="active">

            </span>

        <span>

            </span>

        <span>

            </span>

    </div>

</div>

<script src="js/script.js"></script>

</body>

</html>
* {

    margin:;

    padding:;

}

ul {

    list-style: none;

}

body {

    font-family: "微软雅黑", serif;

    color: #14191e;

}

.main {

    width: 1200px;

    height: 460px;

    margin: 30px auto;

    overflow: hidden;

    position: relative;

}

.banner {

    width: 1200px;

    height: 460px;

    overflow: hidden;

    position: relative;

}

.banner-slide {

    width: 1200px;

    height: 460px;

    position: absolute;

    background-repeat: no-repeat;

    display: none;

}

.slide1 {

    background-image: url("../img/bg1.jpg");

}

.slide2 {

    background-image: url("../img/bg2.jpg");

}

.slide3 {

    background-image: url("../img/bg3.jpg");

}

.slide-active {

    display: block;

}

.button {

    position: absolute;

    width: 40px;

    height: 80px;

    left: 244px;

    top: 50%;

    margin-top: -40px;

    background: url("../img/arrow.png") no-repeat center;

}

.button:hover {

    background-color: #333;

    opacity: 0.8;

    filter: alpha(opacity=80);

}

.prev {

    transform: rotate(180deg);

}

.next {

    left: auto;

    right:;

}

.dots {

    position: absolute;

    right: 20px;

    bottom: 24px;

    text-align: right;

}

.dots span {

    display: inline-block;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(7, 17, 27, 0.4);

    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;

    margin-left: 8px;

    line-height: 12px;

    cursor: pointer;

}

.dots span.active {

    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;

    background: #fff;

}
//全局变量

let timer = null,

    index = 0,

    pics = byId("banner").getElementsByTagName("div"),

    dots = byId("dots").getElementsByTagName("span"),

    len = pics.length,

    prev = byId("prev"),

    next = byId("next");

// console.log(len);

//封装一个代替getElementById()的方法

function byId(id) {

    return typeof(id) === "string" ? document.getElementById(id) : id;

}

function changeImg() {

    // console.log(index);

    for (let i = 0; i < len; i++) {

        pics[i].style.display = "none";

        dots[i].className = "";

    }

    // 根据index索引找到当前div和当前span，将其显示出来

    pics[index].style.display = "block";

    dots[index].className = "active";

}

// console.log(byId("main"))

function

slideImg() {

    let main = byId("main");

    main.onmouseover = function () {

        //清除定时器

        if (timer) clearInterval(timer);

    };

    main.onmouseout = function () {

        timer = setInterval(function () {

            index++;

            // console.log(index);

            if (index >= len) {

                index = 0;

            }

            //切换图片

            changeImg();

        }, 2000)

    };

    // 自动在main上触发鼠标离开的事件

    main.onmouseout();

    //遍历所有点击，且绑定事件，点击原点切换图片

    for (let i = 0; i < len; i++) {

        //给所有span添加一个id的属性，值为i，作为当前span的索引

        dots[i].id = i;

        dots[i].onclick = function () {

            //改变index为当前span的索引

            index = this.id;

            changeImg();

        }

    }

    // 下一张

    next.onclick = function () {

        index++;

        if (index >= len) index = 0;

        changeImg();

    };

     // 上一张

    prev.onclick = function(){

       index--;

       if(index<0) index=len-1;

       changeImg();

    }

}

slideImg();

4.2导航栏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>综合实例</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

<div class="main" id="main">

    <div class="menu-box"></div>

    <!-- 子菜单 -->

    <div class="sub-menu hide" id="sub-menu">

        <!-- 手机、配件 -->

        <div class="inner-box">

            <div class="sub-inner-box">

                <div class="title">手机、配件</div>

                <div class="sub-row">

                    <span class="bold mr10 ">手机通讯: </span>

                    <a href="">手机</a>

                    <span class="mr10 ml10">/</span>

                    <a href="">手机维修</a>

                    <span class="mr10 ml10">/</span>

                    <a href="">以旧换新</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">手机配件：</span>

                    <a href="">手机壳</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">手机存储卡</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">数据线</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">充电器</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">电池</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">运营商：</span>

                    <a href="">中国联通</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">中国移动</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">中国电信</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">智能设备：</span>

                    <a href="">智能手环</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">智能家居</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">智能手表</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">其他配件</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">娱乐：</span>

                    <a href="">耳机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">音响</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">收音机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">麦克风</a>

                </div>

            </div>

        </div>

        <div class="inner-box">

            <div class="sub-inner-box">

                <div class="title">电脑</div>

                <div class="sub-row">

                    <span class="bold mr10">电脑：</span>

                    <a href="">笔记本</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">平板</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">一体机</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">电脑配件：</span>

                    <a href="">显示器</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">CPU</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">主板</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">硬盘</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">电源</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">显卡</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">其他配件</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">游戏设备：</span>

                    <a href="">游戏机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">耳机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">游戏软件</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">网络产品：</span>

                    <a href="">路由器</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">网络机顶盒</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">交换机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">存储卡</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">网卡</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">外部产品：</span>

                    <a href="">鼠标</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">键盘</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">U盘</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">移动硬盘</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">鼠标垫</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">电脑清洁</a>

                </div>

            </div>

        </div>

        <div class="inner-box">

            <div class="sub-inner-box">

                <div class="title">家用电器</div>

                <div class="sub-row">

                    <span class="bold mr10">电视：</span>

                    <a href="">国产品牌</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">韩国品牌</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">欧美品牌</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">空调：</span>

                    <a href="">显示器</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">柜式</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">中央</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">壁挂式</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">冰箱：</span>

                    <a href="">多门</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">对开门</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">三门</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">双门</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">洗衣机：</span>

                    <a href="">滚筒式洗衣机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">迷你洗衣机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">洗烘一体机</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">厨房电器：</span>

                    <a href="">油烟机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">洗碗机</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">燃气灶</a>

                </div>

            </div>

        </div>

        <div class="inner-box">

            <div class="sub-inner-box">

                <div class="title">家具</div>

                <div class="sub-row">

                    <span class="bold mr10">家纺：</span>

                    <a href="">被子</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">枕头</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">四件套</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">床垫</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">灯具：</span>

                    <a href="">台灯</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">顶灯</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">节能灯</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">应急灯</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">厨具：</span>

                    <a href="">烹饪锅具</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">餐具</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">菜板刀具</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">家装：</span>

                    <a href="">地毯</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">沙发垫套</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">装饰字画</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">照片墙</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">窗帘</a>

                </div>

                <div class="sub-row">

                    <span class="bold mr10">生活日用：</span>

                    <a href="">收纳用品</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">浴室用品</a>

                    <span class="ml10 mr10">/</span>

                    <a href="">雨伞雨衣</a>

                </div>

            </div>

        </div>

    </div>

    <!-- 主菜单 -->

    <div class="menu-content" id="menu-content">

        <div class="menu-item">

            <a href="">

                <span>手机、配件</span>

                <i></i>

            </a>

        </div>

        <div class="menu-item">

            <a href="">

                <span>电脑</span>

                <i></i>

            </a>

        </div>

        <div class="menu-item">

            <a href="">

                <span>家用电器</span>

                <i></i>

            </a>

        </div>

        <div class="menu-item">

            <a href="">

                <span>家具</span>

                <i></i>

            </a>

        </div>

    </div>

    <!-- 图片轮播 -->

    <div class="banner" id="banner">

        <a href="">

            <div class="banner-slide slide1 slide-active">

            </div>

        </a>

        <a href="">

            <div class="banner-slide slide2 ">

            </div>

        </a>

        <a href="">

            <div class="banner-slide slide3">

            </div>

        </a>

    </div>

    <a href="javascript:void(0)" class="button prev" id="prev"></a>

    <a href="javascript:void(0)" class="button next" id="next"></a>

    <!-- 原点导航 -->

    <div class="dots" id="dots">

            <span class="active">

            </span>

        <span>

            </span>

        <span>

            </span>

    </div>

</div>

<script src="js/script.js"></script>

</body>

</html>
* {

    margin:;

    padding:;

}

ul {

    list-style: none;

}

body {

    font-family: "微软雅黑", serif;

    color: #14191e;

}

@font-face {

    font-family: 'iconfont';

    src: url('../img/font/iconfont.eot');

    src: url('../img/font/iconfont.eot') format('embedded-opentype'),

    url('../img/font/iconfont.woff') format('woff'),

    url('../img/font/iconfont.ttf') format('truetype'),

    url('../img/font/iconfont.svg#iconfont') format('svg');

}

.main {

    width: 1200px;

    height: 460px;

    margin: 30px auto;

    overflow: hidden;

    position: relative;

}

.banner {

    width: 1200px;

    height: 460px;

    overflow: hidden;

    position: relative;

}

.banner-slide {

    width: 1200px;

    height: 460px;

    position: absolute;

    background-repeat: no-repeat;

    display: none;

}

.slide1 {

    background-image: url("../img/bg1.jpg");

}

.slide2 {

    background-image: url("../img/bg2.jpg");

}

.slide3 {

    background-image: url("../img/bg3.jpg");

}

.slide-active {

    display: block;

}

.button {

    position: absolute;

    width: 40px;

    height: 80px;

    left: 244px;

    top: 50%;

    margin-top: -40px;

    background: url("../img/arrow.png") no-repeat center;

}

.button:hover {

    background-color: #333;

    opacity: 0.8;

    filter: alpha(opacity=80);

}

.prev {

    transform: rotate(180deg);

}

.next {

    left: auto;

    right:;

}

.dots {

    position: absolute;

    right: 20px;

    bottom: 24px;

    text-align: right;

}

.dots span {

    display: inline-block;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(7, 17, 27, 0.4);

    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;

    margin-left: 8px;

    line-height: 12px;

    cursor: pointer;

}

.dots span.active {

    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;

    background: #fff;

}

a:link, a:visited {

    text-decoration: none;

    color: #333;

}

/* 导航菜单 */

.menu-box {

    background: rgba(7, 17, 27, 0.5);

    opacity: 0.5;

    position: absolute;

    left:;

    top:;

    width: 244px;

    height: 460px;

    z-index:;

}

.menu-content {

    position: absolute;

    left:;

    top:;

    width: 244px;

    height: 460px;

    z-index:;

    padding-top: 6px;

}

.menu-item {

    height: 64px;

    line-height: 66px;

    font-size: 16px;

    cursor: pointer;

    padding: 0 24px;

    position: relative;

}

.menu-item a:link, .menu-item a:visited {

    color: #fff;

}

.menu-item a {

    display: block;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    padding: 0 8px;

    height: 63px;

}

.menu-item i {

    position: absolute;

    right: 32px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 24px;

    top: 2px;

    font-style: normal;

    font-weight: normal;

    font-family: "iconfont", serif;

}

.sub-menu {

    border: 1px solid #d9dde1;

    background: #fff;

    position: absolute;

    left: 244px;

    top:;

    width: 730px;

    height: 458px;

    z-index:;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);

}

.inner-box {

    width: 100%;

    height: 100%;

    background: url(../img/fe.png) no-repeat;

    display: none;

}

.sub-inner-box {

    width: 652px;

    margin-left: 40px;

    overflow: hidden;

}

.title {

    color: #f01414;

    font-size: 16px;

    line-height: 16px;

    margin-top: 28px;

    font-weight: bold;

    margin-bottom: 30px;

}

.sub-row{

    margin-bottom:25px;

}

.bold {

    font-weight:;

}

.mr10 {

    margin-right: 10px;

}

.ml10 {

    margin-left: 10px;

}

.hide{

    display:none;

}
//全局变量

let timer = null,

    index = 0,

    pics = byId("banner").getElementsByTagName("div"),

    dots = byId("dots").getElementsByTagName("span"),

    len = pics.length,

    prev = byId("prev"),

    next = byId("next"),

    menu = byId("menu-content"),

    subMenu = byId("sub-menu"),

    innerBox = subMenu.getElementsByClassName("inner-box"),

    menuItems = menu.getElementsByClassName("menu-item");

// console.log(menu.length);

//封装一个代替getElementById()的方法

function byId(id) {

    return typeof(id) === "string" ? document.getElementById(id) : id;

}

function changeImg() {

    // console.log(index);

    for (let i = 0; i < len; i++) {

        pics[i].style.display = "none";

        dots[i].className = "";

    }

    // 根据index索引找到当前div和当前span，将其显示出来

    pics[index].style.display = "block";

    dots[index].className = "active";

}

// console.log(byId("main"))

function

slideImg() {

    let main = byId("main");

    main.onmouseover = function () {

        //清除定时器

        if (timer) clearInterval(timer);

    };

    main.onmouseout = function () {

        timer = setInterval(function () {

            index++;

            // console.log(index);

            if (index >= len) {

                index = 0;

            }

            //切换图片

            changeImg();

        }, 2000)

    };

    // 自动在main上触发鼠标离开的事件

    main.onmouseout();

    //遍历所有点击，且绑定事件，点击原点切换图片

    for (let i = 0; i < len; i++) {

        //给所有span添加一个id的属性，值为i，作为当前span的索引

        dots[i].id = i;

        dots[i].onclick = function () {

            //改变index为当前span的索引

            index = this.id;

            changeImg();

        }

    }

    // 下一张

    next.onclick = function () {

        index++;

        if (index >= len) index = 0;

        changeImg();

    };

    // 上一张

    prev.onclick = function () {

        index--;

        if (index < 0) index = len - 1;

        changeImg();

    };

    // 导航菜单

    //遍历主菜单且绑定事件

    for (let m = 0; m < menuItems.length; m++) {

        //每一个menu-item定义data-index属性，作为索引

        menuItems[m].setAttribute("data-index", m);

        menuItems[m].onmouseover = function () {

            subMenu.className = "sub-menu";

            // alert("hello");

            let idx = this.getAttribute("data-index");

            for (let j = 0; j < innerBox.length; j++) {

                innerBox[j].style.display = "none";

                menuItems[j].style.background = "none";

            }

            menuItems[idx].style.background = "rgba(0,0,0,0.1)";

            innerBox[idx].style.display = "block";

        }

    }

    menu.onmouseout = function () {

        subMenu.className = "sub-menu hide";

    };

    subMenu.onmouseover = function () {

        this.className = "sub-menu";

    };

    subMenu.onmouseout = function () {

        this.className = "sub-menu hide";

    }

}

slideImg();

04javascript03的更多相关文章

随机推荐

  1. C++中cout输出字符串和字符串型指针地址值的方法以及C语言中的printf用法比较

    #include <iostream> using namespace std; #include <stdio.h> int main() { char *pstr = &q ...

  2. mount -o是什么意思

    mount -o是用loop设备, 在 linux挂载本地的(可能是硬盘上的) iso文件时, 使用的. -o 就是loop回环设备的意思. loop回路文件系统: 是: 用来在一个文件系统上实现另一 ...

  3. Java中class的声明

    在Java中下面Class的声明哪些是错误的?(A,B,C)   A:public abstract final class Test { abstract void method();} B:pub ...

  4. 测开之路一百二十八：flask之重定向和404

    a.b两个视图,分别返回a的页面和b的页面 重定向:redirect 重定向到路由:请求/a/时,重定向到/b/ 重定向到视图函数:url_for(“函数名“),访问/a/时,重定向到函数b() 主动 ...

  5. 8 redo log内部结构分析（IMU/非IMU）--update示例

    Oracle内核的进步 ---- 新.老Redo机制对比 体系结构 非IMU下的redo产生过程 --分析redo log(update) SQL> set sqlprompt "_U ...

  6. laravel 中 同个主域名下，多个项目共享session登录状态

    共享session的前提是session在一个公共的地方,比如database,redis等,laravel框架提供了很大驱动选择: 这里只需要在配置文件里配置三个地方即可 'driver' => ...

  7. bug大致分类及如何定位

    前端 一.概念:网站的静态页面设计,网站前端工作使用的是html.css.javascript等技术设计网站页面的样式和排版布局,这就是网站前端. 二.Bug类别 1.HTML:出现文本的问题基本都是 ...

  8. Jmeter---不同线程组的使用介绍(转)

    在添加线程组:发现线程组种类挺多的  翻查资料后对几个工具进行总结: 原本想写三个 在翻阅资料,后发现下面博文比较详情, 本文大部分来自: https://blog.csdn.net/sinat_32 ...

  9. junper防火墙之自摆乌龙

    Juniper防火墙划分三个端口: 1.E0/0连接内网网络,网段是172.16.1.0/24,E0/0的端口ip地址是172.16.1.1,作为内网网络的网关 2.E0/1连接DMZ区域,网段是17 ...

  10. 【Qt开发】【Linux开发】QT设置环境变量QWS_DISPLAY

    QT设置环境变量QWS_DISPLAY 当应用程序./myQtApp -qws启动时,会去检测QWS_DISPLAY这个环境变量, 判断界面最终显示在哪个framebuffer中, 如果是虚拟的fra ...