DHTML技术演示---新闻字体（一）

最新推荐文章于 2017-08-10 14:35:45 发布

海那边的小萌男

最新推荐文章于 2017-08-10 14:35:45 发布

阅读量339

点赞数

分类专栏： J2EE 文章标签： html xml 技术字体

本文链接：https://blog.csdn.net/weixin_37720904/article/details/71671958

版权

J2EE 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

学了这么多天，来个综合演示把！！
DOM—Document Object Model 文档对象模型

dom技术: 把标记文档（文档:html页面，xml文档(文件)
）变成对象树，通过对这棵树中的对象进行操作(增删改查)，实现对文档内容的操作。
对dom对象树进行增删改查，产生的效果就是对页面内容进行增删改查!

DHTML:动态html技术，它不是一门语言，而是一项综合技术: html+css+js+dom
技术边界:
- html: 提供标签，对数据进行封装。—-目的是便于对该标签中的数据进行操作
- css: 提供样式属性，对标签中的数据进行样式定义
- dom: 把标记文档解析成对象树，并且提供一些对树中对象进行操作的变量和函数
- js: 提供程序设计语言，对页面中的对象进行逻辑操作 (if,for,…)

技术点

  屏蔽默认超链接的跳转即屏蔽<a>标签中的href属性:
           法1: <a href="#" ...>大字体</a>  ，不足：地址栏中多了个"#"号
           法2: <a href="javascript:void(0)"...>大字体</a>  ,这个更好，地址栏中没有"#"号
        -->

主要通过点击三个不同的连接，来改变新闻字体的演示和大小。
代码

<!DOCTYPE html>
<html>
  <head>
    <title>DHTML---新闻字体演示</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        div{
            border: #336600 solid 2px;
            width: 700px;
            height: 600px;
            margin: 50px auto;
        }

    </style>
    <script type="text/javascript">
        function Font(size,color){
            var a = document.getElementById("News");
            a.style.fontSize=size;
            a.style.color=color;
        }

    </script>
  </head>

  <body>
    <!--
           屏蔽默认超链接的跳转即屏蔽<a>标签中的href属性:
           法1: <a href="#" ...>大字体</a>  ，不足：地址栏中多了个"#"号
           法2: <a href="javascript:void(0)"...>大字体</a>  ,这个更好，地址栏中没有"#"号
        -->

        <!--
            开发小技巧: 用js+dom+css的方式设置页面显示样式时，如果不熟悉，可以先以HTML(在标签中添加属性)方式测试一下，然后再写js代码。
        -->


        <div id="News" > 
            <a href="javascript:void(0)" onclick="Font('28pt','#cc66ff')">大字体</a>
            <a href="javascript:void(0)" onclick="Font('20pt','#000066')">中字体</a>
            <a href="javascript:void(0)" onclick="Font('12pt','#00cc00')">小字体</a>
            <hr>
        北京时间5月11日，据RealGM报道，《纽约时报》近日揭露了当年迈克-德安东尼（现火箭主帅）当年离任尼克斯主帅的原因。
　　2011-12赛季德安东尼首次担任NBA主帅就是在尼克斯，但赛季尚未结束就惨遭下课，原因是当时尼克斯当家球星卡梅隆-安东尼向球队下通牒：如果德安东尼下赛季还要继续留在球队，他就会离开。
　　据悉此举的原因是安东尼不喜欢德帅的进攻体系，德安东尼不愿意在这种环境下继续待下去：“所以我放弃了。”
        </div>
  </body>
</html>

结果—放弃审美来看

这里写图片描述

我们也可以通过设置多种风格类样式，再选择不同的类样式设置
代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>DHTML---新闻字体演示</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        div{
            border: #336600 solid 2px;
            width: 700px;
            height: 600px;
            margin: 50px auto;
        }
        .max{
            font-size: 28pt;
            color:red;
            background-color:#ffffff 
        }
        .norm{
            font-size: 20pt;
            color:#ffff000;
            background-color: #003300;
        }
        .min{
            font-size: 12pt;
            color:red;
            background-color: #99ff00;
        }

    </style>
    <script type="text/javascript">
        function Font(classname){
            var a = document.getElementById("News");
            a.className = classname;
        }

    </script>
  </head>

  <body>
    <!--
           屏蔽默认超链接的跳转即屏蔽<a>标签中的href属性:
           法1: <a href="#" ...>大字体</a>  ，不足：地址栏中多了个"#"号
           法2: <a href="javascript:void(0)"...>大字体</a>  ,这个更好，地址栏中没有"#"号
        -->

        <!--
            开发小技巧: 用js+dom+css的方式设置页面显示样式时，如果不熟悉，可以先以HTML(在标签中添加属性)方式测试一下，然后再写js代码。
        -->


        <div id="News" > 
            <a href="javascript:void(0)" onclick="Font('max')">类样式1</a>
            <a href="javascript:void(0)" onclick="Font('norm')">类样式2</a>
            <a href="javascript:void(0)" onclick="Font('min')">类样式3</a>
            <hr>
        北京时间5月11日，据RealGM报道，《纽约时报》近日揭露了当年迈克-德安东尼（现火箭主帅）当年离任尼克斯主帅的原因。
　　2011-12赛季德安东尼首次担任NBA主帅就是在尼克斯，但赛季尚未结束就惨遭下课，原因是当时尼克斯当家球星卡梅隆-安东尼向球队下通牒：如果德安东尼下赛季还要继续留在球队，他就会离开。
　　据悉此举的原因是安东尼不喜欢德帅的进攻体系，德安东尼不愿意在这种环境下继续待下去：“所以我放弃了。”
        </div>
  </body>
</html>

结果如下
这里写图片描述

还可以在外部写好CSS，然后可以向想办法导入

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:新闻字体的设置---换套装</title>
        <!--给开发chang()方法做测试的
            <link rel="stylesheet" type="text/css" href="css/1.css">
        -->
        <link rel="stylesheet" type="text/css">

        <script type="text/javascript">
            function changeFont(selectedName){
                var oDivNewsText= document.getElementById("newstext");
                oDivNewsText.className=selectedName;
            }

            function change(num){
                var oLink= document.getElementsByTagName("link")[0];
                oLink.href="css/"+num+".css";
            }
        </script>
    </head>

    <body>
        <h1>这是一个新闻标题</h1>
        <hr/>
        <a href="javascript:void(0)" onclick="change('1')">风格1</a>
        <a  href="javascript:void(0)" onclick="change('2')" >风格2</a>
        <br/>
        <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>
      <!--
        小技巧:开发测试
          <div id="newstext" style="font-size:28px;">
          <div id="newstext" class="min">
      -->
      <div id="newstext">
               竞赛流程分为选手自我介绍、汇报情景说明，正式汇报和评委提问4个环节。竞赛评委根据选手的表现从汇报内容、PPT制作、语言表达、形象气质、现场答题及时间控制等六个方面进行综合评判，现场打分，经过一番激烈角逐，长沙总部的综合设计四所赵旷纬和三所边怡锐以稳健的台风、扎实的专业功底、独特的演讲方式分别摘得规划景观组、建筑市政组桂冠，其次评出二等奖和三等奖各四名。
               近年来，设计院承担了大量工程、技术创新等项目，在项目的不同阶段，向上级部门、技术审查部门、业主单位以及地方政府汇报项目成果、沟通项目事宜的任务越来越重，要求越来越高。汇报沟通的质量不仅关系到项目的顺利进展，更关乎形象和市场经营效果。本届竞赛对青年教职工汇报水平进行了一次全面检阅，也为青年教职工提供了通过比赛互相学习、互相促进，找到差距、挖掘潜力的机会，对于规范项目成果汇报程序，提高项目成果汇报水平有重要意义。
      </div>

    </body>
</html>