灵感点亮生活

导航

Blog统计

公告

文章

收藏

相册

Developer

Other

好友的Blog

我的开源项目

存档


正在读取评论……

厕所使用情况查看系统（WCInfoSystem，简称WIS）
SVG的Javascript的尝试：

在实践中学东西是我最喜欢的，那么想一个什么小题目做一下，学习一下SVG中的JS呢？决定了！就做一个厕所使用状况查询系统吧。

为何选这个题目，主要是发现楼道的阿姨，打扫的频度比较高，但又存在一定规律，每次有感觉奔向厕所，却发现在打扫，想离开却又不愿再忍，场面极度尴尬。为了这个问题不再发生，决定写一个厕所使用情况查看系统（WCInfoSystem，简称WIS）。说干就干。

先打开AI，制作一个楼道平面图：
此主题相关图片


当然，还是要另存为SVG文件，打开看一下，都是熟悉的语句

........................
<rect id="room701" x="2.5" y="292.5" fill="#FFFFFF" stroke="#000000" width="149" height="144"/>
                 <rect x="0.5" y="2.5" fill="#FFFFFF" stroke="#000000" width="381" height="194"/>
......................


查询了一下资料，SVG的JS直接可以写在SVG文件中，如下：

<script type="text/javascript">
<![CDATA[
var wc = svgDocument.getElementById("wc")//得到WC的矩形框
var d = new Date()
var hour = d.getHours()
if(hour==10 || hour ==17 ||hour==15)//判断是否是打扫时间
  wc.setAttribute("fill","#ff0000")//如果是打扫时间，设定为红色
else
  wc.setAttribute("fill","#00ff00")//如果不是设定为绿色
// ]]>
</script>

此主题相关图片


可以看出，完全就是JS语法。OK，这个小系统就完成了，更复杂的要继续学习了

SVG可以直接使用Javascript脚本，使得学习曲线减小，不用重新学习新的知识，SVG可以直接利用CSS和Javascript技术，使得交互性和友好性更好，而且学习曲线也小。

Trackback: http://tb.donews.net/TrackBack.aspx?PostId=378188


[点击此处收藏本文]  发表于2005年05月13日 3:07 PM




正在读取评论……
大名
网址
验证码
评论