js画矩形

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main" style="position:relative"></div>
<script>
    function  Rect(options) {
        this._init(options);
    }
    Rect.prototype={
        //属性
        _init:function (options) {
            //父标签
            this.parentId=options.parentId;
            //位置
            this.left=options.left||100;
            this.top=options.top||100;
            //自身的属性
            this.width=options.width||100;
            this.height=options.height||50;
            this.bgColor=options.bgColor||'#000';
            this.borderRadius=options.borderRadius||0;
            this.border=options.border||'none';
        },
        //行为
        render:function () {
            //1.获取父标签
            var parentEle=document.getElementById(this.parentId);
            //2.创建矩形标签
            var reactEle=document.createElement('div');
            parentEle.appendChild(reactEle);

            reactEle.style.position='absolute';
            reactEle.style.left=this.left+'px';
            reactEle.style.top=this.top+'px';

            reactEle.style.width=this.width+'px';
            reactEle.style.height=this.height+'px';

            reactEle.style.backgroundColor=this.bgColor;
            reactEle.style.border=this.border;
            reactEle.style.borderRadius=this.borderRadius+'px';
        }
    }

    //创建矩形对象
    var rect=new Rect({
        parentId:'main',
        left:200,
        top:200,
        500,
        height:300,
        bgColor:'pink',
        borderRadius:20,
        border:'10px solid #000'
    });

   rect.render();
</script>
</body>
</html>

　　面向对象js计算功能

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/html"></script>
<script>
    var Caculator={
        result:0,
        jia:function (num) {
            this.result+=num;
            return this;
        },
        jian:function (num) {
            this.result-=num;
            return this;
        },
        cheng:function(num){
           this.result*=num;
            return this;
        },
        chu:function (num) {
            this.result/=num;
            return this;
        },
        log:function () {
            console.log(this.result);
            return this;
        },
        clean:function () {
            this.result=0;
            return this;
        }
    };
    Caculator.jia(6);
    Caculator.jia(6);
    Caculator.cheng(2);
    Caculator.chu(3);
    Caculator.jian(4);
    console.jia(6).jia(6).cheng(2).chu(3).jian(4).log();

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

　　面向对象方法分装tab选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="tab">
    <!--头部-->
    <div id="tab_header">
        <ul>
            <li class="selected">公告</li>
            <li>规则</li>
            <li>论坛</li>
            <li>安全</li>
            <li>公益</li>
        </ul>
    </div>
    <!--主要内容-->
    <div id="tab_content">
        <div class="dom" style="display: block">
            <ul>
                <li><a href="#">数据七夕:金牛爱送玫瑰</a></li>
                <li><a href="#"> 阿里打造"互联网监管"</a></li>
                <li><a href="#">10万家店60万新品</a></li>
                <li><a href="#">全球最大网上时装周</a></li>
            </ul>
        </div>
        <div class="dom" >
            <ul>
                <li>
                    <a href="#">“全额返现”要管控啦</a>
                </li>
                <li>
                    <a href="#">淘宝新规发布汇总(7月)</a>
                </li>
                <li>
                    <a href="#">炒信规则调整意见反馈</a>
                </li>
                <li>
                    <a href="#">质量相关规则近期变更</a>
                </li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">阿里建商家全链路服务</a>
                </li>
                <li>
                    <a href="#">个性化的消费时代来临</a>
                </li>
                <li>
                    <a href="#">跨境贸易是中小企业机</a>
                </li>
                <li>
                    <a href="#">美妆行业虚假信息管控</a>
                </li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">接次文件，毁了一家店</a>
                </li>
                <li>
                    <a href="#">账号安全神器阿里钱盾</a>
                </li>
                <li>
                    <a href="#">新版阿里110上线了</a>
                </li>
                <li>
                    <a href="#">卖家学违禁避免被处罚</a>
                </li>
            </ul>
        </div>
        <div class="dom">
            <ul>
                <li>
                    <a href="#">为了公益high起来</a>
                </li>
                <li>
                    <a href="#">魔豆妈妈在线申请</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="s/Tab.js"></script>
<script src="s/index.js"></script>
</body>
</html>

　　

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #000;
}

#tab{
     500px;
    height: 120px;
    border: 1px solid #ccc;
    margin: 100px auto;
}

/*选项卡--头部*/
#tab_header{
    height: 29px;
    line-height: 28px;
    /*background-color: red;*/
    overflow: hidden;
}

#tab_header ul{
     500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#tab_header ul li{
    flex: 1;
    text-align: center;
    background-color: #e8e8e8;
    border-bottom: 1px solid #cccccc;
}

#tab_header ul li.selected{
    background-color: #ffffff;
    border-bottom: none;

    /*左右线条*/
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

#tab_header ul li:nth-child(1){
    border-left: none;
}

#tab_header ul li:nth-last-child{
    border-right: none;
}

#tab_header ul li:hover{
    cursor: pointer;
    font-weight: bolder;
    color: orangered;
}
/*选项卡--头部*/

/*选项卡--主要内容*/
#tab_content{

}

#tab_content .dom{
   padding-top: 20px;
   display: none;
}

#tab_content .dom ul li{
    float: left;
     220px;
    /*background-color: red;*/
    text-align: center;
    margin: 5px;
}
/*选项卡--主要内容*/

　　

var tab = new TabsFn();
tab.init();

function $(id) {
    return typeof id === 'string' ? document.getElementById(id) : null;
}

　　

function TabsFn() {
    // 属性
    this.lis = $('tab_header').getElementsByTagName('li');
    this.contents = $('tab_content').getElementsByClassName('dom');
}

TabsFn.prototype = {
    init: function(){
        // 1. 设置索引
        this.setId();
        // 2. 绑定事件
        this.bindEvent();
    },
    // 设置索引(id)
    setId: function () {
        for(var i=0; i<this.lis.length; i++){
            this.lis[i].id = i;
        }
    },
    // 绑定事件
    bindEvent: function () {
        // 备份指针
        var self = this;

        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].onmouseover = function () {
                // 2.1 所有的都不被选中
                for(var j=0; j<self.lis.length; j++){
                    self.lis[j].className = '';
                    self.contents[j].style.display = 'none';
                }
                // 2.2 当前的li被选中
                this.className = 'selected';
                self.contents[this.id].style.display = 'block';
            }
        }
    }
};

　　绚丽五彩小球：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
            list-style: none;
        }
        html,body,div{
             100%;
            height:100%;
        }
        #box{
            background-color: #000;
            position:  relative;
        }
    </style>
</head>
<body>
<div id="box">

</div>
<script src="五彩特效/js/Underscore-min.js"></script>
<script src="五彩特效/js/Ball.js"></script>
<script type="text/html">
    //1.获取父标签
    var box=document.getElementById('box');
    var ball=new Ball({
        parentId:'box',
        left:100,
        top:200,
        bgColor:'green'
    });

    ball.render();
</script>

<script>
    //1.获取需要的标签
    var box=document.getElementById('box');
    //2.监听鼠标在盒子上的移动
    var colorArr=['red','green','blue','yellow','orange','purple','pink'];
    var ballArr=[];
    box.onmousemove=function (ev) {
        //2.1创建小球
        var ball=new Ball({
            parentId:'box',
            left:ev.clientX,
            top:ev.clientY,
            bgColor:colorArr[_.random(0,colorArr.length-1)]
        });


        //2.2创建的小球放入数组中
        ballArr.push(ball);
    };

    //3.设置定时器
    setInterval(function(){
       //1.清除上一帧产生的小球
        for(var i=0;i<box.children.length;i++){
            box.children[i].remove();
        }
        //2.让小球移动变小
        for(var j=0;j<ballArr.length;j++){
            ballArr[j].render();
            ballArr[j].update();
        }
    },50);
</script>


</body>
</html>

　　

function Ball(options){
   this._init(options);
}
Ball.prototype={
   _init:function (options) {
       //1.必要属性
       this.parentId=options.parentId;
       this.left=options.left;
       this.top=options.top;
       this.r=60;
       this.bgColor=options.bgColor||'red';

       //2.小球变化的量
       this.dX=_.random(-5,5);
       this.dY=_.random(-5,5);
       this.dR=_.random(1,3);//半径
   },
   //行为
    render:function () {
        var parentNode=document.getElementById(this.parentId);
        var childNode=document.createElement('div');
        parentNode.appendChild(childNode);

        childNode.style.position='absolute';
        childNode.style.left=this.left+'px';
        childNode.style.top=this.top+'px';
        childNode.style.width=this.r+'px';
        childNode.style.height=this.r+'px';
        childNode.style.borderRadius='50%';
        childNode.style.backgroundColor=this.bgColor;
    },

    update:function () {
        this.left+=this.dX;
        this.top+=this.dY;
        this.r-=this.dR;
        //判断
        if(this.r<=0){
            this.r=0;
            //把小球移除
            ballArr=_.without(ballArr,this);
        }
    }
};

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sunliyuan/p/12601074.html