如何让放在body前面的js代码运行
下面的代码，js是放在body的底部的，我想放在</style>的下面，也就是body前面运行，但是显示结果是失败的，要怎么修改，才能放在顶部，或者放在单独的js文件中，谢谢！
<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>调试</title>
<style>
*{margin:0; padding:0; color:black;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{color:orange;}
#articleList{width:400px; border:5px solid gray;}
#articleTitle{height:50px; line-height:50px; font-size:24px; text-align:center; border-bottom:1px solid gray;}
#articleContent{width:350px; height:125px; margin:10px 25px; overflow:hidden;}
#articleContent ul li a{width:200px; height:25px; line-height:25px; display:inline-block; padding-left:15px; overflow:hidden;}
#articleContent ul li span{float:right; color:gray;}
</style>
</head>
<body>
<div id="articleList">
<h3 id="articleTitle">最近更新文章</h3>
<div id="articleContent">
<ul id="newList">
<li><a href="#">1.做对自己有意义的事</a><span>2016-05-28</span></li>
<li><a href="#">2.关于CSS选择器继承</a><span>2016-05-30</span></li>
<li><a href="#">3.自己动手，丰衣足食</a><span>2016-06-01</span></li>
<li><a href="#">4.论inline-block</a><span>2016-06-02</span></li>
<li><a href="#">5.更多正在编写中……</a><span>2016-06-02</span></li>
</ul>
<ul id="newListTemp"></ul>
</div>
</div>
<script>
var area = document.getElementById("articleContent");
var newList = document.getElementById("newList");
var newListTemp = document.getElementById("newListTemp");
var speed = 50;
area.scrollTop = 0;
newListTemp.innerHTML = newList.innerHTML;
function scrollUp(){
if(area.scrollTop >= newList.scrollHeight){
area.scrollTop = 0;
}
else{
area.scrollTop ++;
}
}
var myScroll = setInterval("scrollUp()", speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()", speed);
}
</script>
</body>
</html>
心宁安心2回答
-
LHammer
再试试<!Doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>调试</title> <style> *{margin:0; padding:0; color:black;} ul{list-style:none;} a{text-decoration:none;} a:hover{color:orange;} #articleList{width:400px; border:5px solid gray;} #articleTitle{height:50px; line-height:50px; font-size:24px; text-align:center; border-bottom:1px solid gray;} #articleContent{width:350px; height:125px; margin:10px 25px; overflow:hidden;} #articleContent ul li a{width:200px; height:25px; line-height:25px; display:inline-block; padding-left:15px; overflow:hidden;} #articleContent ul li span{float:right; color:gray;} </style> <script> window.onload = function(){ var area = document.getElementById("articleContent"); var newList = document.getElementById("newList"); var newListTemp = document.getElementById("newListTemp"); var speed = 50; area.scrollTop = 0; newListTemp.innerHTML = newList.innerHTML; var myScroll = setInterval(scrollUp, speed); area.onmouseover = function(){ clearInterval(myScroll); } area.onmouseout = function(){ myScroll = setInterval(scrollUp, speed); } function scrollUp(){ if(area.scrollTop >= newList.scrollHeight){ area.scrollTop = 0; } else{ area.scrollTop ++; } } } </script> </head> <body> <div id="articleList"> <h3 id="articleTitle">最近更新文章</h3> <div id="articleContent"> <ul id="newList"> <li><a href="#">1.做对自己有意义的事</a><span>2016-05-28</span></li> <li><a href="#">2.关于CSS选择器继承</a><span>2016-05-30</span></li> <li><a href="#">3.自己动手，丰衣足食</a><span>2016-06-01</span></li> <li><a href="#">4.论inline-block</a><span>2016-06-02</span></li> <li><a href="#">5.更多正在编写中……</a><span>2016-06-02</span></li> </ul> <ul id="newListTemp"></ul> </div> </div> </body></html> -
LHammer
js中可以用window onload() 代表页面全部加载完成之后在执行之下的代码<!Doctype html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>调试</title> <style> *{margin:0; padding:0; color:black;} ul{list-style:none;} a{text-decoration:none;} a:hover{color:orange;} #articleList{width:400px; border:5px solid gray;} #articleTitle{height:50px; line-height:50px; font-size:24px; text-align:center; border-bottom:1px solid gray;} #articleContent{width:350px; height:125px; margin:10px 25px; overflow:hidden;} #articleContent ul li a{width:200px; height:25px; line-height:25px; display:inline-block; padding-left:15px; overflow:hidden;} #articleContent ul li span{float:right; color:gray;} </style> <script> window.onload = function(){ var area = document.getElementById("articleContent"); var newList = document.getElementById("newList"); var newListTemp = document.getElementById("newListTemp"); var speed = 50; area.scrollTop = 0; newListTemp.innerHTML = newList.innerHTML; function scrollUp(){ if(area.scrollTop >= newList.scrollHeight){ area.scrollTop = 0; } else{ area.scrollTop ++; } } var myScroll = setInterval("scrollUp()", speed); area.onmouseover = function(){ clearInterval(myScroll); } area.onmouseout = function(){ myScroll = setInterval("scrollUp()", speed); } } </script> </head> <body> <div id="articleList"> <h3 id="articleTitle">最近更新文章</h3> <div id="articleContent"> <ul id="newList"> <li><a href="#">1.做对自己有意义的事</a><span>2016-05-28</span></li> <li><a href="#">2.关于CSS选择器继承</a><span>2016-05-30</span></li> <li><a href="#">3.自己动手，丰衣足食</a><span>2016-06-01</span></li> <li><a href="#">4.论inline-block</a><span>2016-06-02</span></li> <li><a href="#">5.更多正在编写中……</a><span>2016-06-02</span></li> </ul> <ul id="newListTemp"></ul> </div> </div> </body></html>
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript