本文介绍了如何使用JavaScript在网页上创建一个简单的星座计算器，用户输入日期后计算并显示星座，同时包含错误提示和代码优化。通过HTML、CSS和JavaScript配合，实现了交互式的星座查询功能。
前一节课，通过JavaScript来实现在网页上进行四则运算。
这节课，参照以前第1章里面的根据输入日期计算所属星座。
程序设计思路
在网页上显示2个文本输入框，一个是月份，一个是日期。
点击计算按钮后，将计算的结果显示在下方的结果部分。
如果日期输入超过范围，则在点击计算按钮时进行alert提示。
大概的样子是这样的：
3-6-1.jpg
编写页面显示效果
可以参照上节课的网页的样式，先编写网页内容和对应的样式。
新建3个文件，xingzuo.html，xingzuo.css，xingzuo.js。
xingzuo.html代码如下：
3-6-2.jpg
xingzuo.css代码如下：
3-6-3.jpg
3-6-4.jpg
浏览器打开html文件，查看网页效果：
3-6-5.jpg
计算逻辑
修改html文件，在计算按钮上增加事件代码，调用jisuan函数，然后将计算结果的内容删除掉。
xingzuo.html代码修改如下：
3-6-6.jpg
然后打开xingzuo.js，新增jisuan函数，然后参照之前的python代码，编写JavaScript代码。
xingzuo.js代码如下：
3-6-7.jpg
3-6-8.jpg
3-6-9.jpg
3-6-10.jpg
刷新网页：
3-6-11.jpg
输入日期3月20日，然后点击检查按钮：
3-6-12.jpg
可以看到结果正确。
重新输入日期4月21日，然后点击检查按钮：
3-6-13.jpg
可以看到结果正确。
然后重新故意输入一个错误的2月30日，然后点击检查按钮：
3-6-14.jpg
可以看到提示错误的日期范围。
然后可以测试所有的错误情况，以及每个月都测试4个日期，月头月尾，两个星座的分隔日期。确保所有的情况下程序都是正确的。
使用数组来简化代码
和python编程一样，同样可以使用数组来简化代码。
修改xingzuo.js代码如下：
3-6-15.jpg
然后再次测试所有的情况，可以看到，不同的写法能够实现同样的效果，可以让代码变得更简洁。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
