1.求整数阶乘，禁止非数值输入
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="js/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<!-- 需导入低版本jQuery文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<title>求整数阶乘</title>
<style>
body{
margin-top:200px;
}
</style>
<script>
//禁止非数值输入
$(function(){
//兼容IE11
if($.browser.msie){
$("#test").get(0).attachEvent("onpropertychange",function (o){
alert(o.srcElement.value);
});
//兼容非IE
}else{
$("#test").get(0).addEventListener("input",function(o){
var checkVal = o.target.value;
if(isNaN(checkVal)){
o.target.value="";
}
},false);
}
});
$(function(){
$("button").click(function(){
var num=$("#test").val();
function factorial (num){
if (num==0||num==1){
return 1;
}
else if(num>1 && num%1===0){
return (num * factorial(num - 1));
}
else{
$("input").css({"color":"#ff0000"});
$("input").css({"background-color":"#ffb9ac"});
return "输入错误";
}
}
$("input").val(factorial(num));
});
$("#test").focus(function() {
$("input").val("");
$("input").css({"background-color": "white"});
$("input").css({"color": "black"});
});
});
</script>
</head>
<body>
<center>
<input type="textbox" placeholder="求整数阶乘" id="test">
<button>Click me</button>
</center>
</body>
</html>
2.鼠标拖动div块，不得超过边界
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<style>
#drag{
width:100px;
height:100px;
background-color:yellow;
border:solid 1px #666;
position:absolute;
cursor:move;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var d=$("#drag");
//计算x方向最大移动距离,2为双倍的边框宽度
var maxleft=$(window).width()-d.width()-2;
//计算y方向最大移动距离,2为双倍的边框宽度
var maxtop=$(window).height()-d.height()-2;
d.bind("mousedown",function(event){
/* 获取需要拖动节点的坐标 */
var offset_x = $(this)[0].offsetLeft;
var offset_y = $(this)[0].offsetTop;
/* 获取当前鼠标的坐标 */
var mouse_x = event.pageX;
var mouse_y = event.pageY;
$(document).bind("mousemove",function(ev){
/* 计算鼠标移动了的位置 */
var _x = ev.pageX - mouse_x;
var _y = ev.pageY - mouse_y;
/* 设置移动后的元素坐标 */
var x= (offset_x + _x );
var y= (offset_y + _y );
if(x<0){
var now_x=0+"px";
}else if(x<maxleft){
var now_x =x+ "px";
}else {
var now_x =maxleft+ "px";
}
if(y<0){
var now_y=0+"px";
}else if(y<maxtop){
var now_y =y+ "px";
}else {
var now_y =maxtop+ "px";
}
d.css({
top:now_y,
left:now_x
});
});
});
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
});
})
</script>
</head>
<body>
<div id="drag"></div>
</body>
</html>
网友评论