网页互动元素实现-优快云博客

本文链接：https://blog.youkuaiyun.com/zuebak/article/details/102537086

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="tips"></div>
		<div class="box">
		<label>用户名:<input id="user" type="text"></label>
		<label>密码:<input id="pass" type="password"></label>
		<button id="login">登陆</button>
		</div>
		<script type="text/javascript">
			window.onload=function(){
				addBlur($('user'));
				addBlur($('pass'));
			};
			function $(obj){
				return document.getElementById(obj);
			}
			function addBlur(obj){
				obj.onblur=function(){
					isEmpty(this);
				};
			}
			function  isEmpty(obj){
				if(obj.value===''){
					$('tips').style.display='block';
					$('tips').innerHTML='注意：输入内容不能为空';
				}else{
					$('tips').style.display='none';
				}
			}
		</script>
	</body>
</html>

缓动的小球

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <title>缓动的小球</title>
    <style>
      #box{position:absolute;width:120px;height:120px;line-height:120px;text-align:center;background:red;color:#fff;border-radius:60px;}
    </style>
  </head>
  <body>
    <div id="box">点我啊，跑！</div>
    <script>
      function animate(obj, option) {
        clearInterval(obj.timer);                          
        obj.timer = setInterval(function() {
          var flag = true;                                 
          for (var k in option) {
            var leader = parseInt(getStyle(obj, k)) || 0;   
            var target = option[k];                        
            var step = (target - leader) / 10;              
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;           
            obj.style[k] = leader + 'px';     
            if (leader != target) {           
              flag = false;
            }
          }
          if (flag) {                       
            clearInterval(obj.timer);
          }
        }, 15);
      }
      function getStyle(obj, attr) {
        if (window.getComputedStyle) {      
          return window.getComputedStyle(obj, null)[attr];
        } else {                             
          return obj.currentStyle[attr];
        }
      }
      var obj = document.getElementById('box');
      obj.onclick = function() {
        animate(obj, {'left': 400, 'top': 200});
      };
    </script>
  </body>
</html>

鼠标拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" class="box">
			<div id="drop" class="hd">注册信息（可以拖拽)
			<span id="box_close">【关闭】</span>
		</div>
		<div class="id"></div>
		</div>
		<script>
			var box = document.getElementById('box');
			var drop = document.getElementById('drop');
			drop.onmousedon = function(event){
				var event = event || window.event;
				var pageX = event.pageX || event.clientx + document.douumentElement.scrollLeft;
				var pageY = event.pageY || event.clientY + document.douumentElement.scrollTop;
				var spaceX = pageX - box.offsetLeft;
				var spaceY = pageY - box.offsetTop;
			};
		</script>
	</body>
</html>

js练习