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>

演示结果:

JavaScript---网络编程(8)-DHTML技术演示(1)的更多相关文章

  1. JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...

  2. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  3. JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

    这节讲述多选框的使用,当然,肯定是结合css和Javascript一起的. checkbox的使用1: 演示代码: <html> <head> <meta http-eq ...

  4. JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

    对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...

  5. JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

    一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该 ...

  6. Linux网络编程-IO复用技术

    IO复用是Linux中的IO模型之一,IO复用就是进程预先告诉内核需要监视的IO条件,使得内核一旦发现进程指定的一个或多个IO条件就绪,就通过进程进程处理,从而不会在单个IO上阻塞了.Linux中,提 ...

  7. Socket网络编程TCP、UDP演示样例

    Socket网络编程: 1) OSI(了解): 国际标准化组织ISO(International Orgnization for Standardization)指定了网络通信的模型:开放系统互联(O ...

  8. 读书笔记——网络编程与开发技术(3)基于TCP/IP协议的网络编程相关知识

    TCP/IP协议:数据链路层,网络层,传输层,应用层. IP地址分为5类:A类.B类.C类.D类.E类. (A类.B类.C类是基本类,D类多用于多播传送,E类为保留类.) "*"表 ...

  9. java socket网络编程(多线程技术)

    Client.java import java.io.*; import java.net.*; import java.util.*; public class Client { public st ...

随机推荐

  1. 淘宝可以传照片搜索商品,verygood.雅客VC多味水果糖

    奶奶喜欢吃点硬糖.在当地买了些说是不好.到是一个亲戚买的一种糖比较满意(好久了都快融化了). 但是我只有照片,能知道品牌,在jd没这样一样的商品了. 还好借助淘宝的传照片功能,找到了.

  2. 【实习记】2014-08-27堆排序理解总结+使用typedef指代函数指针

        过程记录 4个月前C语言版的七大排序算法实践让我在写C++版时轻车熟路.特别是冒泡,插入,希尔,选择这四种排序不用调试即运行成功.输出的效果与C语言做的版本完全一样,其中令我印象深刻的是,co ...

  3. ES6笔记-正则表达式和字符串正则方法

    RegExp构造函数 在ES5中,RegExp构造函数的参数有两种情况. 第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag). var regex = new RegExp( ...

  4. php随机生成福彩双色球号码

    发布:thebaby   来源:net     [大 中 小] 不瞒您说,俺也是个双色球爱好者,经常买,但迟迟没有中过一等奖,哈哈.这里为大家介绍用php随机生成福彩双色球号码的二种方法,供朋友们学习 ...

  5. 使用Unidac内置连接池

    第一步: 放一个TUniconnection并设置相关属性 之后直接使用TUniconnection对象即可 跟踪unidac源码uni单元1540行中可以看到 Connect方法调用CreateIC ...

  6. Omnithreadlibary学习(3)-IOmniTask异步执行SendMessage

    在任务中发送消息, 可以是函数或者对象方法 TOmniTaskMessageEvent = procedure(const task: IOmniTaskControl; const msg: TOm ...

  7. Kivy中文显示

    Win7系统 下载 DroidSansFallback.ttf字体(android设备上自带了) 源代码第一行增加#-*- coding:utf-8 -*- 创建widget值定font_name s ...

  8. [python]filter

  9. RSA算法原理及实现

    参考资料: 阮哥的日志:http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html http://www.ruanyifeng ...

  10. jersey REST的接口简述

    GET方法:只读,是幂等和安全的.在接口中抽象地定义了资源的请求方法类型后,其全部实现类都无须再定义. HEAD方法:与GET方法相似,只是服务器端的返回值不包括HTTP实体. OPTIONS方法:与 ...