html 隐藏广告代码,Javascript实现关闭广告实现删除广告的效果

1.先写基础的html样式

2.添加后面会用到的css样式

3.现在开始写script样式，我们先把需要获取到的元素获取到

4.然后通过js添加一些css样式

5.现在我们写点击事件

6.我们现在优化一下，再加一个点击事件

7.最终样式

1.先写基础的html样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div1"><div>告诉你件事。我是广告</div><img src="./cha.png" alt=""><button>点我有惊喜</button></div></body>
</html>

2.添加后面会用到的css样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.hover{width: 300px;height: 400px;background-color: red;}#div1{position: relative;}img{position: absolute;top: 10px;left: 260px;}</style></head><body><div id="div1"><div>告诉你件事。我是广告</div><img src="./cha.png" alt=""><button>点我有惊喜</button></div></body>
</html>

3.现在开始写script样式，我们先把需要获取到的元素获取到

<script>var sex1 = document.querySelector('#div1 div')// console.log(sex1)var imgs = document.querySelector('img')var btn = document.querySelector('button')</script>

4.然后通过js添加一些css样式

<script>var sex1 = document.querySelector('#div1 div')// console.log(sex1)var imgs = document.querySelector('img')var btn = document.querySelector('button')sex1.className = 'hover'sex1.style.textAlign = 'center';sex1.style.lineHeight = '400px'btn.style.display = 'none';</script>

5.现在我们写点击事件

 <script>var sex1 = document.querySelector('#div1 div')// console.log(sex1)var imgs = document.querySelector('img')var btn = document.querySelector('button')sex1.className = 'hover'sex1.style.textAlign = 'center';sex1.style.lineHeight = '400px'btn.style.display = 'none';// console.log(sex1)imgs.onclick = function(){sex1.style.display = 'none';this.style.display = 'none';alert('拜了个拜');btn.style.display = 'block';}</script>

这里通过点击事件将sex1.style.display = 'none';和this.style.display = 'none';属性设置好

6.我们现在优化一下，再加一个点击事件

<script>var sex1 = document.querySelector('#div1 div')// console.log(sex1)var imgs = document.querySelector('img')var btn = document.querySelector('button')sex1.className = 'hover'sex1.style.textAlign = 'center';sex1.style.lineHeight = '400px'btn.style.display = 'none';// console.log(sex1)imgs.onclick = function(){sex1.style.display = 'none';this.style.display = 'none';alert('拜了个拜');btn.style.display = 'block';}btn.onclick = function(){sex1.style.display = 'block';imgs.style.display = 'block';btn.style.display = 'none';alert('我又回来了');}</script>

7.最终样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.hover{width: 300px;height: 400px;background-color: red;}#div1{position: relative;}img{position: absolute;top: 10px;left: 260px;}</style></head><body><div id="div1"><div>告诉你件事。我是广告</div><img src="./cha.png" alt=""><button>点我有惊喜</button></div><script>var sex1 = document.querySelector('#div1 div')// console.log(sex1)var imgs = document.querySelector('img')var btn = document.querySelector('button')sex1.className = 'hover'sex1.style.textAlign = 'center';sex1.style.lineHeight = '400px'btn.style.display = 'none';// console.log(sex1)imgs.onclick = function(){sex1.style.display = 'none';this.style.display = 'none';alert('拜了个拜');btn.style.display = 'block';}btn.onclick = function(){sex1.style.display = 'block';imgs.style.display = 'block';btn.style.display = 'none';alert('我又回来了');}</script></body>
</html>

html 隐藏广告代码,Javascript实现关闭广告实现删除广告的效果相关推荐

php 漂浮广告代码,JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广 ...
百度联盟广告代码php,js 投放联盟广告代码可异步加载百度联盟广告
js 投放联盟广告代码一般方法介绍,普通的加载方式容易阻塞页面加载,所以我们使用异步加载百度联盟广告代码,广告js代码就可以异步加载无阻塞如果你有一个网站或者个人博客,想投放百度联盟广告代码以获取收 ...
JS常用脚本+html代码大全+对联广告代码效果大全
JS常用脚本 1. on_contextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border on_co ...
网页广告代码php,【网页广告特效代码】精选5种常用的网页广告特效代码
网站少不了发布一些活动广告,网页中的广告显示效果有很多种,一般是采用JS或者JQ实现多种网页广告显示效果,以下是php中文网精选5种常用的网页广告特效代码推荐给大家下载使用! 效果预览和下载地址:ht ...
CSDN博客放阿里妈妈广告代码的方法
CSDN博客放阿里妈妈广告代码的方法.最近阿里妈妈广告投放平台以其新颖的模式,符合互联网本质的方法,以迅猛发展的势头向传统广告商发起挑战,阿里妈妈的口号是:只要你有网站,只要你有博客,甚至,只要你可以 ...
多个联盟广告调用代码，这样做可以做到打开页面，随机显示一个联盟广告代码
多个联盟广告调用代码,这样做可以做到打开页面,随机显示一个联盟广告代码: 现在很多站长所经营的网站都挂有很多联盟广告,但是同一个广告位不好同时挂好几个联盟广告,下面我来给大家写一点简单JS广告随机显示 ...
用Javascript实现关闭广告案例
用Javascript实现关闭广告案例正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教我们在网页中经常可以看见烦人的小广告,并且广告的旁边通常会有一个特定的位置和图标来关闭这个 ...
JavaScript广告代码大全
站长必看~JS广告代码大全经常上网的朋友可能到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个链接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要 ...
javascript经典广告代码.rar
javascript经典广告代码.rar 转载于:https://www.cnblogs.com/hayden/archive/2009/07/31/1535749.html
html漂浮图片代码关闭,js带关闭按钮的网页漂浮广告代码
html head -="-Type"=";=GBK" 带关闭按钮的网页漂浮广告代码 body divid="img"style=" ...

html 隐藏广告代码,Javascript实现关闭广告实现删除广告的效果

1.先写基础的html样式

2.添加后面会用到的css样式

3.现在开始写script样式，我们先把需要获取到的元素获取到

4.然后通过js添加一些css样式

5.现在我们写点击事件

6.我们现在优化一下，再加一个点击事件

7.最终样式

html 隐藏广告代码,Javascript实现关闭广告实现删除广告的效果相关推荐

最新文章

热门文章