我做的累加计算网页，代码完全没问题，为什么输出的值有问题？

效果如下图：

图片说明

html代码：

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
  </head>
  <body>

    <input type="text" id="input" value="" placeholder="在此输入需要计算的值"/>
    <div id="wrap">
    <h1 id="标题"></h1>
    <p id="结果"></p>
    </div>

  </body>
  <script>
    function count(){
      var i = document.getElementById("input").value;
      var a = i / 2;
      var n = /\D/;
      if ( !n.test(i)){
        if ( i < 0 ){
            var sum = ( 1 - i ) * a;
            var tip1 = "-1";
            var tip = "累减至";
        }else{
            var sum = ( 1 + i ) * a;
            var tip1 = "1";
            var tip = "累加至";
        }
        document.getElementById("标题").innerHTML = tip1 + tip + i + "的结果为：";
        document.getElementById("结果").innerHTML = sum;
      }else{
        document.getElementById("标题").innerHTML = "请输入数字";
        document.getElementById("结果").innerHTML = "";
      }}

    var oldText = $('#input').val();
    $(document).ready(function(){//当输入框内容变化时重新计算
        $('#input').on('input propertychange', function(){
            if (oldText != $('#input').val())
            return count();
        });
    });
  </script>
</html>

CSS代码：

*{
  margin: 0;
  padding: 0;
}
#wrap{
  position: absolute;
  top: 500px;
  left: 50px;
}
h1{
  display: inline;
  font-size: 50px;
  color: SkyBlue;
}
p{
  display: inline;
  color: YellowGreen;
  font-size: 50px;
}
#input{
  position: relative;
  margin: 200px 50px;
  width: 70%;
  height:100px;
  font-size: 50px;
  line-height: 100px;
  text-align: center;
}

js取值为String类型，需要转一下类型，进行计算

var i =  parseInt(document.getElementById("input").value);

var i = document.getElementById("input").value;

这里的i是字符串，你需要转成整形

        var sum = ( 1 + i ) * a;这个1+i应该是字符串的加吧，括号里改为1+Number(i)试试