js画矩形

js画矩形

面向对象js计算功能

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

*{ margin: 0; padding: 0; list-style: none; box-sizing: border-box;}a{ text-decoration: none; color: #000;}#tab{ width: 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{ width: 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; width: 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

绚丽五彩小球：

function Ball(options){ this._init(options);}Ball.prototype={ _init:function (options) { //1.必要属性 this.parentId=options.parentId; this.left=options.left; this-=options-; 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-=this-+'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-+=this.dY; this.r-=this.dR; //判断 if(this.r<=0){ this.r=0; //把小球移除 ballArr=_.without(ballArr,this); } }};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。