JavaScript---网络编程(8)-DHTML技术演示(1)

简介: DHTML技术使用的基本思路: 1. 用标签封装数据—html范畴 2. 定义样式—css范畴 3. 明确事件源、事件和要处理的节点—dom范畴 4.

DHTML技术使用的基本思路:
1. 用标签封装数据—html范畴
2. 定义样式—css范畴
3. 明确事件源、事件和要处理的节点—dom范畴
4. 明确具体的操作方式,其实就是事件的处理内容(过程)—js范畴

新闻字体

第一种方式:html范畴 演示代码:

<html>
  <head>
    <title>>DHTML技术演示---新闻字体1</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function changeFont(size,color){
            //alert("aa");
            var oNewsDiv = document.getElementById("newsDiv");

            //以下用js+dom来设置下面html方式对应的功能
            //<div id="newsDiv" style="font-size:28px">
            //oNewsDiv.style.font-size= "28px"; //左边的方式是html方式中的属性名,不是js中用的属性名
            //oNewsDiv.style.fontSize="28px";//写死了,字体大小用参数更好
            oNewsDiv.stye.fontSize=size;//字体大小
            oNewsDiv.style.color=color;         
        }

    </script>

  </head>
        <!--DHTML技术使用的基本思路:
         1. 用标签封装数据---html范畴
         2. 定义样式---css范畴
         3. 明确事件源、事件和要处理的节点---dom范畴
         4. 明确具体的操作方式,其实就是事件的处理内容(过程)---js范畴
        -->
  <body>
        <!--用“#”号可以屏蔽href的默认超链接功能,但有个不足:地址栏中会添加一个"#"号----改用javascript的方式更好!---javascript:void(0)
        <a href="#" onclick="changeFont()"> 大字体</a>
        -->
        <a href="javascript:void(0)" onclick="changeFont('28px','#aaaaaa')">大字体</a>
        <a href="javascript:void(0)" onclick="changeFont('20px','#000000')">中字体</a>
        <a href="javascript:void(0)" onclick="changeFont('12px','#ff0000')">小字体</a>
        <hr/>
        <!--开始这样先测试下:
            先用html的方式测试一下这样设置字体大小行不行,如果行,再采用API文档右侧栏中的js来实现对应功能
            <div id="newsDiv" style="font-size:28px">
         -->
        <div id="newsDiv">
       5月31日下午14:30,副校长何振在电信楼视频会议室,为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治,有信念,做合格党员”的党课。
何振阐述了“讲政治,有信念”的重要性,并讲述了如何才能把握“讲政治,有信念”。他认为,党员应当从把握“讲政治,有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出,践行“讲政治,有信念”,必须将其与高校管理、教学、科研相结合,运用到实践当中去,“办人民满意的大学”,并结合学校具体情况进行了深入的分析。<br/>
(信息科学与工程学院)
        </div>
  </body>
</html>

360浏览器8.1 演示结果:

大字体:

中字体:

小字体:

第二种方式:css范畴 演示代码:

<html>
  <head>
    <title>>DHTML技术演示---新闻字体1</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        .max{
            color:#808080;
            font-size:28px;
            background-color:#9ce9b4;/*背景色*/
        }
        .norm{
            color:#000000;
            font-size:20px;
            background-color:#cdd8d0;
        }
        .min{
            color:#ff0000;
            font-size:16px;
            background-color:#f9fac2;
        }
    </style>
    <script type="text/javascript">
        function changeFont(sClass){
            var oNewsDiv = document.getElementById("newsDiv") ;
            //利用js+dom的方式来更改节点的样式---class属性
            oNewsDiv.className = sClass;
        }
    </script>

  </head>
        <!--DHTML技术使用的基本思路:
         1. 用标签封装数据---html范畴
         2. 定义样式---css范畴
         3. 明确事件源、事件和要处理的节点---dom范畴
         4. 明确具体的操作方式,其实就是事件的处理内容(过程)---js范畴
        -->
  <body>
        <a href="javascript:void(0)" onclick="changeFont('max')" > 大字体 </a>
        <a href="javascript:void(0)" onclick="changeFont('norm')" > 中字体 </a>
        <a href="javascript:void(0)" onclick="changeFont('min')" > 小字体 </a>

        <!--先用html的方式测试一下,然后再用js+dom
            <div id="newsDiv" class="norm">
        -->
        <div id="newsDiv">
       5月31日下午14:30,副校长何振在电信楼视频会议室,为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治,有信念,做合格党员”的党课。
何振阐述了“讲政治,有信念”的重要性,并讲述了如何才能把握“讲政治,有信念”。他认为,党员应当从把握“讲政治,有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出,践行“讲政治,有信念”,必须将其与高校管理、教学、科研相结合,运用到实践当中去,“办人民满意的大学”,并结合学校具体情况进行了深入的分析。<br/>
(信息科学与工程学院)
        </div>
  </body>
</html>

360浏览器8.1 演示结果:

大字体:

中字体:

小字体:

第三种方式:dom,js范畴 演示代码:

1.css:

.max {
    color: #808080;
    font-size: 28px;
    background-color: #9ce9b4;
}

.norm {
    color: #000000;
    font-size: 20px;
    /*background-color:#cdd8d0;*/
}

.min {
    color: #ff0000;
    font-size: 16px;
    background-color: #f9fac2;
}

2.css:

.max {
    color: #808080;
    font-size: 28px;
    background-image:url(img/back1.jpg);
}

.norm {
    color: #000000;
    font-size: 20px;
    background-image: url(img/back2.jpg);
}

.min {
    color: #ff0000;
    font-size: 16px;
    background-image: url(img/back3.jpg);
}

html:

<html>
  <head>
    <title>DHTML技术演示---新闻字体3--换套装</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" type="text/css" href="1.css" id="linkChgSuit">

     <style type="text/css">
        span:hover{
            background-color:#ff0000;
            cursor:hand;/*鼠标移到那时,显示小手形状*/
        }
     </style>
     <script type="text/javascript">
        //更改类样式
        function changeFont(sClass){
            var oNewsDiv = document.getElementById("newsDiv");
            //利用js+dom的方式来更改节点的样式---class属性
            oNewsDiv.className = sClass;
        }
        //换套装
        function changeSuit(sNum){
            var oLink = document.getElementById("linkChgSuit");
            oLink.href = sNum+".css";
        }


     </script>

  </head>
  <!--DHTML技术使用的基本思路:
   1. 用标签封装数据---html范畴
   2. 定义样式---css范畴
   3. 明确事件源、事件和要处理的节点---dom范畴
   4. 明确具体的操作方式,其实就是事件的处理内容(过程)---js范畴
  -->

  <body>
    <a href="javascript:void(0)" onClick="changeFont('max')"> 大字体</a>
    <a href="javascript:void(0)" onClick="changeFont('norm')">  中字体</a>
    <a href="javascript:void(0)" onClick="changeFont('min')"> 小字体</a>
    <br/>
    <span onClick="changeSuit('1')">风格1</span>
    <span onClick="changeSuit('2')">风格2</span>
    <hr/>
    <!--先用html的方式测试一下,然后再用js+dom
      <div id="newsDiv" class="norm">
    -->
    <div id="newsDiv">
       5月31日下午14:30,副校长何振在电信楼视频会议室,为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治,有信念,做合格党员”的党课。
何振阐述了“讲政治,有信念”的重要性,并讲述了如何才能把握“讲政治,有信念”。他认为,党员应当从把握“讲政治,有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出,践行“讲政治,有信念”,必须将其与高校管理、教学、科研相结合,运用到实践当中去,“办人民满意的大学”,并结合学校具体情况进行了深入的分析。<br/>
(信息科学与工程学院)
    </div>

  </body>

</html>

360浏览器8.1 演示结果:

风格2大字体:

风格2中字体:

风格1大字体:

风格1中字体:

菜单列表:

代码演示:

<html>
  <head>
    <title>DHTML技术演示---菜单列表1</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
        /*老版本的IE支持,新版本不支持了
        dl{
            height:18px;
            overflow:hidden;
        }*/

        /*
block  :  CSS1  块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none  :  CSS1  隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间  
        ul{
            //display:none;//不显示
            display:block;//块显示
        }
        */
        table {
            border:#ff80ff;
            width:80px;
        }

        table ul{
            list-style:none;
            margin:0px;/*外补丁*/
            padding:0px;/*内补丁*/
            background-color:#ff8000;
            display:none;
        }
        table td{
            border:#0000ff 1px solid;
            background:#80ff00;
        }

        table td a:link, table td a:visited{
            color:#8080c0;
            text-decoration:none;
        }
        table td a:hover{
            color:#0000ff;;
        }

        .open{
            display:block;
        }
        .close{
            display:none;
        }


     </style>

     <script type="text/javascript">
        function list(node){
            var oTdNode = node.parentNode;
            //alert( oTdNode.nodeName);//TD
            var oUlNode = oTdNode.getElementsByTagName("ul")[0];
            //alert( oUlNode.nodeName);//UL
            if( oUlNode.className =="open"){
                oUlNode.className ="close";
            }else{
                oUlNode.className ="open";
            }
        }

     </script>
  </head>
  <!--DHTML技术使用的基本思路:
   1. 用标签封装数据---html范畴
   2. 定义样式---css范畴
   3. 明确事件源、事件和要处理的节点---dom范畴
   4. 明确具体的操作方式,其实就是事件的处理内容(过程)---js范畴
  -->

  <body>
    <table>
        <tr>
            <td>
                <a href="javascript:void(0)" onclick="list(this)">文件菜单</a>
                <ul>
                    <li>菜单项一</li>
                    <li>菜单项二</li>
                    <li>菜单项三</li>
                    <li>菜单项四</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <a href="javascript:void(0)" onclick="list(this)">编辑菜单</a>
                <ul>
                    <li>菜单项一</li>
                    <li>菜单项二</li>
                    <li>菜单项三</li>
                    <li>菜单项四</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <a href="javascript:void(0)" onclick="list(this)">调试菜单</a>
                <ul>
                    <li>菜单项一</li>
                    <li>菜单项二</li>
                    <li>菜单项三</li>
                    <li>菜单项四</li>
                </ul>
            </td>
        </tr>
    </table>

  </body>

</html>

360 8.1 演示结果;

下面就是只能点开一个菜单(点一个菜单时,把其他菜单全部关闭):

<html>
    <head>
        <title>DHTML技术演示---菜单列表2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            /*老版本的IE支持,新版本不支持了
             dl{
             height:18px;
             overflow:hidden;
             }*/
            /*
             ul{
             //display:none;//不显示
             display:block;//块显示
             }
             */
            table {
                border: #ff80ff;
                width: 80px;
            }

            table ul {
                list-style: none;
                margin: 0px;
                padding: 0px;
                background-color: #ff8000;
                display: none;
            }

            table td {
                border: #0000ff 1px solid;
                background: #80ff00;
            }

            table td a:link, table td a:visited {
                color: #8080c0;
                text-decoration: none;
            }

            table td a:hover {
                color: #0000ff;;
            }

            .open {
                display: block;
            }

            .close {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function list(node){
                var oTdNode = node.parentNode;
                //alert( oTdNode.nodeName);//TD
                var oUlNode = oTdNode.getElementsByTagName("ul")[0];
                //alert( oUlNode.nodeName);//UL

                var oNode = document.getElementsByName("men");
                for (x = 0; x < oNode.length; x++) {
                    var ulNode = oNode[x].parentNode.getElementsByTagName("ul")[0];
                    if (oNode[x].innerText == node.innerText) {
                        if (ulNode.className == "open") {
                            ulNode.className = "close";
                        }
                        else {
                            ulNode.className = "open";
                        }
                    }
                    else 
                        if (ulNode.className == "open") {
                            ulNode.className = "close";
                        }
                }

            }
        </script>
    </head>
    <!--DHTML技术使用的基本思路:
    1. 用标签封装数据---html范畴
    2. 定义样式---css范畴
    3. 明确事件源、事件和要处理的节点---dom范畴
    4. 明确具体的操作方式,其实就是事件的处理内容(过程)---js范畴
    -->
    <body>
        <table>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)" name="men">文件菜单</a>
                    <ul>
                        <li>
                            菜单项一
                        </li>
                        <li>
                            菜单项二
                        </li>
                        <li>
                            菜单项三
                        </li>
                        <li>
                            菜单项四
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)" name="men">编辑菜单</a>
                    <ul>
                        <li>
                            菜单项一
                        </li>
                        <li>
                            菜单项二
                        </li>
                        <li>
                            菜单项三
                        </li>
                        <li>
                            菜单项四
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:void(0)" onclick="list(this)" name="men">调试菜单</a>
                    <ul>
                        <li>
                            菜单项一
                        </li>
                        <li>
                            菜单项二
                        </li>
                        <li>
                            菜单项三
                        </li>
                        <li>
                            菜单项四
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
</html>

演示结果:

目录
相关文章
|
9天前
|
存储 安全 网络安全
云计算与网络安全:技术融合下的信息安全新挑战
【9月更文挑战第29天】在数字化浪潮的推动下,云计算服务如雨后春笋般涌现,为各行各业提供了前所未有的便利和效率。然而,随着数据和服务的云端化,网络安全问题也日益凸显,成为制约云计算发展的关键因素之一。本文将从技术角度出发,探讨云计算环境下网络安全的重要性,分析云服务中存在的安全风险,并提出相应的防护措施。我们将通过实际案例,揭示如何在享受云计算带来的便捷的同时,确保数据的安全性和完整性。
|
5天前
|
存储 安全 网络安全
云计算与网络安全:技术融合下的安全挑战与机遇
【9月更文挑战第33天】随着云计算技术的飞速发展,企业和个人越来越依赖于云服务来处理和存储数据。然而,这也带来了前所未有的网络安全威胁。本文将探讨云计算环境下的网络安全挑战,包括数据泄露、身份盗用等,并讨论如何通过加强访问控制、使用加密技术和实施安全策略来保护信息安全。文章还将分享一些实际的代码示例,帮助读者更好地理解和应用这些安全措施。
102 70
|
2天前
|
SQL 安全 网络安全
云计算与网络安全:技术融合下的信息安全挑战与应对
【9月更文挑战第36天】在数字化浪潮的推动下,云计算已成为企业和个人不可或缺的技术支撑。然而,随着云服务的广泛应用,网络安全问题亦日益凸显。本文深入探讨了云计算环境下的网络安全挑战,并提出了相应的安全策略和技术解决方案。通过分析云服务的安全架构、网络攻击类型以及防御机制,旨在为读者提供一套完整的云计算网络安全指南。
|
18小时前
|
存储 安全 网络安全
云计算与网络安全:技术融合与挑战
在数字化时代,云计算和网络安全成为了技术发展的两大支柱。本文将探讨云计算服务如何改变数据存储与处理方式,并分析随之而来的网络安全挑战。我们将讨论云服务模型、网络安全策略以及信息安全实践,旨在为读者提供对这一领域深入理解的同时,引发对于未来技术发展方向的思考。
19 13
|
5天前
|
存储 安全 网络安全
云计算与网络安全:技术挑战与应对策略
【9月更文挑战第33天】在数字化时代,云计算已成为企业和个人存储和处理数据的首选方式。然而,随着云服务的普及,网络安全问题也日益突出。本文将探讨云计算中的网络安全挑战,并提出相应的应对策略。我们将分析云服务的安全风险,包括数据泄露、身份验证和访问控制等,并提供一些实用的代码示例来加强云安全。最后,我们将讨论如何通过合理的策略和技术手段来提高云服务的安全性。
|
2天前
|
运维 物联网 5G
5G网络的多接入技术融合:构建无缝通信未来
5G网络的多接入技术融合:构建无缝通信未来
19 4
|
7天前
|
存储 安全 网络安全
云计算与网络安全:技术融合与挑战
【9月更文挑战第31天】在数字化浪潮的推动下,云计算已成为企业和个人数据存储、处理的强大工具。然而,随之而来的网络安全问题也日益凸显,成为制约云服务发展的关键因素。本文将探讨云计算环境下的网络安全挑战,分析常见的网络攻击类型,并提出相应的防御策略。通过深入浅出的讲解,旨在提高公众对云计算环境下网络安全的认识,促进更安全的云服务使用。
|
7天前
|
安全 网络安全 云计算
云计算与网络安全:技术融合与挑战分析
【9月更文挑战第31天】本文将深入探讨云计算和网络安全之间的关系,包括云服务、网络安全、信息安全等技术领域。我们将从云计算的基本概念和特性出发,分析其在网络安全方面的优势和挑战,并探讨如何通过技术和策略来提高云计算的安全性。同时,我们也将讨论网络安全在云计算环境下的重要性,以及如何通过有效的安全措施来保护云服务的安全。最后,我们将通过代码示例来展示如何在云计算环境中实现网络安全。
18 3
|
9天前
|
安全 网络安全 云计算
云计算与网络安全:技术挑战与策略
【9月更文挑战第29天】在数字化转型的浪潮中,云计算已成为企业IT架构的核心。然而,随着云服务的普及,网络安全问题也日益凸显。本文将探讨云计算环境下的网络安全挑战,包括数据泄露、服务中断等风险,以及相应的防护措施,如加密技术和访问控制。同时,文章还将介绍信息安全管理的最佳实践,如定期安全审计和员工培训,以提升企业的安全防护能力。
21 1
|
21小时前
|
存储 安全 网络安全
云计算与网络安全:技术融合与挑战
在数字化浪潮的推动下,云计算已成为企业和个人存储、处理数据的新常态。然而,随之而来的网络安全问题也日益凸显,成为制约云服务发展的关键因素。本文将深入探讨云计算环境下的网络安全挑战,分析信息安全的重要性,并提供针对性的技术解决方案。通过实际代码示例,我们将展示如何在实践中增强云服务的安全性,确保数据的安全与隐私得到保护。文章旨在为读者提供一套完整的云计算与网络安全知识体系,帮助理解并应对这一领域的技术挑战。
5 0