简易调色板（js）-白红宇

简易调色板（js）

阅读量：6671 次

发布时间：2019-06-25

本文共 3469 字，大约阅读时间需要 11 分钟。

完整代码：

<body>

</p>

<p>

</p>

<p>

</p>

// 获取文本内值

var or = parseInt(document.getElementById('r_txt').value);

var og = parseInt(document.getElementById('g_txt').value);

var ob = parseInt(document.getElementById('b_txt').value);

// 获取text文本对象

var orOb = document.getElementById('r_txt');

var ogOb = document.getElementById('g_txt');

var obOb = document.getElementById('b_txt');

// 初始化背景色

var cChar = or + "," + og + "," + ob;

document.bgColor = cChar;

var obtnRL = document.getElementById('btnRL');

var obtnRR = document.getElementById('btnRR');

var oBtnGL = document.getElementById('btnGL');

var oBtnGR = document.getElementById('btnGR');

var obtnBL = document.getElementById('btnBL');

var obtnBR = document.getElementById('btnBR');

// 点击-+按钮，调节背景颜色

obtnRL.onclick = bgRLighter;

obtnRR.onclick = bgRBigger;

oBtnGL.onclick = bgGLighter;

oBtnGR.onclick = bgGBigger;

obtnBL.onclick = bgBLighter;

obtnBR.onclick = bgBBigger;

var isLegit = false;

// 用户改变

orOb.onblur = function () {

or = document.getElementById('r_txt').value

isLegit = (function(or){

// var isLegit = false;

if (or < 0 || or > 255) {

isLegit = true;

} else {

isLegit = false;

}

return isLegit;

})(or);

if (isLegit) {

alert("请输入0～255之间的合法RGB值！！！");

return;

}

cChar = or + "," + og + "," + ob;

document.bgColor = cChar;

}

ogOb.onblur = function () {

og = document.getElementById('g_txt').value;

isLegit = (function(og){

if (og < 0 || og > 255) {

isLegit = true;

} else {

isLegit = false;

}

return isLegit;

})(og);

if (isLegit) {

alert("请输入0～255之间的合法RGB值！！！");

return;

}

cChar = or + "," + og + "," + ob;

document.bgColor = cChar;

}

obOb.onblur = function () {

ob = document.getElementById('b_txt').value;

isLegit = (function(ob){

if (ob < 0 || ob > 255) {

isLegit = true;

} else {

isLegit = false;

}

return isLegit;

})(ob);

if (isLegit) {

alert("请输入0～255之间的合法RGB值！！！");

return;

}

cChar = or + "," + og + "," + ob;

document.bgColor = cChar;

}

function bgRLighter() {

or--;

if (or < 0 || or > 255) {

return;

}

cChar = or + "," + og + "," + ob;

document.getElementById('r_txt').value = or;

document.bgColor = cChar;

}

function bgRBigger() {

or++;

if (or < 0 || or > 255) {

return;

}

cChar = or + "," + og + "," + ob;

document.getElementById('r_txt').value = or;

document.bgColor = cChar;

}

function bgGLighter() {

og--;

if (og < 0 || og > 255) {

return;

}

cChar = or + "," + og + "," + ob;

document.getElementById('g_txt').value = og;

document.bgColor = cChar;

}

function bgGBigger() {

og++;

if (og < 0 || og > 255) {

return;

}

cChar = or + "," + og + "," + ob;

document.getElementById('g_txt').value = og;

document.bgColor = cChar;

}

function bgBLighter() {

ob--;

if (ob < 0 || ob > 255) {

return;

}

cChar = or + "," + og + "," + ob;

document.getElementById('b_txt').value = ob;

document.bgColor = cChar;

}

function bgBBigger() {

ob++;

if (ob < 0 || ob > 255) {

return;

}

cChar = or + "," + og + "," + ob;

document.getElementById('b_txt').value = ob;

document.bgColor = cChar;

}

</script>

</body>

转载于:https://my.oschina.net/korabear/blog/1794591

你可能感兴趣的文章

Appium+python自动化9-SDK Manager

查看>>

RDLC系列之五初试XAML

查看>>

Redis配置文件之————redis.conf配置及说明

查看>>

PHP Ajax JavaScript 实现无刷新附件上传

查看>>

Git错误提示之：fatal: Not a git repository (or any of the parent directories): .git

查看>>

122.2. varnish utility

查看>>

在win7主机上为你的linux虚拟机配置ntp服务

查看>>

解析MYSQL BINLOG 二进制格式(2)--FORMAT_DESCRIPTION_EVENT

查看>>

Oracle 12c DBCA浅析(r12笔记第48天)

查看>>

MYSQL INNODB innodb_thread_concurrency相关参数理解

[转]Django Practice - Django 权限控制

查看>>

Raid5数据恢复原理_两块盘离线数据恢复方法