angular4 数组操作div，渲染染色，大小，旋转角度

待我称王封你为后i 2022-05-29 03:14 108阅读 0赞

作者：LoveEmperor-王子様

HTML：

<div class= "seat3" name= "carInfoDIv" id= "\{ \{subCarport.carportId\}\}"

style= "position: relative;vertical-align: middle;"

\[ style. left. px\]= subCarport.horizontal\*currentWidth

\[ style. top. px\]= subCarport.vertical\*currentheight

\[ ngStyle\]= "\{'background-color':subCarport.reserved === 1 ? '\#33FF66' :

(subCarport.used == 1 ? 'red':(subCarport.youReserved===1 ? '\#33FF66':'white'))\}"

\[ style. width. px\]= subCarport.width\*currentWidth

\[ style. height. px\]= subCarport.height\*currentheight

>\{ \{subCarport.carportId\}\} </div>

</span>

</div>

ng：

this. currentWidth = window. screen. width;

this. currentheight = window. screen. height\- 48;

this. carportList4 = \[

"id" : 3,

"seat" : "1-3",

"horizontal" : "0.13",

"vertical" : "0.14",

"status" : 1,

"transform" : "7",

"width" : "0.03",

"height" : "0.04",

\},

"id" : 4,

"seat" : "1-3",

"horizontal" : "0.16",

"vertical" : "0.14",

"status" : 1,

"transform" : "8",

"width" : "0.03",

"height" : "0.04",

\},

"id" : 5,

"seat" : "1-3",

"horizontal" : "0.13",

"vertical" : "0.15",

"status" : 1,

"transform" : "9",

"width" : "0.05",

"height" : "0.02",

\},

this. carportList3 =\[

"carportId" : 1,

"seat" : "1-1",

"horizontal" : "",

"vertical" : "",

"status" : 0,

"transform" : "10deg",

"used" : 0,

"reserved" : 1,

"youReserved" : 0,

"empty" : 1

\},

"carportId" : 2,

"seat" : "1-2",

"horizontal" : "0.21",

"vertical" : "0.22",

"status" : 2,

"transform" : "0deg",

"used" : 0,

"reserved" : 0,

"youReserved" : 0,

"empty" : 0

\},

"carportId" : 3,

"seat" : "1-2",

"horizontal" : "0.21",

"vertical" : "0.22",

"status" : 2,

"transform" : "0deg",

"used" : 0,

"reserved" : 0,

"youReserved" : 0,

"empty" : 0

for( var i = 0; i< this. carportList4. length; i\++) //整合两个数组数据，页面上遍历

var carstr = \{

carportId: this. carportList4\[ i\]. id,

horizontal: this. carportList4\[ i\]. horizontal,

vertical: this. carportList4\[ i\]. vertical,

width: this. carportList4\[ i\]. width,

height: this. carportList4\[ i\]. height,

used: this. carportList3\[ i\]. used,

reserved: this. carportList3\[ i\]. reserved,

youReserved: this. carportList3\[ i\]. youReserved

\};

this. carObj. push( carstr);

旋转div角度

for( var i = 0; i< this. carportList4. length; i\++)\{

if( this. carportList4\[ i\]. transform != "0")\{

// console.log(this.carportList4\[i\].transform);

var mydiv = document. getElementsByName( "carInfoDIv");

var mydiv2 = document. getElementById( mydiv\[ i\]. id);

mydiv2. style. transform = 'rotate(' \+ this. carportList4\[ i\]. transform\+ 'deg)';

// console.log(mydiv2)

angular4 数组操作div，渲染染色，大小，旋转角度

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 java旋转base64位，自定义旋转角度角度

相关旋转数组

相关 Android TextView 设置旋转角度

相关 Arcmap投影旋转角度

相关 opencv角度旋转

相关 css让div旋转,CSS3 transform 属性旋转 div 元素

相关图片任意角度旋转

相关 Angular4对cookie的操作

相关 angular4 数组操作div，渲染染色，大小，旋转角度

相关 angular4数据渲染识别br标签