Question

我正在考虑制作一个“魔术8球”的网站。我想要一个看起来更像the helix fossil website的以下代码版本。

var answers = [ 
  'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
  'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
  'I hope so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
  'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
  'The future is uncertain.', 'I would rather not say.', 'Who cares?',
  'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];

document.getElementById('answerButton').onclick = function () { 
  var answer = answers[Math.floor(Math.random() * answers.length)];
  document.getElementById('answerContainer').innerHTML = answer;
};

p, input, button { 
  font-family: sans-serif;
  font-size: 15px;
} 
input { 
  width: 200px;
}

<p> How can I help you today? </p>

<input type="text" placeholder="enter a question"></input>

<button id="answerButton"> Answer me </button>

<p id="answerContainer"></p>

另外，当我将它放入Weebly的“插入代码”功能时，它会不断显示元素上方的原始代码。我可以用任何方式清理它，还是应该使用不同的网站创建者？

我对CSS一无所知。

Answer 1

下面是一个代码片段，它为基本代码添加了一些样式。

如果您想创建一个网页，可以将CSS放在style标记内，将JavaScript放在script标记内，将HTML放在body标记内。< / p>

Like this: right-click on my page并选择＆＃34;查看页面来源＆＃34; （或者您选择的任何浏览器调用它）以查看页面的组织方式。

更好的是，如果Weebly文件管理器允许，将CSS和JavaScript放入外部文件并链接到HTML文件中。

＆＃13;

window.onload = function () {
  var answers = [
    'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
    'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
    'I would say so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
    'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
    'The future is uncertain.', 'I would rather not say.', 'Who cares?',
    'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];

  var container = document.getElementById('answerContainer'),
      opacityPercent,
      previousAnswer;
  function updateOpacity() {
    opacityPercent += 1;
    container.style.opacity = opacityPercent / 100;
    if (opacityPercent < 100) {
      window.requestAnimationFrame(updateOpacity);
    }
  }
  function makeVisible() {
    container.style.opacity = '0';
    opacityPercent = -1;
    updateOpacity();
  }
  opacityPercent = -1;
  document.getElementById('questionArea').value = '';
  document.getElementById('answerButton').onclick = function () {
    while (true) {
      var answer = answers[Math.floor(Math.random() * answers.length)];
      if (answers.length == 1 || answer != previousAnswer) {
        previousAnswer= answer;
        break;
      }
    }
    container.className = '';
    container.innerHTML = answer;
    makeVisible();
  };
};

＆＃13;

body {
  background: #e8e8d6;
  color: #333;
}
#wrapper {
  width: 600px;
  margin: 80px auto;
  text-align: center;
}
p, input, button {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 24px;
}
#answerContainer {
  opacity: 0;
}
p {
  padding: 20px 0;
}
input {
  width: 500px;
  padding: 5px 15px;
  background: #fff;
  border: 2px solid #ddd;
  outline: none;
}
input:focus {
  border: 2px solid #888;
}
button {
  background: #ffe;
  color: #666;
  border: 2px solid #666;
  border-radius: 8px;
  margin-left: 10px;
  padding: 5px 15px;
  outline: none;
}
button:hover {
  background: #ffc;
  color: #222;
  border: 2px solid #222;
  cursor: pointer;
}

＆＃13;

<link rel="stylesheet" type="text/css"
 href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">

<div id="wrapper">

<p> What do you want to know about the future? </p>

<p>
  <input id="questionArea" type="text" placeholder="enter a question"></input>
</p>

<p>
  <button id="answerButton"> Make a prediction </button>
</p>

<p id="answerContainer"></p>

</div>

＆＃13;

HTML中的Magic 8球

1 个答案: