亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

求教這個錯在哪?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js動畫制作</title>

<style type="text/css">

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px;?

? ? }

</style>

<script type="text/javascript">

function startqwe(speed){

var qwe=document.getElementById('div1');

var speed=document.getElementById('txt1').value;

setInterval(function(){qwe.style.left=qwe.offsetLeft+speed+'px';},1000);

</script>

</head>

<body>

<div id="div1"></div>

設置速度<input type="text" id="txt1" />px/s

<input type="button" value="點擊開始運動" style="position:relative;" onclick="startqwe(speed)" />


</body>

</html>

想設計一個自定義速度的運動結果沒有反應麻煩大神看下謝謝

正在回答

2 回答

首先獲取元素要在文檔加載完成之后才能獲取到的,其次是你那個速度是網頁加載完成的時候輸入的,所以要在點擊事件里面獲取,才能得到輸入的速度值,這個值是個字符串用parseInt()轉義下,speed是全局變量可以在函數里面使用,不用帶進去

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>js動畫制作</title>

<style type="text/css">

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px;?

? ? }

</style>

</head>

<body>

<div id="div1"></div>

設置速度<input type="text" id="txt1"/>px/s

<input type="button" value="點擊開始運動" style="position:relative;" onclick="startqwe()" />


<script type="text/javascript">

//獲取元素要在文檔加載完成之后在獲取,一般寫在最后面

var qwe=document.getElementById('div1');

var speed=document.getElementById('txt1').value;

function startqwe(){

//點擊之后獲取到速度值

speed=document.getElementById('txt1').value;

setInterval(function(){qwe.style.left=qwe.offsetLeft+parseInt(speed)+'px';

},1000);

}

</script>

</body>

</html>


1 回復 有任何疑惑可以回復我~
#1

死之外科醫生 提問者

非常感謝!
2017-03-31 回復 有任何疑惑可以回復我~
#2

死之外科醫生 提問者

為什么運動看起來是那種一頓一頓的感覺不像那種很平滑的勻速運動
2017-03-31 回復 有任何疑惑可以回復我~
#3

小狗旺旺

因為設定的是1000毫秒運動一次呀,也就是說這是一秒鐘一幀的動畫,就像幻燈片一樣,可以通過縮短運動時間間隔,從而使畫面變得流暢
2017-03-31 回復 有任何疑惑可以回復我~

贊同上面的說法

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
JS動畫效果
  • 參與學習       113918    人
  • 解答問題       1502    個

通過本課程JS動畫的學習,從簡單動畫開始,逐步深入各種動畫框架封裝

進入課程

求教這個錯在哪?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號