我们需要将一年中已经过去的天数百分比显示到ID为op的output元素里。我们使用Math.[a-z]o[a-z]nd()函数来四舍五人计算这个百分比——这样的精确度对于这种应用来说已经足够了。
varop=document,getElementById(,,op,');op.value=Math.round(l00/(m.max-m.min)*(m.value-m.min));varinnerDIV=document.getElementById(MinnerDIVM);innerDIV.style.width=op.value+"%M;innerDIV.style.background="green";范例中的其余部分与HTML5技术无关,但为了这个范例的完整性,我们还是会讲解一下。div元素同样可以按百分比显示图形,原理很简单:一个div设为固定宽度(在这里是px);另一个内嵌的div宽度为要显示的百分比,填充以绿色背景一这是一个非常简单而有效的技巧。为了完成这个介绍,我们还要提一下GoogleChartAPI。在使用这个在线服务时,你需要注明图表规格(chs,在我们的案例中为200xl25px)、图表类型(cht,这里为gom------Gcwg/e-O-A/e/er)以及图表数据(chd,这里为百分比值op.value)ovargoogle=document.getElementById("google*');google.src="http://chartapis.google-com/chartchs=xl25&cht=gom&chd=t:M+op.value;vargSrc=document.getElementByld("googleSrc1');gSrc.innerHTML=google.src;用progress显示任务进程progress元素的运作方式与我们此前讨论过的_i相似,但它被作用于展示一个任务的完成度,典型的例子是用户文件上传或下载。
为了便于演示,我们不会真的去上传文件或者下载一大堆数据,我们要做的只是设计个任务并将它逐步完成到%。以下案例设计了10个checkbox类型的input元素,当它们全部激活时,进度条将显示到%。
Pleaseactivateallthecheckboxes
宁波网站建设认为