javascript运动函数

发表于 2015-07-20 | 分类于 front-end |

以’px’为单位的运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 50px;
            background: red;
            cursor: pointer;
            margin-top: 20px;
            font-size: 14px;
            border: 0 solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div>aaaaaaaaaaaaaa</div>
    <div></div>

    <script>
        function getStyle (obj, attr){
            if (obj.currentStyle) {
                return obj.currentStyle;
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }

        function startMove (obj, attr, iTarget){
            // var oDiv = document.getElementById("div1");

            clearInterval(obj.timer);

            obj.timer = setInterval(function(){
                var iCur = parseInt(getStyle(obj, attr));

                var iSpeed = (iTarget-iCur)/8;
                iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if (iCur === iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style[attr] = iCur + iSpeed + "px";
                }
            }, 30);
        }

        window.onload = function (){
            var aDiv = document.getElementsByTagName("div");
            var i = 0;

            aDiv[0].onclick = function (){
                startMove(this, 'width', 300);
            }

            aDiv[1].onclick = function (){
                startMove(this, 'height', 200);
            }

            aDiv[2].onclick = function (){
                startMove(this, 'font-size', 100);
            }
            aDiv[3].onclick = function (){
                startMove(this, 'borderWidth', 100);
            }
            
        }
    </script>
</body>
</html>

一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡

发表于 2015-07-19 | 分类于 front-end |

回到页面顶部demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        #up {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: #c1c1c1;
        }
    </style>
</head>
<body>
    <div id="up"></div>

    <script>
        
        window.onload = function (){
            var oDiv = document.getElementById("up");
            var timer = null;
            var bySys = true;

            //如何检测用户拖动了滚动条
            window.onscroll = function (){
                if (!bySys) {
                    clearInterval(timer);
                }
                bySys = false;
            }
            oDiv.onclick = function (){
                timer = setInterval(function() {
                    var scrollTop = document.documentElement.scrollTop ||
                            document.body.scrollTop;
                    var iSpeed = Math.floor(-scrollTop/8);
                    
                    if (scrollTop === 0) {
                        clearInterval(timer);
                    }
                    bySys = true;
                    document.body.scrollTop = scrollTop + iSpeed;
                    document.documentElement.scrollTop = scrollTop + iSpeed;
                }, 30);
            }
        }
    </script>
</body>
</html>
阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 200px;
            background: #000;
            display: none;

        }
    </style>
</head>
<body>
    <input type="button" value="显示" id="btn">
    <div id="box"></div>

    <script>
        var oBtn = document.getElementById("btn");
        var oBox = document.getElementById("box");
        oBtn.onclick = function (ev){
            var oEvent = ev || event;
            oBox.style.display = 'block';
            oEvent.cancelBubble = true; // 阻止事件冒泡
        }
        document.onclick = function (){
            oBox.style.display = 'none';
        }
    </script>
</body>
</html>

ajax函数写法

发表于 2015-07-18 | 分类于 front-end |

function ajax (url, fnSucc, fnFaild){
    // 创建ajax对象
    // IE6 以上浏览器
    
    // var oAjax = new XMLHttpRequest();
    // alert(oAjax);
    
    // IE6
    // var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    // alert(oAjax);
    

    // 全局的变量都是window的属性
    // 用一个不存在的变量时候会出错
    // 用一个不存在的属性时提示undefined
    
    var oAjax = null;
    // 创建ajax对象
    if (window.XMLHttpRequest) {
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 连接服务器
    // open(方法， url， 是否异步)
    oAjax.open('GET', url, true);

    // 发送请求
    oAjax.send();

    // 接收返回信息
    // 有状态变化时
    oAjax.onreadystatechange = function (){
        // 判断是否结束
        if (oAjax.readyState === 4) {
            // 判断是否成功
            if (oAjax.status === 200) {
                // 读取响应内容
                fnSucc(oAjax.responseText);
            } else {
                // 请求失败
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    }
}

一串跟随鼠标运动的DIV

发表于 2015-07-17 | 分类于 front-end |

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 10px;
            height: 10px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var oDiv = document.getElementsByTagName("div");
        var i = 0;
        var mouseTop = 0;
        var mouseLeft = 0;
        document.onmousemove = function (ev){
            var oEvent = ev || event;
            for (i = oDiv.length-1; i > 0; i--) {
                oDiv[i].style.left = oDiv[i-1].style.left;
                oDiv[i].style.top = oDiv[i-1].style.top;
            }
            
            oDiv[0].style.left = oEvent.clientX+'px';
            oDiv[0].style.top = oEvent.clientY+'px';

            setTimeout(function (){
                for (i = oDiv.length-1; i > 0; i--) {
                    oDiv[i].style.left = oEvent.clientX+'px';
                    oDiv[i].style.top = oEvent.clientY+'px';
                }
    
            }, 300);

        }

        

    </script>
</body>
</html>

javascript一种比较通用的继承过程

发表于 2015-07-17 | 分类于 front-end |

<script>
    function Person(name, gender) {
        this.name = name;
        this.gender = gender;
    }
    Person.prototype.showName = function() {
        alert(this.name);
    }
    Person.prototype.showGender =function() {
        alert(this.gender);
    }
　　
    function Worker(name, gender, job) {
　　　　　　　// Step1
        Person.call(this, name, gender);
        this.job = job;
    }
　　　// Step2
    for (var i in Person.prototype) {
        Worker.prototype[i] = Person.prototype[i];
    }
    Worker.prototype.showJob = function() {
        alert(this.job);
    }
    var oW1 = new Worker("hello", "male", "coder");
    oW1.showJob();
</script>

一种兼容性比较好的简单拖拽

发表于 2015-07-16 | 分类于 front-end |

作为一个马上要找工作、非计算机专业、热爱前端的大四狗，最近开始疯狂写demo、看书，准备九、十月份的校招。

晚上用js实现了一个比较简单（low）的拖拽效果，初步测试兼容性还是不错的，于是写一段小博文记录下~大神求轻喷

面向过程的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        window.onload = function (){
            var disX = 0;
            var disY = 0;
            var oBox = document.getElementById("box");
            oBox.onmousedown = function (ev){
                var oEvent = ev || event;

                oBox.style.cursor = "move";
                disX = oEvent.clientX - oBox.offsetLeft;
                disY = oEvent.clientY - oBox.offsetTop;

                document.onmousemove = function (ev){
                    var oEvent = ev || event;
                    var theLeft = oEvent.clientX - disX;
                    var theTop = oEvent.clientY - disY;
                    
                    // 禁止用户从浏览器左框拖出
                    if (theLeft < 0) {
                        theLeft = 0;
                    } else if (theLeft > document.documentElement.clientWidth-
                        oBox.offsetWidth) {
                        theLeft = document.documentElement.clientWidth-
                        oBox.offsetWidth;
                    } else if (theTop < 0) {
                        theTop = 0;
                    } else if (theTop > document.documentElement.clientHeight-
                        oBox.offsetHeight) {
                        theTop = document.documentElement.clientHeight-
                        oBox.offsetHeight;
                    }
                    oBox.style.left = theLeft + 'px';
                    oBox.style.top = theTop + 'px';
                }

            }

            document.onmouseup = function (){
                document.onmousemove =null;
            }
    　　　　 // 窗口重设大小时的处理方法
            window.onresize = function (){
                oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px';
                oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px';
            }
            // 兼容firefox 3.6.19
            return false;
        }
    </script>
</body>
</html>

创建一个拖拽对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box,#box2 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>
    <script>
        window.onload = function (){
            new Drag("box");
            new Drag("box2");
        }

        function Drag(id){
            var _this = this;
            
            this.disX = 0;
            this.disY = 0;
            this.oBox = document.getElementById(id);

            
            this.oBox.onmousedown = function (ev){
                _this.fnDown(ev);
                
                // 兼容firefox 3.6.19
                return false;
            };


            document.onmouseup = function (){
                _this.fnUp();
            }
            window.onresize = function (){
                _this.fnResize();
            };
            // 兼容firefox 3.6.19
            return false;
        }

        Drag.prototype.fnDown = function(ev){

            var oEvent = ev || event;
            var _this = this;
            this.oBox.style.cursor = "move";
            this.disX = oEvent.clientX - this.oBox.offsetLeft;
            this.disY = oEvent.clientY - this.oBox.offsetTop;

            document.onmousemove = function (ev){
                _this.fnMove(ev);
            };

        }
        
        Drag.prototype.fnMove = function(ev){
            var oEvent = ev || event;
            var theLeft = oEvent.clientX - this.disX;
            var theTop = oEvent.clientY - this.disY;
            // 禁止用户从浏览器左框拖出
            if (theLeft < 0) {
                theLeft = 0;
            } else if (theLeft > document.documentElement.clientWidth-
                this.oBox.offsetWidth) {
                theLeft = document.documentElement.clientWidth-
                this.oBox.offsetWidth;
            } 
            if (theTop < 0) {
                theTop = 0;
            } else if (theTop > document.documentElement.clientHeight-
                this.oBox.offsetHeight) {
                theTop = document.documentElement.clientHeight-
                this.oBox.offsetHeight;
            }
            this.oBox.style.left = theLeft + 'px';
            this.oBox.style.top = theTop + 'px';
        }

        Drag.prototype.fnUp = function (){
            document.onmousemove =null;
        }

        

        Drag.prototype.fnResize = function(){
            this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px';
            this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px';
        }
    </script>
</body>
</html>

memcache在PHP存取中的应用

发表于 2015-07-16 | 分类于 back-end |

当用户刷新网页或有大量用户访问网站时，就会产生大量数据库查询进程，这不但拖慢了网页打开速度，同时也给服务器带来了很大压力。

作为php菜鸟，今天刚刚接触到了 memcache 这个东东，于是自己跟着文档做了一个实例，一方面鼓励自己，另一方面等大神轻喷~

<?php 
    header("Content-Type:text/html;charset=utf-8");
    //创建memcache对象
    $mem = new Memcache;

    //连接memcache服务器
    $mem->connect("localhost",11211);


    $sql = "select id,name,pass,age,sex,email from user order by id";
    $key = md5($sql); //可用SQL语句做键值

    //直接从内存中要数据
    $data = $mem->get($key);

    //如果内存中没有数据，就从数据库中取出
    if (empty($data)) {
        
        //数据库连接操作
        try{
            $pdo = new PDO("mysql:host=localhost;dbname=phpdemo", "root", "");

        }catch(PDOException $e){
            echo "数据库连接失败，原因是".$e->getMessage();
        }
        
        
        $stmt = $pdo->prepare($sql);

        $stmt->execute();

        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $mem->add($key, $data, MEMCACHE_COMPRESSED, 5); //5秒

        echo "<br>这是第一次访问，从数据库访问并存到内存中！";
    }
    echo "<pre>";
    print_r($data);
    echo "</pre>";
    
    //关闭连接
    $mem->close();

 ?>

currentStyle和getComputedStyle的兼容写法

发表于 2015-07-13 | 分类于 front-end |

今天学习javascript的时候，教程中介绍了一种简单实现jQuery 中css()方法的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="样式" id="btn">
    <div id="div"></div>
    <script>
        function css(obj, attr, value) {
            if (arguments.length === 2) {
                return obj.currentStyle[attr];
            } else if(arguments.length === 3){
               obj.style[attr] = value;
            }
        }
        window.onload = function (){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div");

            oBtn.onclick = function () {
                css(oDiv, 'background', 'green');
                console.log(oDiv.currentStyle.width);
                // console.log(getComputedStyle(oDiv, false).width);
            }
        }
    </script>
</body>
</html>

然而当我用chrome浏览器测试的时候，浏览器却抛出了一个错误

Uncaught TypeError: Cannot read property ‘width’ of undefined

于是马上联想到这必定又是浏览器大战中留下来的兼容问题，于是小白开始上网搜索，总结如下：

currentStyle：获取计算后的样式，也叫当前样式、最终样式。
优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。
非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14则弹出“undefined”。

虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

以下是兼容写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="样式" id="btn">
    <div id="div"></div>
    <script>
        function css(obj, attr, value) {
            if (arguments.length === 2) {
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }

            } else if(arguments.length === 3){
                obj.style[attr] = value;
            }
        }
        window.onload = function (){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div");

            oBtn.onclick = function () {
                css(oDiv, 'background', 'green');
                console.log(css(oDiv, 'width'));
                // console.log(getComputedStyle(oDiv, false).width);
            }
        }
    </script>
</body>
</html>

不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。

<script>
        // 哪个元素
        // 哪个样式
        function getStyle(obj, attr) {
            var style;
            if (obj.currentStyle) {
                style = obj.currentStyle[attr];
            } else{
                style = getComputedStyle(obj, false)[attr];
            }
            return style;
        }
        window.onload = function (){
            var oDiv = document.getElementById("box");
            console.log(getStyle(oDiv, 'backgroundColor'));
        }

</script>

自定义的右键菜单

发表于 2015-07-12 | 分类于 front-end |

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 100px;
            background: #ccc;
            border:1px solid #000;
            position: absolute;
            display: none;
            list-style: inside;
        }
        li {

        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li>登陆</li>
        <li>注销</li>
        <li>回到首页</li>
        <li>加入</li>
    </ul>
    <script>

        document.oncontextmenu = function (ev){
            var oEvent = ev || event;
            var oUl = document.getElementById("ul1");
            var scrollTop = document.documentElement.scrollTop || 
                    document.body.scrollTop;
            oUl.style.display = "block";

            oUl.style.left = oEvent.clientX + 'px';
            oUl.style.top = scrollTop + oEvent.clientY + 'px';
            return false;
        }

        document.onclick = function (){
            var oUl = document.getElementById("ul1");
            oUl.style.display = "none";
        }
    </script>
</body>
</html>

PHP下正则表达式整理

发表于 2015-06-16 | 分类于 back-end |

正则表达式的历史背景

内容深厚的正则表达式
^.+@.+\\..+$ 形式，字符串搜索与匹配的工具
应用范围
手机输入法、Windows文件搜索、linux 列出文件命令、网站用户注册，如邮箱、手机号码的表单验证等

正则表达式函数解析

准备工作，在此选择 php 来学习正则表达式
事先建立好一个 show() 函数

/**
 * description: php正则表达式函数
*/
/**
 * @name:show
 * @description : output debug
 * @param $var : input data 
 * @return void
 */
function show($var = null){
    if ( empty( $var ) ) {
        echo 'null';
    } elseif( is_array($var) || is_object($var) ){
        echo "<pre>";
        print_r($var);
        echo "</pre>";
    } else{
        echo $var;
    }
}

php 中常用的正则表达式函数(使用最频繁),返回匹配到的次数

preg_match($pattern, $subject, [array &$matches]) 只会匹配一次，preg_match_all($pattern, $subject, array &$matches) 匹配所有
以下是代码实例

$pattern = '/[0-9]/';
$subject = 'hdgsah7ghgsj89gsgh7faf432';

$m1 = $m2 = array();

$t1 = preg_match($pattern, $subject, $m1); //$t1 = 1
$t2 = preg_match_all($pattern, $subject, $m2); //$t2 = 7

show($m1); //输出一个一维数组
echo "<hr>";
show($m2); //输出一个二维数组

preg_replace($pattern, $replacement, $subject)和preg_filter($pattern, $replacement, $subject)
代码实例

$pattern = array('/[0123]/','/[456]/','/[789]/');
$subject = array('hdg','sah7','ghgsj','89gsg','h7fa','f432');
$replacement = array('你','好','!');

$str1 = preg_replace($pattern, $replacement, $subject);
$str2 = preg_filter($pattern, $replacement, $subject);

show( $str1 );
echo "<hr>";
show( $str2 );

preg_grep($pattern, array $input)将无法匹配的值过滤掉阉割版 preg_filter()
preg_split($pattern, $subject)
代码实例

$pattern = '/[0-9]/';
$subject = '这9是2一段3文5字';
$arr = preg_split($pattern, $subject);
show($arr);
// 输出
Array
(
[0] => 这
[1] => 是
[2] => 一段
[3] => 文
[4] => 字
)

preg_quote($str)
正则运算符转义
正则表达式总结
都以preg_开头
除preg_quote() 外，第一个参数都是正则表达式
preg_match() 表单验证
preg_replace () 非法词汇过滤等

模式修正

概述
界定符、原子、量词、边界控制、模式单元
界定符
表示正则表达式开始和结束的位置

1
2
3

$pattern = '/[0-9]/';
$pattern = '#[0-9]#';
$pattern = '{[0-9]}'; //在php中不推荐使用

regexpal 工具
用于调试正则表达式　
原子概念
正则匹配最小单位
可见原子：键盘输出后肉眼可见的字符
不可见原子：换行符、回车、空格
在匹配中文字符时，建议先转换 Unicode http://tool.chinaz.com/Tools/Unicode.aspx
原子的筛选方式
| 匹配两个或多个分支选择
[] 匹配方括号中的任意一个原子，[789] 匹配 789 ，[a-zA-Z0-9]匹配字母和数字
[^]匹配方括号中的原子之外的任意字符 [^789] 匹配非 789 　　
元字符（原子的集合）
. 匹配除换行符之外的任意字符
\d匹配任意一个十进制数字，即 [0-9]
\D匹配除数字之外的其他字符
\s匹配一个不可见原子即[\f\n\r\t\v]
\S匹配一个可见的原子 [^\f\n\r\t\v]
\w匹配任意一个数字、字母、或下划线 [0-9a-zA-Z]
\W匹配任意一个非数字、字母、或下划线 [^0-9a-zA-Z]
量词
{n} 表示其前面的原子恰好出现 n 次
{n,} 表示其前面的原子最少出现 n 次
{n,m}表示其前面的原子最少出现 n 次，最多出现 m 次
*匹配0次，1次或多次其之前的原子即 {0,}
+匹配1次或多次其之前的原子即 {1,}
? 匹配0次或1次其之前的原子
举例子
5{2} —- 55
[a-zA-Z]{2} —- ad1256135AW
[\w]{4} —- 连续出现4次字母、数字、下划线
[\w]{4,8} —- 4到8次字母、数字、下划线
\d+ —- 1到无穷大次数字出现
边界控制
^匹配字符串开始的位置
$匹配字符串结束的位置
() 匹配其中的整体为一个原子
修正模式
贪婪匹配匹配结果有歧义时取其长
懒惰匹配匹配结果有歧义时取其短标识 U
i 忽略英文大小写
x 匹配过程中忽略空白，包括空格和制表符
s 让元字符’ . ‘匹配包括换行符在内的所有字符

正则表达式实战

非空： .+
匹配一个保留两位小数的浮点数：\d+\.\d{2}$
大陆手机号： ^1(3|5|4|7|8)\d{9}
email地址： ^\w+(\.\w)*@\w+(\.\w)+$
url 地址： ^(https?://)?(\w+\.)+.[a-zA-Z]+$

正则表达式实战——正则表达式工具类

'require' => '/.+/',
'email' => '/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/',
'url' => '/^http(s?):\/\/(?:[A-za-z0-9-]+\.)+[A-za-z]{2,4}(?:[\/\?#][\/=\?%\-&~`@[\]\':+!\.#\w]*)?$/',
'currency' => '/^\d+(\.\d+)?$/',
'number' => '/^\d+$/',
'zip' => '/^\d{6}$/',
'integer' => '/^[-\+]?\d+$/',
'double' => '/^[-\+]?\d+(\.\d+)?$/',
'english' => '/^[A-Za-z]+$/',
'qq'    =>  '/^\d{5,11}$/',
'mobile'    =>  '/^1(3|4|5|7|8)\d{9}$/'