html调色盘字符,html实战1--调色板

调色板

1.实现页面布局

2.绑定事件

Document

/* 清除默认样式*/

*{

margin: 0;

padding: 0;

}

#box{

width:200px;

height: 200px;

background-color: black;

}

R: 0

G: 0

B: 0

var json = {

r:0,

g:0,

b:0

}

$('input:eq(0)').on('input',function(){

$(this).siblings().html($(this).val());

json.r = $(this).val();

$('#box').css({

'background':`rgb(${json.r},${json.g},${json.b})`

})

})

$('input:eq(1)').on('input',function(){

$(this).siblings().html($(this).val());

json.g = $(this).val();

$('#box').css({

'background':`rgb(${json.r},${json.g},${json.b})`

})

})

$('input:eq(2)').on('input',function(){

$(this).siblings().html($(this).val());

json.b = $(this).val();

$('#box').css({

'background':`rgb(${json.r},${json.g},${json.b})`

})

})

标签：box,val,--,调色板,json,html,background,input

来源： https://www.cnblogs.com/tingshu/p/14407211.html