分享几个关于时间的操作

分享几个与时间有关的操作

  1. 获取当前时间的毫秒数:
    new Date().getTime();
    +new Date();
  2. 确定是不是在某个时间段:
function isInTime(now) {
    const hours = new Date(now).getHours();
    if(hours >= 9 && hours <= 15) {
        return true;
    }else {
        return false;
    }
}

因为公司是做人工智能投顾的,与股票相关,所以这里时间段直接写的9–15。如果想改变的话可以改成将时间段也传入,并做相应修改。

function isInTime(now, before = 9, after = 15) {
    const hours = new Date(now).getHours();
    if(hours >= before && hours <= after) {
        return true;
    }else {
        return false;
    }
}

3.日期之间的运算,并格式化:

function dateFormat(m, d, numDate, symbol = ":") {
    var date = null;
    if(!numDate) { //如果没有传入numDate
        date = +new Date(); //获取当前时间的毫秒数
        date = date + d * 24 * 60 * 60 * 1000; //将date赋值为当前时间毫秒数+传入天数(d)点击毫秒数
        date = new Date(date); //再将其转换为标准时间。

        var yy = date.getFullYear();
        var mm = date.getMonth();
        var dd = date.getDate();
        if(mm === 0 && m === -1) {
            mm = 11;
            yy = yy - 1;
        }else {
            mm = mm + m;
        }
    }else { //如果传入了numDate(毫秒数),将其转变为制定格式的时间
        date = new Date(numDate);
        var yy = date.getFullYear();
        var mm = date.getMonth();
        var dd = date.getDate();
    }
    return yy + symbol + (mm + 1) + symbol + dd;
}

nodejs安装及常用快捷键

安装nvm,nodejs版本管理工具

参考:https://github.com/creationix/nvm
参考:http://www.imooc.com/article/14617
参考:centOs中安装nodejs
1. 通过curl安装nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
2. 设置环境变量
export NVM_DIR="$HOME/.nvm"
3. load nvm
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

4. nvm命令行操作
1. 查看已经安装的nodejs版本
nvm list / nvm ls
2. 查看nvm版本
nvm --version
3. 切换版本,仅限下载过的node版本
nvm use <version>例:nvm use v4.7.0
4. 设定默认node版本
nvm alias default <version>例:nvm alias default v4.7.0

##

通过nvm安装nodejs

  1. 安装6.x版本
    nvm install 6
  2. 安装4.x版本
    nvm install 4
  3. 查看node所有版本
    nvm ls-remote
  4. 安装位置
    ~/.nvm/versions/node
    /Users/zhangshuang/.nvm/versions/node
    ##

npm淘宝镜像 cnpm

  1. 安装:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 使用:
    cnpm install -g <packageName>例:cnpm install -g nodemon

  3. 设置:npm配置信息
    npm config list

  4. 设置:npm registry 设置镜像路径
    npm config set registry "https://registry.npmjs.org/"

设置别名

alias设置别名
1. 原因:简化命令行提交代码的复杂度
2. 方法:vim ~/.bashrc进入该文件
3. 新增:alias <name>='<yourcode>'例:alias myweb='ssh -p 3000 root@192.169.21.141'
4. 生效:source ~/.bashrc
5. 使用:myweb + Enter
6. 如果未生效,创建~/.bash_profile,该文件是用户登录终端时自动执行的文件,一般此文件中会调用.bashrc,在其中写入source ~/.bashrc
##

pm2 与 nodemon

nodemon,开发环境使用,检测script文件变化,自动重启服务器
  1. 安装:
    npm install -g nodemon
  2. 运行:
    nodemon <appName>例:nodemon app.js
  3. 更改默认端口
    nodemon <appName> localhost 8080
pm2,生产环境使用,服务器崩溃自动重启
  1. 安装:
    npm install -g pm2
  2. 运行
    pm2 start <appName>例:pm2 start server.js
    使用多核心pm2 start <appName> -i max
  3. 查看已启动的应用列表
    pm2 list
  4. 查看应用详情
    pm2 show <appName>例:pm2 show server.js
  5. 退出pm2
    pm2 kill
  6. 查看控制台输出
    pm2 logs <appName?>输入app名可查看单个输出
  7. 关闭某个进程
    pm2 stop <id>例:pm2 stop 0
  8. 重启应用
    pm2 restart <appName>例:pm2 restart server.js
  9. 重载应用
    pm2 reload <appName>例:pm2 reload server.js
  10. 停止应用
    pm2 stop <appName>例:pm2 stop server.js
  11. 将应用从pm2中删除
    pm2 delete <appName>例:pm2 delete server.js
  12. 命名应用
    pm2 start server.js --name game
  13. 复合运用,命名、最多核心运行
    pm2 start server.js --name game -i max
    pm2 start server.js --name localGameServer -i max --watch
  14. 监控
    pm2 monit

参考:PM2实用入门指南
参考:生产环境部署pm2

##

express web开发框架

  1. 安装express:
    sudo npm install -g express
  2. 安装express命令行工具:
    sudo npm install -g express-generator
  3. 启动:
    npm start
    ##

node

  1. 运行进程 node
  2. 退出进程 process.exit()
  3. 查看进程pid global.process.pid
  4. 设置作者 npm config get init-author-name

highcharts绘制环形配比图

highcharts绘制k线的常用配置

之前看的都是中文文档,绘制环形配比图这个需求采用highcharts,想挑战一下自己,看一下英文的文档,结果苦逼的挨个敲出来试看是什么东西…

中文的api也有很多,现在将自己的代码贴出来,省的以后哪天想用的时候还要再过一遍,里面基本都写了注释,普通的需求基本都满足了。之后再分享一篇关于k线的配置。

效果图

$("#container").highcharts({
    chart: { //图表整体设置
        type: "pie" //图表样式为饼图
    },
    title: { //图表标题设置
        text: '<span style="color:#333333;font-size:.33rem;">' + ismDuring + '天</span><br/>',
        verticalAlign: "top",
        align: "left",
        x: 0.92 * FS,
        y: 1.34 * FS
    },
    subtitle: { //图表副标题设置
        text: '<span style="font-size:.24rem;text-align:center;color:#979797;">运作期</span>',
        verticalAlign: "top",
        align: "left",
        x: 0.92 * FS,
        y: 1.78 * FS
    },
    plotOptions: { //图表
        pie: {
            center: [0.9 * FS, 1 * FS],
            allowPointSelect: false,
            showInLegend: true, //是否显示图例
            ignoreHiddenPoint: true,
            size: 2.5 * FS, //饼图的大小
            innerSize: 2.16 * FS, //圆环的大小
            colors: [ //圆环颜色,如果数据多于颜色的个数,则颜色会重复出现
                "#df4935", "#f38f28", "#e9da59", "#73d84b", "#3adfd2", "#20acff", "#275caa", "#8d84f0"
            ],
            dataLabels: {
                enabled: false //图表区块的解释,小黑线伸出来的部分
            },
            point: {
                events: {
                    legendItemClick: function() {
                        return false; //图表的legend是否可以点击,如果可以 点击则取消
                    }
                }
            }
        },
        series: {
            allowPointSelect: true, //click的时候能否移出来
            enableMouseTracking: true //hover到饼上面不显示外宽
        }
    },
    legend: { //图例
        layout: "vertical", //图例布局: 垂直排列,
        verticalAlign: "middle",
        align: "right",
        y: 0 * FS,
        x: 0 * FS,
        labelFormatter: function() { //图例显示的内容
            return '<span style="width:1.55rem;display:inline-block;font-size:.18rem;color:#666666;font-weight:100;">' + this.name + '</span><span style="color:#666666;font-weight:100;font-size:.18rem;">' + this.percentage.toFixed(2) + '%</span>'
        },
        useHTML: true,
        itemWidth: 3.5 * FS,
        symbolWidth: 0.16 * FS,
        symbolHeight: 0.16 * FS,
        rtl: false //图表是否在右边
    },
    tooltip: { //提示框
        enabled: false,
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b><br/>'
    },
    credits: {
        enabled: false
    },
    series: [ //数据
        {
            name: "推荐策略",
            colorByPoint: true,
            data: filterJson(data)
        }
    ]
});

整理几个移动端的兼容性问题

还是前几天谈的移动端问题,这次说一下项目中遇到的几个移动端兼容性问题

一. 华为荣耀3C的原生浏览器问题:

同一行内,存在靠左与靠右的元素时,都必须加上浮动,否则,右浮元素不右浮,影响后续排版。

<div class="forcast-title">
    <span class="fl">上一交易日预报结果</span>
    <span class="fr gray">2016-03-04</span>
</div>
<div class="forcast-cnt ofh gray cb"></div>

两个行内元素span元素都要浮动才行。

二. ios safari时间显示问题。

之前设置new Date日期格式的时候,在ios中的safari中发现显示效果与其他浏览器不一致,找了多方面原因,结果是把“-”换成“/”就可以解决了。new Date("year-month-day");只识别new Date("year/month/day");

三. 关于长按识别二维码问题。

安卓设备微信中识别没问题,结果到了ios中识别不了。最终发现是将position设置为fixed,ios的微信中长按会不起作用。要想在ios的微信中实现长按识别二维码,只需确保二维码图片和包住图片的div都没有设置position:fiexd即可。

四. 移动端最小识别rem问题。

移动端相对来说兼容性不是什么问题,但是实际项目中发现,如果采用rem: .01rem;有些机型如:魅蓝note、iphone5等机型的webview中显示不出来。华为荣耀有的设置border的时候,有时0.03rem可以,有时不可以,暂时不明所以。所以还是建议,像border这种属性,移动端可以设置为1px。

五. 点击跳转到新页面会有类似点击穿透效果。

部分机型(三星note2、htc one …)在app的webview中出现了点击链接跳转到下一页面后,如果要跳转页面在当前页面的按钮位置有a链接的话,会出现,点击当前页面链接,直接也点击了下一页吗的链接。
可能描述的不是很清楚,更形象点说。A页面有个链接a,B页面也有个链接b,并且b的x、y属性含于a的x、y属性。那么会出现点击a链接,直接也点击了b链接。
解决办法,直接在另一个页面写了个maskView遮罩层,setTimeout100毫秒解决的。可能有点low,但是当时上线较急,就想到了这个办法。

六. 让hybird app中的webview页面看起来更像native。

web相较于native有一个好处就是版本更新比较方便,不会出现native应用商店审核乱七八糟的时间,直接点击app的某个按钮,使用webview打开页面,该页面随意替换都非常方便。最常用的就是活动页面,定期的活动只需要前端开发人员维护即可。但是假如用户长按屏幕的时候出现选中文本的场景,看起来不那么想native,如果有解决这个问题的需求,可使用:

Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

其中Element为任意元素,或者直接将其写入cssReset文件中。

七. 移动端300ms延迟。

300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。
推荐两个js,一个是fastclick,一个是tap.js
关于300ms延迟,具体请看

八. 移动端 HTML5 audio autoplay 失效问题

这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
解决代码:

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});
九. 根据屏幕大小加载不同js

之前话k线用到highcharts的时候,在iphone5上发现显示不是很理想,用过highchars的api设置也没有解决一次设定适应多个屏幕。于是只能用过这种方式来进行多屏幕的适配。

<script>
    var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var script = document.createElement("script");
    if(browserWidth <= 380) {
        script.src = "js/common_small.js"
    }else{
        script.src = "js/common.js"
    }
    document.head.appendChild(script);
</script>

十. 屏幕旋转的事件和样式

事件名:window.orientation,取值:正负90表示横屏模式,0和180表示竖屏模式。

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}  

有些地方发现屏幕旋转之后,样式适配不完美,所以根据上面的orientation事件,增加了监测到设备屏幕旋转自动刷新的功能:

function hengshuping(){
    window.location.reload();
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
十一. background-size问题:

华为p8,魅族自带浏览器background-size显示有问题。

十二. flex布局问题:

iphone5s、魅族魅蓝note不支持(具体是自带浏览器还是什么浏览器忘了,有需要的可以自己尝试一下)

十三. input输入框的问题

最开始在input输入框中,也会习惯性的写上lineheight(其实可以不写),当使用placeholder的时候自己测试也没有问题。但当测试用魅族mx4自带浏览器测试的时候发现,在input输入框中,输入光标不会上下居中。当时也感觉很奇怪,然而将lineheight删掉就可以了,input中的所有元素就是默认居中的。

通过Html网页调用本地安卓app程序代码

前段时间写一些移动端的项目,正好项目中遇到与native交互的需求,特此将其整理下来:

一. 通过html页面打开Android本地的app
  1. 首先在编写一个简单的html页面
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        <a href="m://my.com/">打开app</a><br/>
    </body>
</html>
  1. 在Android本地app的配置
    在AndroidManifest的清单文件里的intent-filte中加入如下元素:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                    android:host="my.com"
                    android:scheme="m" />
</intent-filter>

然后使用“手机浏览器”或者“webview”的方式打开这个本地的html网页,点击“打开APP”即可成功开启本地的指定的app

二、如何通过这个方法获取网页带过来的数据

只能打开就没什么意思了,最重要的是,我们要传递数据,那么怎么去传递数据呢?
我们可以使用上述的方法,把一些数据传给本地app,那么首先我们更改一下网页,代码修改后:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <body>
        <a href="m://my.com/?arg0=0&arg1=1">打开app</a><br/>
    </body>
</html>

(1).假如你是通过浏览器打开这个网页的,那么获取数据的方式为:

    uri = getIntent().getData();  String test1= uri.getQueryParameter("arg0");  String test2= uri.getQueryParameter("arg1");

(2)如果使用webview访问该网页,获取数据的操作为:

webView.setWebViewClient(new WebViewClient(){
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
      Uri uri=Uri.parse(url);
          if(uri.getScheme().equals("m")&&uri.getHost().equals("my.com")){
              String arg0=uri.getQueryParameter("arg0");
              String arg1=uri.getQueryParameter("arg1");

          }else{
              view.loadUrl(url);
          }
      return true;
  }
});