通过用户输入从一种颜色变为另一种颜色

我需要创建一个网站，使用<input>仅使用CSS，JS和HTML从用户指定的颜色淡出到另一种颜色。通过用户输入从一种颜色变为另一种颜色

例如，如果原始颜色是黑色，则用户将颜色更改为绿色背景将从黑色变为绿色。

请注意，我不想用jQuery来解决这个问题。

月1日编辑：
多亏了编辑这个问题的人，又名罗里McCrossan

2日编辑：
还加入到的是，我没有使用gradiants

来源

2017-03-17 MacStevins

1）请显示您当前的代码2）什么元素应该在颜色中褪色3）如果您*不希望使用某种技术，请不要在问题中标记 –

1.没有当前代码，因为它全部在我的头。 2.身体。 3.我发垃圾邮件标签，因为我累了，看不到jQuery标签，然后点击。附：感谢编辑，因为我是35％的英语，10％的菲律宾人和55％不说话太多..是的。 – MacStevins

function nextColor() { 
 
     var picker = document.getElementById('nextColor'); 
 
     document.getElementById('docBody').style.background = picker.value; 
 
    }

#docBody { 
 
     transition: background 2500ms ease-in-out; 
 
    }

<body id="docBody"> 
 
    <input type="color" name="nextColor" id="nextColor" onchange="nextColor()" /> 
 
</body>

的说明

来源

2017-03-17 12:13:52 paul

首先，我只想指出，即使当你有“在你的脑袋”的代码，它的仍然有用，使一个小码，小提琴或codepen演示它看起来是什么样子。至于你的问题，你可以定身的背景颜色（或任何其他元素）使用JavaScript这样的：

function setBackgroundcolor() { 
 
    var color = document.getElementById("colorinput").value; 
 
    document.body.style.background = color; 
 
}

<input type="text" id="colorinput"><button onclick="setBackgroundcolor()">setcolor</button>

例如：尝试输入red或#ff0000

来源

2017-03-17 12:17:44 Rennie

它不会从以前的颜色淡出到新的颜色。 – MacStevins

也不使用在线诽谤，因为.... INTERNET !!!也不是代码而是网站的设计 – MacStevins

通过用户输入从一种颜色变为另一种颜色

回答

相关问题