学年论文—DHTML技术之网页计算器.docVIP

DHTML技术之网页计算器 内蒙古师范大学物理与电子信息学院 PAGE 14 PAGE 15 学年论文目录 1、引言 ………………………………………………………………………………2 2、外观设计 …………………………………………………………………………2 3、功能设计 …………………………………………………………………………8 参考文献 ……………………………………………………………………………14 英文摘要 ……………………………………………………………………………15 DHTML技术之网页计算器 李东林（20081116688） （物理与电子信息学院 电子信息工程4班 2008级，内蒙古 呼和浩特 010022） 指导教师：张丽娜 摘要：本文介绍了如何用DHTML技术制作一个网页计算器。此计算器模拟了windows操作系统中的计算器，能实现计算器的基本功能，主要通过JavaScript来实现，通过此计算器的制作，可以更加深入体会DHTML的编程思想。 关键词：DHTML；HTML；CSS；JavaScript ; 计算器 中图分类号： TP319 文献标识码: A 1 引言 DHTML(Dynamic HTML)是动态HTML的简称，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html（页面中的各种页面元素对象，它们是被动态操纵的内容）+css（CSS属性也是动态操纵的内容，从而获得动态的格式效果）+javascript(实际操纵Web页上的HTML和CSS)，其中css和客户端脚本是直接在页面上写而不是链接上相关文件。就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。它是近年来网络发展进程中最具实用性的创新之一，它是一种通过各种技术的综合发展而得以实现的概念，下面介绍如何用DHTML技术制作一个网页计算器。 2 外观设计 外观设计主要通过HTML语言和CSS实现，使用EditPlus作为开发环境。 2.1底部按钮区设计 在EditPlus中新建一个HTML文件，取名为 计算器.html。由图1可看到xp中计算器的样式，计算器的底部按钮区可通过HTML中的form表单来实现，表单中共有四行五列的按钮，表单中的按钮可通过表格来控制。 图1 xp中的计算器 在EditPlus新建的文档内输入以下HTML代码： html headtitle自做计算器/title/head body centerfont color=blueh4DHTML技术之计算器h4/font/center form action= name=keypad table border=0 align=center width=200 height=130 b tr tdinput type=button class=color_green value= 7 onclick=numPressed(7) /td tdinput type=button class=color_green value= 8 onclick=numPressed(8) /td tdinput type=button class=color_green value= 9 onclick=numPressed(9) /td tdinput type=button class=color_red value= / onclick=operation(/) /td tdinput type=button class=color_green value=sqrt onclick=operation(s) /td /tr tr tdinput type=button class=color_green value= 4 onclick=numPressed(4) /td tdinput type=button class=color_green value= 5 onclick=numPressed(5) /td tdinput type=button class=color_green value= 6 onclick=numPressed(6) /td tdinput type=button class=color_red value= * on