JavaScript---网络编程(8)-DHTML技术演示(1)
2016-06-16 16:52
585 查看
DHTML技术使用的基本思路:
1. 用标签封装数据—html范畴
2. 定义样式—css范畴
3. 明确事件源、事件和要处理的节点—dom范畴
4. 明确具体的操作方式,其实就是事件的处理内容(过程)—js范畴
中字体:
小字体:
中字体:
小字体:
2.css:
html:
风格2中字体:
风格1大字体:
风格1中字体:
360 8.1 演示结果;
下面就是只能点开一个菜单(点一个菜单时,把其他菜单全部关闭):
演示结果:
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>
演示结果:
相关文章推荐
- RHEL系统部署网络yum源
- Android下几种网络库的对比
- CascadeCNN人脸检测学习笔记
- C/C++ 网络编程4: 基本TCP套接字编程
- linux网络接口详解
- HTTP1.0和HTTP1.1的区别
- C/C++ 网络编程3: 套接字基础
- Linux预热之网络性能问题
- 【转】CentOS 使用yum命令安装出现错误提示”could not retrieve mirrorlist http://mirrorlist.centos.org ***”
- 网络游戏同步基础
- 基于NonoHTTPD搭建的get,post请求服务器框架---框架入门
- ATS(App Transport Security)对HTTP协议屏蔽引起的问题
- c++ winhttp通过https双向认证
- 【muduo网络库学习】之Acceptor类分析
- Linux网络配置
- 微软补丁又惹祸——无任何网络提供程序接受指定的网络路径
- iOS -- NSURLSession网络请求,上传,下载
- Http长连接、短连接、持久连接这三个概念的分析总结
- http-关于application/x-www-form-urlencoded等字符编码的解释说明
- WAMP RPC & Publish & Subscribe c++ 实现简析 & TCP 粘包处理方法