JSFiddle - React, Tailwind, and code Playground

by 891006

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <link rel="stylesheet" href="common.css" />
    <style type="text/css">
 .box{width:50px;height:50px;position:relative;background:#000;}
    </style>
    
</head>
<body>
<div class="box"></div>
    <br/>
<div class="box"></div>
    <script type="text/javascript">
        window.onload = function(){
            var box0 = getByClassName('box')[0],box1 = getByClassName('box')[1];
            function line(elem){
                var left = 0;
                var lineId = setInterval(function(){
                     setStyleById(elem,{'left':left+'px'});
                     left+=4;
                     console.log(elem);
                     if(left > 200) clearInterval(lineId);
                },40)
            }
            function easeInQuad(elem){
                var left = 0, curTime = 0;
                var quadId = setInterval(function(){
                     setStyleById(elem,{'left':left+'px'});
                     left = Easing.easeInQuad(curTime,0,100,1000);
                     curTime += 40;
                     if(left > 200) clearInterval(quadId);
                },40)
            }
            
            addEvent(box0,'mouseover',function(){
                line(box0);
            });
            addEvent(box1,'mouseover',function(){
                easeInQuad(box1);
            })
        }
        
    </script>
</body>
</html>

CSS

/* CSS Document */
/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,table{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-size:normal;}
ol,ul{list-style:}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:"";}
abbr,acroonym{border:0;}
address{font-style:normal;}

/* basic common CSS */
/* font */
.f_12{font-size:12px;}
.f_14{font-size:14px;}
.f_16{font-size:16px;}
.fw_n{font-weight:normal;}
.ti_2{text-indent:2em;}
/* position */
.p_r{position:relative;}
.p_a{position:absolute;}
.f_l{float:left;}
.f_r{float:right;}
.ta_c{text-align:center;}
.c_b{clear:both;}
.c_l{clear:left;}
.c_r{clear:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}*html .clearfix{height:1%;display:inline-block;}/* hack */
.zoom{zoom:1;}
.hidden{visibility:hidden;}
.none{display:none;}
.block{display:block;}
.inline{display:inline;}
.baseline{vertical-align:baseline;}
/* 长宽 */
.w_100{width:100%;}

JavaScript

/*
 * DOM Manipulation Functions
 *
 */

/*
 *$():
 *获取一个或者一组DOM节点，可传入参数为id或者DOM节点，支持多个参数的传递。
 */
function $(){
    var elems = [];
    for(var i = 0; i < arguments.length; i++){
        var elem = arguments[i];
        if(typeof elem == "string"){
            elem = document.getElementsById(elem);
        }
        
        if(arguments.length == 1){
            return elem;
        }else{
            elems.push(elem);
        }
    }
    return elems;
}

function camlize(prop){
    return prop.replace(/\-(\w)/g,function(strMatch,p1){
        return p1.toUpperCase();
    });
}
function uncamlize(prop,sep){
    return prop.replace(/[A-Z]/g,function(strMatch){
        return ((sep?sep:"-") + strMatch.toLowerCase());
    })
}

/*
 * arguments:
 * 
 *
 */

function getStyle(elem,props,pseudoEl){
    var styles = {};
    if(elem.currentStyle){
        for(var i = 0; i < props.length; i++){
            if(!(styles[props[i]] = elem.currentStyle[props[i]])) continue;
        }
    }
    if(window.getComputedStyle){
        for(var i = 0; i < props.length; i++){
            if(!(styles[props[i]] = window.getComputedStyle(elem,pseudoEl).getPropertyValue(props[i]))) continue;
        }
        
    }
    return styles;
}

function setStyleById(elem,styles){
    if(!(elem = $(elem))) return false;
    for(var prop in styles){
        if(!styles.hasOwnProperty(prop)) continue;
        if(elem.style.setProperty){
            elem.style.setProperty(camlize(prop),styles[prop],'important');
            //console.log(camlize(prop));
        }else{
            elem.style[camelize(prop)] = styles[prop];
        }
    }
}


function setStyleByClassName(className,styles){
    if(!(elems = getByClassName(className))) return false;
    for(var i = 0; i < elems.length; i++){
        setStyleById(elems[i],styles);
    }
}

function getChildren(elem){
    var elems = [];
    for(var i = 0,children = elem.childNodes, len = children.length; i < len; i ++){
        if (children[i].nodeType...