web前端学习笔记（2）——调色板简单初始版

来源：互联网发布：模拟炒股软件手机版编辑：程序博客网时间：2024/06/10 03:10

HTML代码

<html><head><meta charset="utf-8" /><title>自制调色板</title><style type="text/css">html{width: 100%; height: 100%;margin: 0;}body{idth: 100%; height: 100%;margin: 0;color: #FFFFFF;}</style></head><body><div style="position: relative;width: 100%;height: 100%;"><div style="width: 100%;height: 50%;background-color: white;"align="center"><input type="text" name="" id="color1" value="" /><input type="text" name="" id="color2" value="" /><input type="text" name="" id="color3" value="" /><button type="button" onclick="color(document.getElementById('color1'),document.getElementById('color2'),document.getElementById('color3'))">转换颜色</button></div><div id='show' style="width: 100%;height: 50%;background-color: black;"></div></div><script type="text/javascript" src="js/color.js"></script></body></html>

JavaScript代码

function color(input1 , input2 , input3){var show=document.getElementById('show');var co1=parseInt(input1.value);var co2=parseInt(input2.value);var co3=parseInt(input3.value);var color_1=co1.toString(16);var color_2=co2.toString(16);var color_3=co3.toString(16);var nowcolor='#'+color_1+color_2+color_3;console.log(nowcolor);show.style.backgroundColor=nowcolor;}

目标改进：美化

笔记：

console.log() 在firebug下显示消息，终于不用document.write()了！

num1.toString(num2) num1：待转换数 num2：转换目标位数

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString（相关网页）

input.value 为字符串用paresInt 可以转换

http://www.w3school.com.cn/jsref/jsref_parseInt.asp

JS的颜色与大小写兼容

0 0