效果如下图：
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;
}
