<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 讯享网
- 天气
- 获取当前ip
- 根据ip获取所在城市
天气预报一般是用户访问时自动显示用户当前城市的天气，此处我没找到直接获得用户当前城市的api，解决方法是使用百度地图根据ip获取城市的api，要获取ip地址，所以用到搜狐获取当前用户ip地址的api，有点绕圈了。。。不过没关系，一步一步来。
1、引入jQuery，以及获取当前IP的api
只需要页面引入script以及js中使用方法调用即可
讯享网
index.js中获取ip
2、根据ip获取城市
这里需要用到百度api，需要注册百度开放平台的账号，会有文档指导选择对应的api，创建网站应用获得ak号
ajax进行发起请求，jsonp解决跨域问题
讯享网
传入城市获取天气
这里比较繁琐的主要是数据绑定到页面显示，大伙们可以看返回值进行数据的筛选或加工，更好的符合你的需求。还有判断显示图标。。我这里用的是阿里图标库的图标进行显示，需要花点时间，耐心点就好啦。
进入网站显示当前天气
输入框获得焦点
输入北京敲击回车或失去焦点，自动更新
输入错误信息，这个弹框界面可以美化美化~~
做到这里是不是感觉前端做的事情还是挺有趣的呢，不光是看到的美观，内部逻辑的实现也是十分重要，完成之后相信你会获得成就感~继续加油吧！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/174447.html