基于JavaScript的网页特效及实例

维普资讯

２００６耳６月　电　脑　学　习　摹３期　基于ＪａｖａＳｃｒｉｐｔ的网页　特效及实例　郑蓉‘　徐丽珍　徐秋芬　摘　要　结合几个实例详细介绍了利用ＪａｖａＳｃｒｉｐｔ语言实现网页的特效处理．使设计的网页更有特色。更具交互功能。　关键词　ＪａｖａＳｃｒｉｐｔ　网页设计　特效　停留时间　分时问候　中图分类号ＴＰ３１１．５２　文献标识码Ｂ　文章编号：１００２—２４２２（２００６）０３－００２１—０２　Ｍａｋｉｎｇ　Ｓｐｅｃｉａｌ　Ｅｆｆｅｃｔ　ａｎｄ　Ｅｘａｍｐｌｅｓ　ｉｎ　Ｗｅｂｐａｇｅｓ　Ｂａｓｅｄ　ｏｎ　Ｊａｖａｓｃｒｉｐｔ　Ｚｈｅｎｇ　Ｒｏｎｇ　Ｘｕ　Ｌｉｚｈｅｎ　Ｘｕ　Ｑｉｕｆｅｎ　Ａｂｓｔｒａｃｔ　Ｔｈｅ　ｐａｐｅｒ　ｃｏｍｂｉｎｅｓ　ｓｅｖｅｒａｌ　ｅｘａｍｐｌｅｓ　ｔｏ　ｉｎｔｒｏｄｕｃｅ　ｈｏｗ　ｔｏ　ｍａｋｅ　ｌｌｓｅ　ｏｆ　ＪａｖａＳｃｒｉｐｔ　ｔｏ　ｒｅａｌｉｚｅ　ｔｈｅ　ｓｐｅｃｉａｌ　ｅｆｆｅｃｔ　ｉｎ　ｔｈｅ　ｗｅｂｐａｇｅ．　Ｋｅｙｗｏｒｄ　ＪａｖａＳｃｒｉｐｔ　Ｗｅｂｐａｇｅ　Ｄｅｓｉｇｎ　Ｓｐｅｃｉｌａ　Ｅｆｆｅｃｔ　Ｒｅｓｉｄｅｎｃｅ　Ｔｉｍｅ　Ｔｉｍｅ—ｓｈａｒｉｎｇ　Ｇｒｅｅｔｉｎｇ　新兴的脚本语言ＪａｖａＳｃｒｉｐｔ是和ＨＴＭＬ无缝连结的脚　ｖａｔ　ｃｌｏｃｋ＿ｓｔａｒｔ＝ｔｉｍｅ＿ｓｔａｒｔ．ｇｅｔＴｉｍｅ（）：　本语言。通过一个＜ＳＣＲＩＰＴ＞的标记嵌入ＨＴＭＬ文档当中，　ｖａｔ　ｄｌ＿ｏｋ＝ｆａｌｓｅ；　并可以被浏览器选择编译，插入的脚本语言就如同子程序　ｆｕｎｃｔｉｏｎ　ｉｎｉｔ（）　般被ＨＴＭＬ元素所调用成为它的一部分，使网页开发者可　（　ｉｆ（ａｐ　ｎａｍｅ＝＝＂Ｎｅｔｓｃａｐｅ　＆＆ａｐｖｅｒ＞＝３．０）　以更有效地控制页面，并能对用户的触发事件做出响应，而　ｄｌｏｋ＝ｔｒｕｅ；　且不需要客户机与服务器进行交互通信，从而既为用户提　ｒｅｔｕｒｎ　ｔｒｕｅ；　供了更快速的操作，又减小了服务器端的负担。　）　ＪａｖａＳｃｒｉｐｔ是一种功能强大的脚本化语言。该程序不能　ｆｕｎｃｔｉｏｎ　ｇｅｔ＿ｔｉｍｅ＿ｓｐｅｎｔ（）　脱离ＨＴＭＬ而独立运行，必须嵌入到ＨＴＭＬ语言中才能显　（　示其功能，但它确实增强了网页的表现力。可以用它来创建　ｖａｒ　ｔｉｍｅ＿ｎｏｗ＝ｎｅｗ　Ｄａｔｅ（）：　ｒｅｔｕｒｎ（（ｔｉｍｅ＿ｎｏｗ．ｇｅｔＴｉｍｅ（）一ｃｌｃｏｋ交互式的Ｗｅｂ页面，可以实现许多特殊效果，并可扩展页　ｓｔａｒｔ）／１０００）：　）　＼　面功能。本文通过几个实例详细介绍了特效的制作。　ｆｕｎｃｔｉｏｎ　ｓｈｏｗ＿ｓｅｃｓ（）∥ｓｈｏｗ　ｔｈｅ　ｔｉｍｅ　ｕｓｅｒ　ｓｐｅｎｔ　Ｏ１１　ｔｈｅ　ｓｉｄｅ　１实例　（　ｖａｔ　ｉ＿ｔｏｔａｌ＿ｓｅｅｓ＝Ｍａｔｈ．ｏｒｕｎｄ（ｇｅｔｔｉｍｅ＿ｓｐｅｎｔ（））：　１．１停留时间　ｖａｔ　ｉｓｅｃｓ＿＿ｓｐｅｎｔ＝ｉ＿ｔｏｔａｌｓｅｃｓ％６０：　此程序的功能是统计用户在网站停留的时间，该程序　ｖａｔ　ｉｍｌｎｓｓｐｅｎｔ＝Ｍａｔｈ．ｒｏｕｎｄ（（ｉｔｏｔａｌ＿＿ｓｅｃｓ一３０）／ｔ５０）：　的实现分三步：　ｖａｒ　ｓ　ｓｅｅｓｓｐｅｎｔ＝　＋（（ｉｓｅｅｓ＿ｓｐｅｎｔ＞９）？ｉ＿ｓｅｃｓｓｐｅｎｔ：　＜ｓｃｒｉｐｔ　Ｉａｎｇｕａｇｅ＝＂ＪＡＶＡＳＣＲＩＰＴ＂＞　＋ｉｓｅｃｓ＿ｓｐｅｎｔ）；　＜！一一　ｖａｔ　ｓｍｌｎｓ＿＿ｓｐｅｎｔ＝　＋（（ｉｍｉｎｓｓｐｅｎｔ＞９）？ｉ．＿ｍｉｎｓ＿ｓｐｅｎｔ：　＋　ｖａｔ　ａｐ＿ｒｍｍｅ＝ｎａｖｉｇａｔｏｒ．ａｐｐＮａｍｅ；　ｉｍｉｎｓ＿ｓｐｅｎｔ）；　ｖａｒ　ａｐ＿ｖｉｎｆｏ＝ｎａｖｉｇａｔｏｒ．ａｐｐＶｅｒｓｉｏｎ；　ｄｏｃｕｍｅｎｔ．ｆｍ０．ｔｉｍｅｓｐｅｎｔ．ｖａｌｕｅ＝ｓ．＿ｍｉｎｓｓｐｅｎｔ　：　＋ｓ＿ｓｅｅｓ＿ｓｐｅｎｔ；　＿＿ｖａｒ　ａｐ＿ｖｅｒ　ｐａｒｓｅｂｌｏａｔ（ａｐｖｉｎｆｏ．ｓｕｂｓｔｒｉｎｇ（０．ｗｉｎｄｏｗ．ｓｅｔＴｉｍｅｏｕｔ（＂ｓｈｏｗ　ｓｅｃｓ（）　．１０００）：　＿ａｐｖｉｎｆｏ．ｉｎｄｅｘＯｆ（　（　）））：　）　．　ｖａｔ＂ｔｉｍｅ　ｓｔａｒｔ：ｎｅｗ　Ｄａｔｅ（）：　／／－－＞　参考文献　［３］刘宝旭，曹爱娟，许榕生．陷阱网络技术综述［Ｊ］．Ｉｓ．　［Ｉ］熊华，郭世泽等．网络安全一取证与蜜罐［Ｍ］．北京：　１］：网络安全技术与应用，２００３，１２（１）：６５—６９．　人民邮电出版社，２００３，９７—１３６．　［４］Ｌ，￣Ｊｒｌｃｅ　Ｓｐｉｔｚｎｅｒ．Ｄｅｉｆｎｉｉｔｏｎｓ　ａｎｄ　Ｖａｌｕｅ　ｏｆ　Ｈｏｎｅｙｐｏｔｓ．　Ｅ２］马晓丽，赵站生，黄轩．Ｈｏｎｅｙｐｏｔ一网络陷阱．北京：计　［ＥＢ，ＯＬ］．ｈｔｔｐ：／／ｗｗｗ．ｓｐｉｔｅｒ．ｎｅｔ．２００２．　算机工程与应用，２００３，３９（４）：１６２—１６５．　［５］Ｈｏｎｅｙｎｅｔ　Ｐｒｏｊｃｅｔ．Ｋｎｏｗ　Ｙｏｕｒ　Ｅｎｅｍｙ：Ｄｅｆｉｎｉｎｇ　Ｖｉｒｔｕａｌ　Ｈｏｎｅｙｎｅｔｓ［Ｅ　０Ｌ］．ｈｔｔｐ：／／ｗｗｗ．ｈｏｎｅｙｎｅｔ．ｏｒｇ．２００３．　｝郑蓉，徐丽珍杭州职业技术学院信息电子系（３１００１８），主要从事计算机平面设计、网页设计、影视动画设计。　徐秋芬浙江育英职业技术学院信息技术系，主要从事网页设计、数据库开发等。　收稿日期：２００６－０２一Ｉ８　一　。　２ｌ　・　

维普资讯

２００６年６月　电　脑　学　习　纂３期　中小型企业内部网络的远程安全访问　罗文’　摘　要　阐述了虚拟专用网的技术及Ｗｉｎｄｏｗｓ　Ｓｅｒｖｅｒ２００３　Ｌ２　Ｐｓｅｃ　ＶＰＮ的实现。　关键词　ＶＰＮ　ＰＰＴＰ　Ｌ２ＴＰ　ＩＰＳｅｃ　Ｗｉｎｄｏｗｓ　Ｓｅｒｖｅｒ２００３　中图分类号ＴＰ３９３．０８　文献标识码Ｂ　文章编号：１００２－２４２２（２００６）Ｏ３－ｏ０２２—０３　Ｌｏｎｇ－ｒａｎｇｅ　Ｓａｆｅ　Ａｃｃｅｓｓ　ｔｏ　Ｓｍａｌｌ－ｓｃａｌｅｄ　Ｂｕｓｉｎｅｓｓ　Ｅｎｔｅｒｐｒｉｓｅ　Ｎｅｔｗｏｒｋ　Ｌｕｏ　Ｗｅｎ　Ａｂｓｔｒａｃｔ．　ｅ　ｐａｐｅｒ　ｅｌａｂｏｒａｔｅｓ　ｔｈｅ　ｔｅｃｈｎｉｑｕｅ　ｏｆ　ＶＰＮ　ａｎｄ　ｔｈｅ　ｒｅａｌｉｚａｔｉｏｎ　ｏｆ　Ｗｉｎｄｏｗｓ　Ｓｅｒｖｅｒ２００３　Ｌ２ＴＰ￣ＶＰＮ．　Ｋｅｙｗｏｒｄ　ＶＰＮ　ＰＰＴＰ　Ｌ２ＴＰ　ＩＰＳｅｃ　Ｗｉｎｄｏｗｓ　Ｓｅｒｖｅｒ２００３　随着经济的发展，越来越多的企业需要将内部网络向　１　ＶＰＮ技术简述　远程工作人员、移动办公人员、合作伙伴、供应商和客户开　ＶＰＮ是英文Ｖｉｒｔｕａｌ　Ｐｒｉｖａｔｅ　Ｎｅｔｗｏｒｋ缩写，即虚拟专用　放。数据通过Ｉｎｔｅｍｅｔ在公用网上传输，服务质量和安全问　网。ＶＰＮ技术的最大优点在于利用了公用网（如Ｉｎｔｅｍｅｔ）　题等都得不到保障。ＶＰＮ是一门网络新技术，它向用户提供　这个廉价而快速的网络平台，大大降低了建设专用网络连　了一种通过公用网（如ｉｎｔｅｍｅｔ）远程安全访问企业内部　接所需的昂贵费用。用于构建ＶＰＮ的公共网络包括Ｉｎｔｅｒ－　网络的方式。　ｎｅｔ、帧中继和ＡＴＭ等。　＜／ｓｃｒｉｐｔ＞　ｎＯＷ＝ｎｅｗ　Ｄａｔｅ（）．ｈｏｕｒ：ｎｏｗ．ｇｅｔＨｏｕｒｓ（）　Ｓｔｅｐ２：修改ｈｔｍｌ文件里的＜ｂｏｄｙ＞￣句为：　ｆ（ｈｏｕｒ＜６）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　凌晨好！　））　＜ＢＯＤＹ　ｏｎＩｍｄ＝　ｉｎｉｔ（）：ｗｉｎｄｏｗ．ｓｅｔＴｉｍｅｏｕｔ（＂８ｈｏｗ￣８（）　。１）；ｅｌｓｅ　ｉｆ（ｈｏｕｒ＜９）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　早上好！　））　＿　＞　ｄ８ｅ　ｉｆ（ｈｏｕｒ＜ｌ２）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　上午好！　））　Ｓｔｅｐ３：将下列原代码加／Ｘ．＜ｂｏｄｙ＞＜／ｂｏｄｙ＞之间：　ｅｌｓｅ　ｉｆ（ｈｏｕｒ＜１４）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　中午好！　））　＜ＦＯＲＭ　ｎａｍｅ＝＇ｆｍＯ＂ｏｎＳｕｂｍｉｔ＝　０＂＞＜ＦＯＮＴ　ＣＯＬＯＲ＝＇＃６０６ＯＦＩ￣＞停　ｅｌｓｅ　ｉｆ（ｈｏｕｒ＜１７）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　下午好！　））　留时间：　ｄ８ｅ　ｉｆ（ｈｏｕｒ＜１９）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　傍晚好！　））　￣＇ＯＮＴ＞＜ＩＮＰＵＴ　ｔｙｐｅｍ￣　ｔｅｘｔ　ｎａｍｅ：　ｔｉｍｅ＿ｓｐｅｎｔ　ｓｉｚｅ＝７　ｏｌｌＦｏｃｕ８－－　ｅｌｓｅ　ｉｆ（ｈｏｕｒ＜２２）（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　晚上好！　））　ｔｈｉｓ．ｂｌｕｒ（）　＞＜／ＦＯＲＭ＞　ｅｌｓｅ（ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　夜里好！　））　／／－－＞　１．２将站点加入收藏夹　／＜ｓｃｒｉｐｔ＞　此程序功能是能够把当前网站的地址添加到收藏夹。　完成此程序只需将以下代码加入ＨＴＭＬ文件的＜　２结束语　ｂｏｄｙ＞＜／ｂｏｄｙ＞之间：　以上实例，为了适应需要，只要调整相应的语句和相应　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝　Ｊａｖａ，Ｓｃｒｉｐｔ　＞　的参数，就可以满足更高的要求了。通过这些实例可以制作　ｆｕｎｃｔｉｏｎ　ｂｏｏｋｍａｒｋｉ（）｛ｗｉｎｄｏｗ．ｅｘｔｅｒｎａ１．ａｄｄＦａｖｏｒｉｔｅ（＂ｈｔｔｐ：／／ｚｒｓｈｂ．１２　出丰富多彩的网页效果，但网页的制作不仅是一个技术实　６．ｅｏｍ￣９　笑容工作室　））　现的问题，更是一个艺术创作的过程，是艺术与科学结合的　ｉｆ（ｄｏｃｕｍｅｎｔ．ａｌ１）ｄｏｃｕｍｅｎｔ．ｗｒｉｔｅ（　＜ａ　ｈｒｅ，ｆ＝ｍ＃ｎ　ｏｎＣｌｉｃｋ＝　ｂｏｏｋｍａｒｋｉｔ　（）　＞＜ｓｔｒｏｎｇ＞将本站加入收藏夹＜／ｓｔｒ加ｇ＞＜／ａ＞　）　产物。在网页中增加一些特效处理，可以使原本单一的静态　／＜ｓｃｒｉｐｔ＞　网页更吸引浏览者，充分显示出主页的特色，但是这些　１．３分时问候　ＪａｖａＳｃｒｉｐｔ程序也不宜过多，否则会大大影响浏览速度。　－　此程序的功能是网页预览时根据当前的系统时间来显　参考文献　示相应的问候语。　［１］四海工作室．ＣＳＳ＆ＤＨＴＭＬ动态网页教程．北京：科学　完成此程序只需将以下代码加人到需要显示分时问候　出版社，２００２—４．　的ＨＴＭＬ标记符处即可（在＜ｂｏｄｙ＞＜／ｂｃＭｙ＞￣Ｌ间）。　［２３白煜．Ｄｒｅａｍｗｅａｖｅｒ网页设计（ＭＸ版）案例教程．北　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝＇ｊａｖａＳｃｒｉｐｔ　＞　京：清华大学出版社，２００３—７．　＜！一一　｛罗文湖南衡阳师范学院计算机科学系工程师（４２１００８），研究方向：软件工程，计算机网络应用　收稿日期：２００６－０１－０４　・　２２　・