Question

我想建立一个跟踪一天吸烟量的网站。总体目标是帮助吸烟者通过达到既定目标来减少吸烟量。第一个重要功能是当天要吸烟的香烟数量。第二个是点击器，记录当天吸烟的数量。

这就是我所拥有的：

<html>
<head>
    <title>SMOKERS TOOL</title>
</head>
<body>

<h3>Daily goal</h3>

<input type="number" id="myNumber" value="1">

<p>This is how many smokes you're having today</p>

<button onclick="myFunction()">SUBMIT</button>

<p id="demo"></p>

<script>

    function myFunction() {
        var x = document.getElementById("myNumber").value;
        document.getElementById("demo").innerHTML = x;

}
</script>

    <script type="text/javascript">
    var clicks = 0;
    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    </script>
    <button type="button" style="height:200px;width:200px" onClick="onClick()">HIT ME EVERY TIME YOU SMOKE</button>
    <p>THIS IS HOW MUCH YOU'VE SMOKED TODAY: <a id="clicks">0</a></p>

</body>


</html>

我对这类事情真的很陌生，我有很多问题我不太确定怎么问，但我想知道怎么做让一些文字看起来像“你过了目标！”当吸烟的数量超过每日目标时。如果你们有任何建议，请告诉我。 SUBMIT文本显示为按钮时我将其保存为html文件。我正在用记事本做任何事情。

Answer 1

我想知道如何让一些文字看起来像＃34;你过去了目标＆＃34！;当吸烟的数量超过每日目标时。

执行clicks功能时，您只需检查onClick是否大于目标号码。

var goal = document.getElementById("myNumber").value;
if (clicks > goal) {
   document.getElementById("demo").innerHTML = "You went over your goal!";
   //or...
   alert("You went over your goal!");
}

Answer 2

  <html>
  <head>
      <title>SMOKERS TOOL</title>
  </head>
  <body>

  <h3>Daily goal</h3>

  <input type="number" id="myNumber" value="1">

  <p>This is how many smokes you're having today</p>

  <button onclick="myFunction()">SUBMIT</button>

  <p id="demo"></p>

  <script>

      function myFunction() {
          var x = document.getElementById("myNumber").value;
          document.getElementById("demo").innerHTML = x;

  }
  </script>

      <script type="text/javascript">
      var clicks = 0;
      var surpassedDailyGoal = false;

      function onClick() {
        var dailyGoal = document.getElementById("myNumber").value;


          clicks += 1;
          document.getElementById("clicks").innerHTML = clicks;

        if( clicks > dailyGoal && !surpassedDailyGoal ){
          surpassedDailyGoal = true;
          document.body.insertAdjacentHTML('beforeend', '<p>Stop smoking you chimney you...</p>');
        }
      };
      </script>
      <button type="button" style="height:200px;width:200px" onClick="onClick()">HIT ME EVERY TIME YOU SMOKE</button>
      <p>THIS IS HOW MUCH YOU'VE SMOKED TODAY: <a id="clicks">0</a></p>

  </body>

Answer 3

＆＃13;

<html>

<head>
  <title>SMOKERS TOOL</title>
</head>

<body>
  <h3>Daily goal</h3>

  <input type="number" id="myNumber" value="4">

  <p>This is how many smokes you're having today</p>

  <p id="demo"></p>
  <button onclick="myFunction()">SUBMIT</button>

  <button type="button" id='btn' onClick="onClick()">HIT ME EVERY TIME YOU SMOKE</button>
  <p id='disp'>THIS IS HOW MUCH YOU'VE SMOKED TODAY:
    <p id="clicks">0</p>
  </p>
</body>
<script>
  function myFunction() {
    var x = document.getElementById("myNumber").value;
    document.getElementById("demo").innerHTML = x;
    document.getElementById("btn").disabled = false;
    clicks = -1;
    onClick();
  }

  var clicks = 0;

  function onClick() {

    clicks += 1;
    if (clicks <= document.getElementById("myNumber").value) {
      document.getElementById("disp").innerHTML = "THIS IS HOW MUCH YOU'VE SMOKED TODAY: ";
      document.getElementById("clicks").innerHTML = clicks;
    } else {
      document.getElementById("clicks").innerHTML = '';
      document.getElementById("btn").disabled = true;
      document.getElementById("disp").innerHTML = 'You have exceeded the limit of ' + (clicks - 1) + ' cigarettes. ';
    }
  };
</script>

</html>

＆＃13;

我怎么做脚本我甚至是Java？

3 个答案: