黑人筆記

JavaScript实现Material Design计算器

Posted on 2017-01-24

造轮子是快速提高的方法之一。

准备工作

以为在花瓣上随便找了一张设计图就可以开工了，结果踩了大坑：（
这是我找的图，有没有发现什么不对劲？

没错，乘法x哪去了？我可是做完了才发现的。这种设计师应该被做成爆炒鱿鱼，为了更完美，无奈只好加了几个功能上去。

核心代码

计算器重在考虑多种错误输入的处理，由于我也是初学者，这里用switch来判断运算

function operator(type)
{
switch(type)
{
case "clear":
  input.value="0";
  _string.length=0;
break;
case "plus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="plus"
input.value="+";
input.name="type";
}
break;
case "minus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="minus"
input.value="-";
input.name="type";
}
break;

最终效果

完整源码
 在线demo，仅限pc端

2016年终总结

Posted on 2016-12-31

赶在2017年新年钟声敲响之前，从头到尾回顾一下2016。

前言

这两天恰逢软件系答辩，扫了一眼我大数本的毕设题目，好家伙八成是Web项目，怎奈我手痒+技穷，只能尝试用PHP来写个天气Demo了，说实话这两年国内好用的天气API接口越来越少了，心知天气算是比较坚挺的一个，申请完接口后发现稳定性还不如用公共开放接口，当然获取的信息也会少很多，没关系，我们懂原理就好。：)

开发准备

心知天气官网

值得一提的是，官网为我们准备了两套天气图标，虽然风格较老，但是做做demo没问题的。

核心代码

从心知API返回天气JSON数据

function weather(){
@$location=$_POST['location'];
$url="http://www.thinkpage.cn/weather/api.svc/getWeather?city=$location&language=zh-CHS&provider=CMA&unit=C&aqi=city";
$vhtml=curl_get_contents($url);//这是主函数~通过API接口返回JSON数据
$final=json_decode($vhtml,true);//对Json进行解码，便于提取数据
$GLOBALS['wind_scale']=$final["results"][0]["now"]["wind_scale"];//风力
$GLOBALS['location_name']=$final["results"][0]["location"]["name"];
$GLOBALS['now_code']=$final["results"][0] ["daily"][0]["text_day"];//当前天气
$GLOBALS['now_temp']=$final["results"][0]["now"]["temperature"];//当前温度
$GLOBALS['weather_code_today']=$final['results'][0]['now']['code'];//当前图标
...后面类似省略}

发起CURL连接

function curl_get_contents($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);//设置访问的url地址
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1');   //用户访问代理 User-Agent
curl_setopt($ch, CURLOPT_REFERER,"http://www.thinkpage.cn");//设置 referer
curl_setopt($ch, CURLOPT_TIMEOUT, 2);//设置超时
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);//返回结果
curl_setopt($ch, CURLOPT_COOKIE, "");
$result = curl_exec($ch);
curl_close($ch);
return $result;}

效果

在线demo

前端代码不贴了，因为太简单了，想看的等我传到github。
这次总共不到300行代码就能实现比较令人开心的效果，以后可以举一反三咯~

收获

通过写这个demo我掌握了：

PHP对JSON数据的处理
心知API部分功能的使用
编写移动端网页的经验有所提高

遗憾

前端方面依然离不开框架的帮助，框架虽好，可还是贪杯了:(

CSS3实现旋转音乐按钮

Posted on 2016-12-10

在手机H5活动页上音乐静音按钮是个非常常见的需求，今天我们来实现一下。：）

Bootstrap Modal 垂直居中

Posted on 2016-11-30

个人不偏好修改源码的方式，用js可以更简单地达到目的。

2016广州国际车展---汽车篇

Posted on 2016-11-20 Edited on 2018-11-18

今年的广州车展亮点不多，随便拍了一些~终于坐到了new S-class的后座，差点睡着：)

windows环境Ruby、Sass、Compass环境配置

Posted on 2016-11-16

今天介绍下Win下如何配置Ruby、Sass、Compass：

安装Ruby

在Ruby官网下载安装RubyInstaller。

安装时记得勾选“add to PATH”选项

最好把git也装上，其命令行工具更好用。

更换成境内的源

gem sources --remove https://rubygem.org/

gem sources -a https://gems.ruby-china.org/

如果遇到SSL证书问题，可将https协议换为http协议

使用以下命令检查源是否正确：

gem sources -l

安装Sass

gem install Sass

检查Sass版本

sass -v

安装Compass

gem install Compass

检查Compass版本

compass -v

Compass创建项目

compass create your-project-name

Compass设置监听

open your project PATH

compass watch

『極速快感19』豪華版体验报告

Posted on 2016-07-21 Edited on 2016-09-28

在牢里的时候天天盼着出狱，几个cellmates电脑配置稀烂得感人只能在期末玩几把cs1.6(他们是怎么活这么久的？)，到家之后恰逢游戏荒，正好有时间细品一下『极速快感19』。

使用CollapsingToolbarLayout时底部出现空白toolbar的解决方法

Posted on 2016-05-05

最近在练习CoordinatorLayout的时候碰见一个奇怪的问题：当在CollapsingToolbarLayout中加入toolbar之后，会在布局底部也生成一条一样大小的空白区域，把页面内容遮挡住，如图所示；

布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?colorPrimary"
            app:expandedTitleMarginEnd="8dp"
            app:expandedTitleMarginStart="4dp"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/scape1"
                app:layout_collapseMode="parallax" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <com.ogaclejapan.smarttablayout.SmartTabLayout
                android:id="@+id/viewpagertab"
                android:layout_width="match_parent"
                android:layout_height="48dp"
             />
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/viewpagertab" />
        </RelativeLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

最初还以为toolbar在作祟，因为把toolbar的layout_height属性设到极小时发现下部的空白也随之变小，后来在调整各个属性后无果的情况下开始怀疑是整体布局的问题，最后在stackoverflow上找到了解决方法：
该页面的根布局需由LinearLayout改为RelativeLayout，再加入android:fitsSystemWindows=”true”属性就没问题了~因为解决这个bug花了两天时间，所以特地分享一下：）

修改后代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

黑人筆記

JavaScript实现Material Design计算器

准备工作

核心代码

最终效果

2016年终总结

PHP+心知天气API实现手机端天气查询demo

前言

开发准备

核心代码

从心知API返回天气JSON数据

发起CURL连接

效果

收获

遗憾

CSS3实现旋转音乐按钮

Bootstrap Modal 垂直居中

2016广州国际车展---汽车篇

windows环境Ruby、Sass、Compass环境配置

安装Ruby

更换成境内的源

安装Sass

检查Sass版本

安装Compass

检查Compass版本

Compass创建项目

Compass设置监听

Bootstrap自带类让图片水平居中

『極速快感19』豪華版体验报告

使用CollapsingToolbarLayout时底部出现空白toolbar的解决方法