JavaScript 实现 Toast 吐司效果

JS

<script>
function Toast(msg,duration){
    duration=isNaN(duration)?3000:duration;
    var m = document.createElement('div');
    m.innerHTML = msg;
    m.style.cssText="width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;top: 40%;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
    document.body.appendChild(m);
    setTimeout(function() {
        var d = 0.5;
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
        m.style.opacity = '0';
        setTimeout(function() { document.body.removeChild(m) }, d * 1000);
    }, duration);
}
</script>

HTML

<html>
	<head>
	<style>
	body {
		font-family: 'Lucida Grande', 'Helvetica', sans-serif;
	}
	</style>
	</head>
	<body>
	<button onclick="Toast('这是一个吐司',2000);">Toast</button>
	</body>
</html>

jQuery 短信获取倒计时

<head>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

<input id="smspwd" type="button" value="短信获取" onclick='getSMS()'>

<script type="text/javascript">		
	function getSMS(){
		console.log(1)
		$("#smspwd").smsCountdown({begin: 10})
	}
</script>


<script type="text/javascript">		
	$.fn.extend({
		smsCountdown:function(){
			var params = {
				begin: arguments[0].begin || 0,
				way: arguments[0].way || 'input'
			};
			var $me = this;
			if(params.begin>0){
				$me.attr('disabled',true);
				var count = params.begin;		
				if(params.way == 'button'){
					var resend = setInterval(function(){
						count--;
						if (count > 0){
							$me.html("\u7b49\u5f85"+count+"\u79d2");
						}else {
							clearInterval(resend);
							$me.removeAttr("disabled").html("\u77ed\u4fe1\u83b7\u53d6");
						}
					}, 1000);
				}else{
					var resend = setInterval(function(){
						count--;
						if (count > 0){
							$me.val("\u7b49\u5f85"+count+"\u79d2");
						}else {
							clearInterval(resend);
							$me.removeAttr("disabled").val("\u77ed\u4fe1\u83b7\u53d6");
						}
					}, 1000);
				}
			}else{
				if(params.way == 'button'){
					$me.removeAttr("disabled").html("\u77ed\u4fe1\u83b7\u53d6");
				}else{
					$me.removeAttr("disabled").val("\u77ed\u4fe1\u83b7\u53d6");
				}
			}
		},
	})
</script>

JavaScript POST提交数据并跳转

jQuery

    $.extend({
        StandardPost:function(url,args){
            console.log(args)
            var body = $(document.body),
                form = $("<form method='post'></form>"),
                input;
            form.attr({"action":url});
            $.each(args,function(key,value){
                input = $("<input type='hidden'>");
                input.attr({"name":key});
                input.val(value);
                form.append(input);
            });

            form.appendTo(document.body);
            form.submit();
            document.body.removeChild(form[0]);
        }
    });

via: https://segmentfault.com/q/1010000000473230

判断当前浏览器是否为微信内置浏览器 MicroMessenger

通过微信内置浏览器的 User Agent

首先我们通过 PHP 内置的 $_SERVER[“HTTP_USER_AGENT”] server 数组来获取 User Agent。

iPhone 通过微信内置浏览器访问网页时得到 User Agent 是:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1

Android 通过微信内置浏览器访问网页时得到 User Agent 是:

Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255

JS 判断

function is_weixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
     } else {
        return false;
    }
}

PHP 判断

function is_weixin(){ 
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
            return true;
    }    
    return false;
}

Linux 下使用 vsftpd 搭建 ftp 服务

检查系统中是否已安装 vsftpd

rpm -qa | grep vsftpd

若未安装则使用安装命令

yum -y install vsftpd

安装完之后创建 ftp 用户和适用目录

useradd -s /sbin/nologin -d /home/ftproot ftproot

注:目录不要手动创建,该命令会自动创建

更令 ftp 用户密码

passwd ftproot

然后输入两次密码

打开 vsftpd 的配置文件

vim /etc/vsftpd/vsftpd.conf

找到 anonymous_enable 配置项,默认是YES,修改成NO,表示不允许匿名用户登录

:wq 保存文件,执行启动命令

CentOS 6 下启动

service vsftpd start

查看运行状态

service vsftpd status

CentOS 7 下启动

systemctl start vsftpd.service

查看运行状态

systemctl status vsftpd.service

完毕

微信小程序 底部弹出层 可触控移动动画效果

WXML

<view bindtap='showModal' class='click'><text>click</text></view>
<view class="commodity_screen {{showModalStatus?'active':''}}" animation="{{animationBG}}" bindtap="hideModal"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" bindtouchstart="mytouchstart" catchtouchmove="mytouchmove" bindtouchend="mytouchend" catchtap='hideModal'></view>

WXSS

.click{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*使屏幕变暗  */

.commodity_screen {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
  transition: all 2s ease;
}

.commodity_screen.active {
  display: block;
}

/*对话框 */

.commodity_attr_box {
  height: 1120rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #f8f8f8;
  /* padding-top: 20rpx; */
}

JS

Page({
  data: {
  },
  mytouchstart: function (e) {
    console.log(e.timeStamp + '- touch start')
    var startPoint = [e.touches[0].pageX, e.touches[0].pageY]
    this.setData({
      startPoint: startPoint
    })
  },
  mytouchend: function (e) {
    console.log(e.timeStamp + '- touch end')
    console.log(e)
    var endPoint = [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
    this.setData({
      endPoint: endPoint
    })

    var startPoint = this.data.startPoint
    var y = endPoint[1] - startPoint[1]
    console.log('最终移动了Y=' + y)
    if (y > 0) {
      // this.hideModal()
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: "ease",
        delay: 0
      })
      this.animation = animation
      animation.translateY(900).step()

      var animationBG = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      })
      animationBG.opacity(0).step()

      this.setData({
        animationData: animation.export(),
        animationBG: animationBG.export(),
      })

      setTimeout(function () {
        this.setData({
          showModalStatus: false
        })
      }.bind(this), 500)

      this.setData({
        noscroll: ''
      })
    } else {
      // this.showModal()
      var animation = wx.createAnimation({
        duration: 500,
        timingFunction: "ease",
        delay: 0
      })
      this.animation = animation
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }
  },
  mytouchmove: function (e) {
    console.log(e.timeStamp + '- touch move')
    var curPoint = [e.touches[0].pageX, e.touches[0].pageY]
    var startPoint = this.data.startPoint
    var y = curPoint[1] - startPoint[1]
    console.log(y)

    var animation = wx.createAnimation({
      duration: 0,
      timingFunction: 'ease',
      delay: 0
    })
    this.animation = animation
    if (y > -50) {
      animation.translateY(y).step()
      this.setData({
        animationData: animation.export()
      })
    }
  },
  //显示对话框
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    animation.translateY(900).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 0)

    var animationBG = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    animationBG.opacity(0.5).step()
    this.setData({
      animationBG: animationBG.export()
    })

    this.setData({
      noscroll: 'noscroll'
    })
  },
  //隐藏对话框
  hideModal: function () {
    console.log('hideModal')
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    animation.translateY(500).step()
    var animationBG = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
    })
    animationBG.opacity(0).step()
    this.setData({
      animationData: animation.export(),
      animationBG: animationBG.export()
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)

    this.setData({
      noscroll: ''
    })
  },
})

问题:IOS 性能可以,安卓 性能堪忧