标签：操作 order col 获取元素 put 编写 技术 背景 属性
定时器（BOM-window对象）
setInterval(code,毫秒数）：周期执行
setTimeout（code，毫秒数）：延迟多长事件后，只执行一次
清除定时器：
clearInterval(id):
clearTimeout(id):
步骤分析：
1.html页面，先把广告隐藏
2.页面加载成功事件 onload
3.编写函数
定时器
<html> <head> <meta charset="UTF-8"> <title></title> <style> .ad{ display: none; width: 100%; } </style> </head> <body> <div> show ad </div> <div id="ad" class="ad"> <img src="../img/ad_.jpg"/> </div> </body> <script> //记录次数 var i = 0; //定时器id var timer; onload = function(){ //设置定时器，间隔4秒展示图片 timer = setInterval(showAd,4000); } //展示广告方法 function showAd(){ //展示的次数+1 i++; //若i=3清空由setInterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var adobj = document.getElementById("ad"); //2.修改广告的样式将其显示 adobj.style.display ="block"; //3.2秒之后隐藏，只执行一次 setTimeout(hidAd,2000); } //隐藏广告 function hidAd(){ //1.获取广告 var adobj = document.getElementById("ad"); //2.修改广告的样式将其隐藏 adobj.style.display = "none"; } </script> </html>
操作元素:
document.getElementById("")
操作css属性：
document.getElementById("id").style.属性=“值”
属性：就是css中属性，css属性有“-” 例如：background-color
若有“-” 只需将“-”删除，后面第一个字母变大写即可。
<html> <head> <meta charset="UTF-8"> <title></title> <script> //点击按钮之后，给id为divid的元素添加边框背景色宽高 function btncli(){ //1.获取元素 var obj = document.getElementById("divid"); //2.操作元素 obj.style.backgroundColor = "black"; obj.style.border = "1px solid red"; //添加宽高 obj.style.height = "100px"; obj.style.width = "100px"; } </script> </head> <body> <input type="button" value="将div加上样式" onclick="btncli()"/> <div id="divid" ></div> </body> </html>
注意：
只要是window对象的属性和方法，可以把window省略
window.onload == onload
window.setInterval() == setInterval()
标签：操作 order col 获取元素 put 编写 技术 背景 属性
原文地址：https://www.cnblogs.com/yisennnn/p/13251461.html
