 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
src
│  Converter.kt                     #转换工具类
│  WeatherStationApplication.kt     #自定义的Application
│
├─model
│      Common.kt                    #天气数据具体的Json实体类
│      Current.kt                   #天气数据接口接收实体类
│
├─net
│      OpenWeatherMap.kt            #Retrofit的Api Service定义接口
│
└─ui
        CurrentWeatherFragment.kt   #天气显示Fragment
        MainActivity.kt             #主界面
        NoPermissionFragment.kt     #无权限fragment
        PreferencesFragment.kt      #设置fragment

从整个结构和上一篇的分析中会发现大部分逻辑都集中在CurrentWeatherFragment,包括获取位置信息、初始化网络请求框架、请求数据、绑定显示数据。获取位置信息的方式有很多种，部分手机并不支持系统获取定位，这个时候我们需要更换定位系统，则会发现我们的定位是和逻辑混合在一起，不容易拆解而且更加麻烦的是不容易进行单元测试。接下来我们将定位功能先拆分出来。

Android结构设计系列[1]--初识工程

2019-04-01 · 大约 700 个字 · 预计 4 分钟读完

Android · 案例

Android · 天气APP · 案例

声明:

本文是对Mark Allison系列博客的翻译和学习笔记，感谢作者提供的demo和这么好的博客。

前言

从标题上想必大家已经猜出来了，从本篇开始将是一个系列的Android工程结构设计博文，我们将从一个简单的获取天气并展示的APP开始，一步步的重构并研究如何更好的设计整个工程的结构。本系列中一部分知识点在以前的博文中可以找到相关知识，另一部则是新的框架和特性，如果遇到会详细说明。

说明：在本系列中我会认为大家能熟练使用Kotlin开发Android项目，并且会使用Retrofit、RxJava等主流框架，这些技术会从一开始就会出现在源码中。

显示天气

本案例中的天气数据来自 OpenWeatherApp API,在该页面注册后会发送一份邮件包含一个API Key。

Web前端基础（14）JS实践案例--旋转木马效果

2018-10-14 · 大约 1100 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · 旋转木马 · 案例 · Demo

Demo演示效果

html布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="wrap" id="wrap">
   <p class="headp"><a href="http://dp2px.com"><span id="headlink">旋转木马轮播效果</span></a></p>
   <div class="slide" id="slide">
       <ul>
           <li><a href="#"><img src="images/slidepic1.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic2.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic3.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic4.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
           <li><a href="#"><img src="images/slidepic5.jpg" title="dp2px.com-旋转木马轮播图"/></a></li>
       </ul>
       <div class="arrow" id="arrow">
           <a href="javascript:;" class="prev"></a>
           <a href="javascript:;" class="next"></a>
       </div>
   </div>
</div>

Web前端基础（13）JS实践案例--自动轮播图片

2018-10-14 · 大约 1000 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · 图片轮播 · JavaScript · 案例

Demo演示

布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="all" id="all">
    <div class="screen">
        <ul id="ul">
            <li><img src="images/banner1.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner2.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner3.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner4.png" alt="" width="800" height="500"></li>
        </ul>
    </div>
</div>

Web前端基础（12）JS实践案例--留言板

2018-10-13 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · Demo · 案例 · JavaScript · 留言板

演示和源码

我的留言界面有一个留言板，留言板上面的纸条是可以随着鼠标拖动的，下面我们来实现一下可拖动的留言框。

演示效果：

html布局

1
2
3
4
5
6
7
8
9
<div class="nav">
    <a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息   (可以拖拽)
            <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
</div>

Web前端基础（10）JS实践案例--鼠标跟随

2018-10-13 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · 基础

Web前端 · 基础 · Demo · 案例 · JS

演示和源码

html布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="nav" id="nav">
    <span class="cloud" id="cloud"></span>
    <ul>
        <li>首页新闻</li>
        <li>师资力量</li>
        <li>活动策划</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
</div>

css布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
    background-color: #000;
}
.nav {
    width: 800px;
    height: 42px;
    background:url("images/rss.png") no-repeat right center #fff;
    margin: 100px auto;
    border-radius: 5px;
    position: relative;
}
.nav ul {
    position: absolute;
    top: 0;
    left: 0;
}
.nav li {
    float: left;
    width: 83px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #000;
    cursor: pointer;
}
.cloud {
    width: 83px;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    background: #ff0000;
    border-radius: 5px;
}

Web前端基础（8）JavaScript实践案例

2018-10-03 · 大约 1100 个字 · 预计 5 分钟读完

Web前端 · 基础

Web前端 · 基础 · 实践 · 案例 · Demo · JavaScript

返回浏览器顶部箭头

window.onscroll函数

为当前页面的页面滚动事件添加事件处理函数.

1
2
3
window.onscroll = function (e) {
  // 当页面的滚动条滚动时,会执行这里的代码
}

浏览器对象模型BOM

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
window.close();  //关闭窗口  
window.alert("message");  //弹出一个具有OK按钮的系统消息框，显示指定的文本 
window.confirm("Are you sure?");  //弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值  
window.prompt("What's your name?", "Default");  //提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回  
window.status  //可以使状态栏的文本暂时改变  
window.defaultStatus  //默认的状态栏信息，可在用户离开当前页面前一直改变文本  
window.setTimeout("alert('xxx')", 1000);  //设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数  
window.clearTimeout("ID");  //取消还未执行的暂停，将暂停ID传递给它  
window.setInterval(function, 1000);  //无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样  
window.clearInterval("ID");  //取消时间间隔，将间隔ID传递给它  
window.history.go(-1);  //访问浏览器窗口的历史，负数为后退，正数为前进 
window.history.back();  //同上  
window.history.forward();  //同上  
window.history.length  //可以查看历史中的页面数   