0047 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

然后再次测试所有的情况,可以看到,不同的写法能够实现同样的效果,可以让代码变得更简洁。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,081评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,269评论 4 61
  • 今晚想早点离开办公室,憋了一天了,终于可以在这一刻释放了。大步流星走到登良路,一如既往到面馆,点了一碗麻辣小面。 ...
    夙音阅读 673评论 0 4
  • 日常生活中,我们总要经历许许多多的选择,这是与生俱来且无可避免的。一个普通选择的背后蕴含了许多东西...
    草莓没有莫吉托阅读 574评论 0 1