![](/img/trans.png)
[英]How to store a value generated in a while loop to a variable for later use in JQuery
[英]How to store the value from a form in a variable for later use in a function?
我想制作一個顏色選擇器,以更改用戶創建的顏色的不透明度。 html基本上保存了一個表單,該表單具有我通過document.getElementById().value
獲得的輸入。 我的問題是:如何將輸入中的值存儲在變量中,以便可以更改從用戶獲得的rgb顏色的不透明度? 這是從表單獲取所有顏色的函數。
function generateColor() { // generate colors and save them for later on
var red = document.getElementById("red").value;
var green = document.getElementById("green").value;
var blue = document.getElementById("blue").value;
return "rgb(" + red + "," + green + "," + blue + ")";
}
你的意思是:
function generateColor() { // generate colors and save them for later on
var red = getElementById("red").value,
green = getElementById("green").value,
blue = getElementById("blue").value,
rgb = "rgb(" + red + "," + green + "," + blue + ")";
那么您可以像使用red, green and blue
一樣使用rgb
在任何函數之外聲明一個var storedValue = 0
。 然后在您的函數內部( 不帶 var)設置其值。
function generateColor() { // generate colors and save them for later on
var red = getElementById("red").value;
var green = getElementById("green").value;
var blue = getElementById("blue").value;
storedValue = blue;
return "rgb(" + red + "," + green + "," + blue + ")";
也許這會有所幫助。 所有數據都存儲在數組中以供參考:
function generateColor() { // generate colors and save them for later on
var red = getElementById("red").value;
var green = getElementById("green").value;
var blue = getElementById("blue").value;
var colors = new Array();
colors[red] = red;
colors[green] = green;
colors[blue] = blue;
return(colors);
}
嘗試創建一個構造函數:
// common.js
//<![CDATA[
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
//]]>
// other.js
//<![CDATA[
function generateColor(redId, greeId, blueId, opacityId, whereId){
this.red = 0; this.green = 0; this.blue = 0; this.opacity = 1;
this.getRed = function(red_id){
if(!red_id)red_id = redId;
var r = this.red = E(red_id).value;
return r;
}
this.getGreen = function(green_id){
if(!green_id)green_id = greenId;
var g = this.green = E(green_id).value;
return g;
}
this.getBlue = function(blue_id){
if(!blue_id)blue_id = blueId;
var b = this.blue = E(blue_id).value;
return b;
}
this.getOpacity = function(opacity_id){
if(!opacity_id)opacity_id = opacityId;
var o = this.opacity = E(opacity_id).value;
return o;
}
this.build = function(where_id){
if(!where_id)where_id = whereId;
var e = this.where = E(where_id), o = this.opacity;
e.style.color = 'rgb('+this.red+', '+this.green+', '+this.blue+')';
e.style.opacity = o.toString();
e.style.filter = 'alpha(opacity='+100*(+o)+')';
}
}
現在您可以執行以下任一操作:
var wow = new generateColor;
wow.getRed('red'); wow.getGreen('green'); wow.getBlue('blue');
wow.getOpacity('opacity'); wow.build('outputId');
//]]>
要么
var wow = new generateColor('red', 'green', 'blue', 'opacity', 'outputId');
wow.build();
//]]>
或者您可以不基於ID設置顏色
var wow = new generateColor;
wow.red = 4; wow.blue = 7; wow.green = 'f'; wow.opacity = 0.5;
wow.build('outputId');
//]]>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.