嗨呀,這是怎么了??兄弟們幫解決一下,謝謝了
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title></title>
? ?<style>
? ? ? ?*{
? ? ? ? ? ?margin: 0;padding: 0;
? ? ? ?}
? ? ? ?#div1{
? ? ? ? ? ?width: 300px;
? ? ? ? ? ?height: 100px;
? ? ? ? ? ?position: relative;
? ? ? ? ? ?top: 100px;
? ? ? ? ? ?left: 300px;
? ? ? ? ? ?border: 5px solid lime;
? ? ? ? ? ?overflow: hidden;
? ? ? ? ? ?text-align: center;
? ? ? ?}
? ?</style>
</head>
<script>
? ?window.onload=function(){
? ? ?/* //這樣寫沒(méi)反應(yīng),就連ul里邊的值都不顯示了
? ? ? ?var area=document.getElementById('div1');
? ? ? ?var inner1=document.getElementById('inner1');
? ? ? ?var inner2=document.getElementById('inner2');
? ? ? ?inner1.innerHTML=inner2.innerHTML;
? ? ? ?function scrollUp(){
? ? ? ? ? ?if(area.scrollTop>=inner1.offsetHeight){
? ? ? ? ? ? ? ?area.scrollTop=0;
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?area.scrollTop++;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?var myScroll=setInterval(scrollUp,30);*/
? ? ?/* ?//這樣寫會(huì)有反應(yīng)
? ? ? ?var area=document.getElementById('div1');
? ? ? ?area.scrollTop=20;*/
}
</script>
<body>
<div id="div1">
?<ul id="inner1">
? ? ?<li>111111111111</li>
? ? ?<li>2222222222</li>
? ? ?<li>3333333333</li>
? ? ?<li>4444444444</li>
? ? ?<li>5555555555</li>
? ? ?<li>6666666666</li>
? ? ?<li>7777777777</li>
? ? ?<li>8888888888</li>
?</ul>
? ?<ul id="inner2"></ul>
</div>
</body>
</html>
2016-10-20
三個(gè)問(wèn)題:
1、window.onload只能運(yùn)行前一個(gè)js代碼,你把代碼全放到里面就會(huì)出問(wèn)題,要么就整合下代碼再去調(diào)用
2、?inner2.innerHTML=inner1.innerHTML;右邊inner1的內(nèi)容賦值給左邊inner2內(nèi)容也就是復(fù)制操作
3、setInterval('scrollUp()',30);計(jì)時(shí)器首先調(diào)用一個(gè)函數(shù)必須用引號(hào)并且scrollUp()是所寫的函數(shù)方法
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title></title>
? ?<style>
? ? ? ?*{
? ? ? ? ? ?margin: 0;padding: 0;
? ? ? ?}
? ? ? ?#div1{
? ? ? ? ? ?width: 300px;
? ? ? ? ? ?height: 100px;
? ? ? ? ? ?position: relative;
? ? ? ? ? ?top: 100px;
? ? ? ? ? ?left: 300px;
? ? ? ? ? ?border: 5px solid lime;
? ? ? ? ? ?overflow: hidden;
? ? ? ? ? ?text-align: center;
? ? ? ?}
? ?</style>
</head>
<script>
? ?window.onload=function(){
? ? scrollUp();
? ?}
? ?function scrollUp(){
? ? ? ?var area=document.getElementById('div1');
? ? ? ?var inner1=document.getElementById('inner1');
? ? ? ?var inner2=document.getElementById('inner2');
? ? ? ?inner2.innerHTML=inner1.innerHTML;
? ? ? ? ? ?if(area.scrollTop>=inner1.offsetHeight){
? ? ? ? ? ? ? ?area.scrollTop=0;
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?area.scrollTop++;
? ? ? ? ? ?}
? ? ? ?}
? ? ? ?var myScroll=setInterval('scrollUp()',30);
</script>
<body>
<div id="div1">
?<ul id="inner1">
? ? ?<li>111111111111</li>
? ? ?<li>2222222222</li>
? ? ?<li>3333333333</li>
? ? ?<li>4444444444</li>
? ? ?<li>5555555555</li>
? ? ?<li>6666666666</li>
? ? ?<li>7777777777</li>
? ? ?<li>8888888888</li>
?</ul>
? ?<ul id="inner2"></ul>
</div>
</body>
</html>