JS實(shí)現(xiàn)字體選色板實(shí)例代碼
哎，前段開發(fā)真心不容易。。。。弄了1個(gè)小時(shí)，找找了各種素材，終于，字體選色板基本功能弄好了，UI設(shè)計(jì)技能亟待提升。先看效果：
功能介紹：點(diǎn)擊顏色按鈕，彈出選色板，選中一個(gè)顏色，保存設(shè)置，隱藏選色板。。。實(shí)現(xiàn)源碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>color</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="javascript" src="chat.js" type="text/javascript"></script>
</head>
<body style="margin:8px;">
<SPAN style="WHITE-SPACE: pre"> </SPAN><!--此處省略無關(guān)代碼-->
<td colspan=12 align=left style="word-break:break-all"><input
name="fontColor" type="button" value="顏色"
onclick="coloropen(event)" id="fontColor" />
<!--此處省略無關(guān)代碼-->
<script type="text/javascript" language="javascript">
<!--
var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF')
var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00',
'00FFFF', 'FF00FF')
var current = null
function initcolor() {
getArgs();
//chat.js init();
init();
var colorTable = ''
for (i = 0; i < 2; i++) {
for (j = 0; j < 6; j++) {
colorTable = colorTable + '<tr height=15>'
colorTable = colorTable
+ '<td width=15 style="background-color:#000000">'
if (i == 0) {
colorTable = colorTable
+ '<td width=15 style="cursor:pointer;background-color:#'
+ ColorHex[j]
+ ColorHex[j]
+ ColorHex[j]
+ '" onclick="doclick(this.style.backgroundColor)">'
} else {
colorTable = colorTable
+ '<td width=15 style="cursor:pointer;background-color:#'
+ SpColorHex[j]
+ '" onclick="doclick(this.style.backgroundColor)">'
}
colorTable = colorTable
+ '<td width=15 style="background-color:#000000">'
for (k = 0; k < 3; k++) {
for (l = 0; l < 6; l++) {
colorTable = colorTable
+ '<td width=15 style="cursor:pointer;background-color:#'
+ ColorHex[k + i * 3]
+ ColorHex[l]
+ ColorHex[j]
+ '" onclick="doclick(this.style.backgroundColor)">'
}
}
}
}
colorTable = '<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">'
+ '<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">'
+ '<span style="float:left;color:#999999;">12</span>'
+ '<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×關(guān)閉</span>'
+ '</td></table>'
+ '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">'
+ colorTable + '</table>';
document.getElementById("colorpane").innerHTML = colorTable;
var current_x = document.getElementById("fontColor").offsetLeft;
var current_y = document.getElementById("fontColor").offsetTop;
//alert(current_x + "-" + current_y)
document.getElementById("colorpane").style.left = current_x + "px";
document.getElementById("colorpane").style.top = current_y + "px";
}
function doclick(obj) {
//document.getElementById("fontColor").value = obj;
document.getElementById("colorpane").style.display = "none";
document.getElementById('msgbox').style.color = obj;
//alert(obj);
//var chatArea = frames["chat"].document
// .getElementsByName('chatArea');
//for ( var i = 0; i < chatArea.length; i++) {
// chatArea[i].style.color = obj;
//}
}
function colorclose() {
document.getElementById("colorpane").style.display = "none";
//alert("ok");
}
function coloropen() {
document.getElementById("colorpane").style.display = "";
}
window.onload = initcolor;
</script>
</body>
</html>
調(diào)試的時(shí)候，自行修改doclick方法即可。
相關(guān)文章
JS數(shù)字千分位格式化實(shí)現(xiàn)方法總結(jié)
這篇文章主要介紹了JS數(shù)字千分位格式化實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了JS實(shí)現(xiàn)數(shù)字千分位格式化的常用技巧,包括字符串的分割、拼接、遍歷及正則操作等相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)篩子抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript實(shí)現(xiàn)獲取本機(jī)IP地址
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取本機(jī)IP地址方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)單擊輸入框彈出選擇框效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素與相關(guān)屬性的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
本篇文章主要介紹了ionic2懶加載配置詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了深入了解JavaScript 的 WebAssembly,它是由 Google , Microsoft , Mozilla ， Apple 等幾家大公司合作發(fā)起的一個(gè)關(guān)于 面向Web的通用二進(jìn)制和文本格式 的項(xiàng)目。 ,需要的朋友可以參考下2019-06-06
寫出更好的JavaScript程序之undefined篇（中）
前一篇我介紹了幾種廣為使用的利用undefined這個(gè)概念值的辦法，這一篇我會介紹一些不太常見的辦法，其中還包括一個(gè)很巧妙的，我個(gè)人覺得很值得推廣的辦法。2009-11-11
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
js數(shù)組高階函數(shù)之includes()方法總結(jié)
JS的數(shù)組是一種特殊的對象,其特點(diǎn)是在值的列表中按照順序存放值,在 JS中,數(shù)組是由中括號 [] 括起來的數(shù)值序列,本篇文章給大家介紹js數(shù)組高階函數(shù)——includes()方法,感興趣的朋友一起看看吧2023-12-12
微信小程序開發(fā)之實(shí)現(xiàn)食堂點(diǎn)餐系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡單的食堂點(diǎn)餐系統(tǒng)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01