javascript - 有没有办法在 html 中显示情绪面孔？

Question

我在输出中输入句子的情绪：例如：“我非常喜欢”--> 情绪：“积极”

我想在 html 中显示带有颜色的脸（正面为绿色，中性为蓝色，负面为红色），而不是“正面”，“中性”或“负面”......

标签： javascripthtml

Answer 1

这是输入时颜色变化的示例。

我是编程和 StackOverflow 的新手，如果没用，我很抱歉。

这是 jsfiddle。

HTML：

<form>
  <label>How are you ? </label>
  <input type="radio" id="happy" name="sentiment" value="happy">
  <label for="happy">I'm happy</label>
  <input type="radio" id="soso" name="sentiment" value="soso">
  <label for="soso">Soso...</label>
  <input type="radio" id="angry" name="sentiment" value="angry">
  <label for="angry">I'm angry</label>
</form>

<p>Output : <span id="sentiment" class="">☻&lt;/span><span id="others"></span></p>

CSS：

span#sentiment {
  color : #333;
}

span#sentiment.happy {
  color : #0F0;
}

span#sentiment.soso {
  color : #FF0;
}

span#sentiment.angry {
  color : #F00;
}

JS：

var spanSentiment = document.getElementById('sentiment');
var spanOthers = document.getElementById('others');

var happy = document.getElementById('happy');
happy.addEventListener('change', function() {
    spanSentiment.classList.remove('angry');
  spanSentiment.classList.remove('soso');
  spanSentiment.classList.add('happy');
  spanOthers.innerHTML = ' happy';
});

var soso = document.getElementById('soso');
soso.addEventListener('change', function() {
    spanSentiment.classList.remove('happy');
  spanSentiment.classList.remove('angry');
  spanSentiment.classList.add('soso');
  spanOthers.innerHTML = ' soso';
});

var angry = document.getElementById('angry');
angry.addEventListener('change', function() {
    spanSentiment.classList.remove('happy');
  spanSentiment.classList.remove('soso');
  spanSentiment.classList.add('angry');
  spanOthers.innerHTML = ' angry';
});