ALL PROJECTS

#

计算器

简介:一款包括基本计算功能的计算器

应用逻辑:利用eval()函数将字符串计算为数值。当点击数字和计算符号时,将所点击的数字和符号显示在结果框中,当点击"="时,提取结果框中的字符串,利用eval()函数计算其结果。

show
#

番茄钟

简介:番茄钟,是指把任务分解成半小时左右,集中精力工作25分钟后休息5分钟,如此视作种一个“番茄”。本款番茄钟包括工作和休息两种倒计时,倒计时的时间可以自由指定。

应用逻辑:利用setTimeout()函数作为倒计时。当点击番茄钟时,倒计时开始,并在倒计时函数内设置背景的高度,相当于进度条。当再次点击番茄钟时,clearTimeout()函数暂停倒计时函数。通过设置flag来确定番茄钟倒计时的阶段和背景图。

show
#

井字游戏

简介:井字游戏,类似于五子棋的游戏规则,只不过是三颗棋子连在一起就获胜。

应用逻辑:每当下完一颗棋子,就判断是否获胜。判断规则:从当前落子位置,分别朝4个方向判断,是否存在3个相同的棋子连成一条线,若存在,则该方获胜。机器自动下棋规则:从剩下可下棋子的位置中判断是否有某个位置会获胜,若有,则下棋在该位置。若没有,则判断是否有位置对方可获胜的,若有则,下在该位置,阻挡对方获胜。若没有,则随机下棋。

show
#

天气预报

简介:可显示当前所在地的ip地址与天气状况,同时支持中英文查询全球各地城市的天气状况。

应用逻辑:利用api:"http://ipinfo.io/json?"获取本地公网ip。利用和风天气的api接口获取本地天气信息,当点击搜索框时将搜索框的文本内容作为url参数发送给和风天气的后台api接口,将返回的json数据处理并插入到页面中。请求采用ajax,和风天气是我目前找到的一款不收费不认证的api接口供应商。

show
#

名言警句轮播

简介:可随机播放数据库中的名言警句,并可分享到twitter和微博,同时背景颜色也是随机改变。

应用逻辑:利用野狗云提供的BaaS(后端即服务),名言警句存储在野狗后端,通过野狗提供的api随机提取出名言警句插入到页面中,并同时改变页面背景样式。

show
#

wiki条目检索

简介:可搜索维基百科的条目,当输入为空时,打开一个随机的维基百科条目。

应用逻辑:wiki提供的api接口,获得检索的title,简介以及pageid,并通过api:'http://en.wikipedia.org/?curid=' 获取wiki页面链接。并将结果插入到页面中。api:"http://en.wikipedia.org/wiki/Special:Random"可获取随机的wiki页面。wiki的api相关信息:"http://www.mediawiki.org/wiki/API:Main_page"

show
#

弹幕室

简介:可多人共享弹幕信息,同时具有弹幕清除功能。

应用逻辑:利用野狗云提供的BaaS(后端即服务),后端维护所有的弹幕信息,当页面有新的弹幕信息要提交时,将弹幕信息提交到后端,同时监听后台数据变化,将变化的数据随机位置随机颜色插入屏幕(保证了弹幕信息共享)。当页面清屏时,只是将当前页面的弹幕信息清除,后端数据不做改变。所有与后端的交互均通过野狗云提供的api实现。

show
#

TodoList

简介:一款简单的任务管理软件,可以用它方便地组织和安排计划。

应用逻辑:采用vue.js。html结构大体分为三个部分:input输入框,用于用户添加todo;列表展示框,采用v-for指令循环;最下面的展示选择框:用于用户选择对todo的展示选项。其中采用vue实例中的data来维护todos列表(增删查改),对每一项任务都维护了其是否done的状态。即:把所有任务的名称状态都交给了todos对象数组。input输入框监听事件keyup.enter(增),叉叉a链接监听事件click(删),最下面的展示选择框内展示todo left是通过computed属性返回todos数组的长度,通过v-if绑定这个计算属性(查),列表展示框中的input复选框监听click事件修改todos数组中任务的isdone属性(改)。最下面的展示选择框内可选择对任务的过滤展示,展示是通过v-for。通过v-for的showtodo()函数来过滤其展示的列表。根据all active completed 三种不同情况来展示,可是showtodo()怎么知道不同的情况呢?通过vue实例的data来维护一个共用的数据X,来表示情况。showtodo()可访问,all active completed 三种不同情况的监听事件函数也可以访问。

show
#

Vue实现表单搜索排序

简介:利用vue.js实现表单的搜索过滤显示与排序显示

应用逻辑:html结构:表单通过v-for循环显示,显示的内容以数组或者对象数组的方式存储在vue实例的data和computed属性里。 js逻辑:data属性里面存放gridData(表单中的所有数据),computed属性里面存放filteredData(表单过滤后需要展示到页面的数据),在data属性里面用几个字段来标识排序的key,升序or降序,和input框中的搜索字段,在filteredData中通过data里面的字段来进行搜索与排序。搜索(indexOf查询),排序(对象数组的sort)。 注意:双向绑定有效的是对象,不是纯数组

show
#

Twitch 直播API

简介:调用Twitch API,技术采用了jQuery和vue.js。功能:展示Twitch直播平台的在线和离线的直播频道。并可通过搜索框过滤频道。

应用逻辑:调用Twitch API(首先得认证获得应用的client_ID),将Twitch直播平台的在线和离线的直播频道展示出来。功能类似于Vue实现表单搜索。展示页面的频道列表是computed中的属性。

show
#

我的第一款个人首页

简介:多图预警

应用逻辑:个人练习

show
#

我的第一个web页面

简介:包括python创始人Guido van Rossum的个人简介

应用逻辑:个人练习

show