《2022年网页编程特殊效果代码 .pdf》由会员分享，可在线阅读，更多相关《2022年网页编程特殊效果代码 .pdf（5页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、网 页 编 程 中 的 各 种 特 殊 效 果 代 码-（一）在网页中动态显示时间的代码- Javascript 代码部分： function disptime( ) var time = new Date( ); /获得当前时间var hour = time.getHours( ); /获得小时、分钟、秒var minute = time.getMinutes( ); var second = time.getSeconds( ); var apm= 上午好！ ; /默认显示上午: AM if (hour12) apm= 下午好！ ; if(hour20) apm= 晚上好！ ; if (m
2、inute 10) /如果分钟只有1 位，补 0 显示minute=0+minute; if (second 10) /如果秒数只有1 位，补 0显示second=0+second; /*设置文本框的内容为当前时间*/ document . myform.myclock . value =hour+:+minute+:+second+ +apm; /*设置定时器每隔1秒（ 1000毫秒），调用函数disptime()执行，刷新时钟显示*/ var myTime = setTimeout(disptime(),1000); /编写一个CSS 样式用于让时间框不显示边框.box border:0p
3、x; Html 网页代码部分： 动态显示时间 当前系统时间: -代码结束 - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 5 页 - - - - - - - - - -（ 二）在网页中动态显示进度条的代码- Javascript 代码部分： var pc = 0; load(); function load() pc += 1; lpc.style.width = pc + %; document.aa.qq.value=pc+%; time = setTimeout
4、(load(),100); !-这里的意思是每100（ 0.1 秒）毫秒刷新一次if (pc=101) document.location=aa.html; Html 网页代码部分： 数据正在加载中， 已加载 请稍后 . 总结：通过在一个层里面嵌套一个层和一个表格，再在一个表格中嵌套一个表格，使之在宽度不断的增加，从而覆盖原来的 -代码结束 - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 5 页 - - - - - - - - - -（ 三）在网页中层的展开与收拢的代
5、码- Javascript 代码部分： function yy() if(zw.style.display=) yy1.value=添加成绩 ; zw .style.display=none; else yy1.value=收起窗口 ; zw .style.display=; Html 网页代码部分： 1、单击一个按钮时，弹出一个层，再次单击时隐藏该层 -代码结束 - -（四）在网页中单击一个超链接层的展开与收拢- Javascript 代码部分： function showdiv(a,b) var aa=document.getElementById(a); var bb=document.
6、getElementById(b); if(aa.style.display=block) aa.style.display=none; else aa.style.display=block; Html 网页代码部分： 点击我试一试 你终于看见我了 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 5 页 - - - - - - - - - -代码结束 - -（五）在网页中一个横向的菜单栏排列代码- Html 网页代码部分: CSS学习 学前准备 入门教程 提高教程 布局
7、教程 精彩应用 CSS 部分代码 : body,div,ul,li margin:0; padding:0px; #body width:994px; height:800px; margin:20px 20px 20px 20px; padding:4px; background-color:#999999; #nav width:960px; height:35px; margin:0 auto; margin-top:30px; #nav ul width:960px; height:35px; #nav ul li float:left; list-style:none; width:
8、100px; background:#9933FF; line-height:35px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 5 页 - - - - - - - - - text-align:center; padding:0 10px; #nav ul li a color:#333; text-decoration:none; background:#off; height:35px; display:block; float:left; padding:
9、0 10px; font-weight:bold; #nav ul li a:hover color:#fff; background:green; -代码结束 - -（六）在网页中层的逐渐呈现的代码- Javascript 代码部分： var a=document.getElementById(div); var i=0; function change() i+; if(document.all) a.style.filter=Alpha(Opacity=+i+); window .setInterval(change,50); /这个属性的意思就是说每隔10 毫秒中就调用一次 change （）方法 Html 网页代码部分： 成都市人民政府 说明：让一个层逐渐消失的代码只需要更改参数值就可以实现了-代码结束 - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 5 页 - - - - - - - - -