JS實現響應式模板廣告切換,電腦和手機訪問顯示不同廣告,隨著html5網頁技術的日益發展，越來越多的網站都喜歡做成PC和WAP同源碼的響應式模板，這樣的模板有非常大的優勢，代碼不緊湊無需多終端多代碼，同一段代碼可以適應全部終端，但是同時也帶來了一些小的問題，例如如果想投放一段廣告，該廣告只想在PC端顯示而WAP端不顯示，或者只想WAP端顯示PC端不顯示該如何處理呢？今天好好目錄給大家帶來JS實現響應式模板廣告布局，電腦和手機訪問顯示不同廣告內容代碼。

1. <script>

2. var url = location.search;

3. url = url.substr(1);

4. var bs={

5. versions:function(){

6. var u = navigator.userAgent, app = navigator.appVersion;

7. return {

8. trident: u.indexOf('Trident') > -1,

9. presto: u.indexOf('Presto') > -1,

10. webKit: u.indexOf('AppleWebKit') > -1,

11. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

12. mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/),

13. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

14. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

15. iPhone: u.indexOf('iPhone') > -1,

16. iPad: u.indexOf('iPad') > -1

17. };

18. }(),

19. language:(navigator.browserLanguage || navigator.language).toLowerCase()

20. }

21. var flag = true;

22. if(bs.versions.mobile && url!='mobile'){

23. if(bs.versions.android||bs.versions.iPhone||bs.versions.iPad||bs.versions.ios){

24. flag=false;

25. }

26. }

27. if(flag){

28. /*pc廣告代碼*/

29. document.writeln("<script src=\"\/js\/pc廣告代碼.js\"><\/script>");

30. }else{

31. /*移動廣告代碼*/

32. document.writeln("<script language=JavaScript src=\"\/移動廣告代碼.js\"><\/script>");

33. }

34. </script>

    ---

    
    

上面的代碼我們首先把PC廣告代碼放到js里，移動端廣告代碼放到js中，這樣就可以實現不同終端出現不同的廣告了。以上就是JS實現響應式模板廣告布局，電腦和手機訪問顯示不同廣告內容代碼的全部內容，希望對大家的學習和解決疑問有所幫助，也希望大家多多支持好好目錄網。

繼續閱讀：

文章來自：網站目錄，未經允許不得轉載?。?a href="http://www.crownkingfinishing.com/">我愛導航 > 教程收藏 > 建站經驗 » JS實現響應式模板廣告切換,電腦和手機顯示不同