收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1131|回复: 1

[讨论] js 定时器的问题。

[复制链接]
发表于 2015-11-19 20:27:29 | 显示全部楼层 |阅读模式
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. #div1{ width:200px; height:200px; background:#A74B4C; position:absolute; top:300px;}
  8. </style>
  9. <script>
  10.         var timer = null
  11.         window.onload = function() {
  12.             var odiv = document.getElementById('div1');
  13.             var obt = document.getElementById('bt');
  14.             obt.onclick = function() {
  15.                 move(odiv,250);
  16.             }
  17.         }
  18.         function move(obj,pos) {
  19.             clearInterval(timer);
  20.             var obj = document.getElementById('div1');
  21.             var speed = (pos - obj.offsetLeft) / 10
  22.             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  23.             if (obj.offsetLeft != pos) {
  24.                 obj.style.left = obj.offsetLeft + speed + 'px'
  25.             } else {
  26.                 clearInterval(timer);
  27.             }
  28.             timer = setInterval(move(obj,pos), 1000)
  29.         }
  30. </script>
  31. </head>
  32. 为什么我点击了直接到250px,我代码没有写错了啊,调试也正常看不出问题再哪里?
  33. <body>
  34. <div id='div1'></div>
  35. <input type="button" id="bt" value="按钮">
  36. </body>
  37. </html>
复制代码
发表于 2015-11-20 11:36:05 | 显示全部楼层
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#div1{ width:200px; height:200px; background:#A74B4C; position:absolute; left:0px; top:300px;}
</style>
<script>
        var timer = null
        window.onload = function() {
            var odiv = document.getElementById('div1');
            var obt = document.getElementById('bt');
                        var pos=300;
            obt.onclick = function() {
                                startMove(odiv,250);
            }
        }
               
                function startMove(obj,pos){
                        clearInterval(timer);
                                timer = setInterval(function(){
                                       
                                        //var odiv = document.getElementById('div1');
                                        var speed = (pos - obj.offsetLeft)/6;
                                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                                        if (obj.offsetLeft != pos) {
                                                obj.style.left = obj.offsetLeft + speed + 'px'
                                        } else {
                                                clearInterval(timer);
                                        }
                                       
                                }, 30);        
                };
               
        

</script>
</head>
为什么我点击了直接到250px,我代码没有写错了啊,调试也正常看不出问题再哪里?
<body>
<div id='div1'></div>
<input type="button" id="bt" value="按钮">
</body>
</html>
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-2 17:38 , Processed in 0.110073 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表