欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码
这篇文章主要为大家详细介绍了JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

随着html5网页技术的日益发展,越来越多的网站都喜欢做成PC和WAP同源码的响应式模板,这样的模板有非常大的优势,代码不紧凑无需多终端多代码,同一段代码可以适应全部终端,但是同时也带来了一些小的问题,例如如果想投放一段广告,该广告只想在PC端显示而WAP端不显示,或者只想WAP端显示PC端不显示该如何处理呢?前面361模板给大家介绍过CSS的一个这样的应用《如何用CSS实现PC端显示 手机端隐藏代码效果》,今天361模板给大家带来JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码

代码如下:

<script>
var url = location.search;
url = url.substr(1);
var bs={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, 
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1, 
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, 
mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), 
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), 
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1         
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
} 
var flag = true;
if(bs.versions.mobile && url!='mobile'){
if(bs.versions.android||bs.versions.iPhone||bs.versions.iPad||bs.versions.ios){
flag=false;
}
}
if(flag){
/*pc广告代码*/
document.writeln("<script src=\"\/js\/1.js\"><\/script>");
}else{
/*移动广告代码*/
document.writeln("<script language=JavaScript src=\"\/222.js\"><\/script>");
}</script>

上面的代码我们首先把PC广告代码放到1.js里,移动端广告代码放到222.js中,这样就可以实现不同终端出现不同的广告了。

以上就是JS实现响应式模板广告布局 电脑和手机访问显示不同广告内容代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: JS 响应式 不同广告

上一篇JS禁止右键代码

下一篇CSS3画一个半圆的方法 CSS半圆代码

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在