哪个JS大神帮忙写个判断访客的设备显示不同内容，谢谢啦

wandoudicom 2021-02-16 06:24:18

自动判断访客的设备，根据访客的设备输出指定内容。
要求如下
{if 设备=PC}
<button type="button" onclick="dianwo()">我的PC电脑要显示的内容</button>
{else}
//移动设备
<a href="http://www.baidu.com">我是移动设备要显示的内容</a>
{/if}

...全文

1100 28 打赏收藏转发到动态举报

写回复

用AI写文章

28 条回复

切换为时间正序

请发表友善的回复…

发表回复

sha虫剂 2021-03-24

打赏
举报

然后根据我上面的方法看返回值来判断显示什么就行了

sha虫剂 2021-03-24

打赏
举报

///获取系统
const GetSystemType = function GetSystemType() {
  var u = navigator.userAgent.toLowerCase()
  var isAndroid =
    u.indexOf('android') > -1 ||
    u.indexOf('Android') > -1 ||
    u.indexOf('Adr') > -1 //android终端
  var isiOS =
    u.indexOf('iphone') > 0 || u.indexOf('ipad') > 0 || u.indexOf('Mac OS') > 0

  if (isAndroid) {
    return 1
  }
  if (isiOS) {
    return 2
  } else {
    return 3
  }
}

这是封装的方法，返回1是安卓，返回2是ios，返回3是web

Rimifon 2021-03-21

打赏
举报

样式就实现了，没用到 js

wandoudicom 2021-03-21

打赏
举报

什么叫《样式就实现了，没用到 js 》啊？？？

wandoudicom 2021-03-17

打赏
举报

@河南棒小伙你好，这个代码显示好像正常，但是button按钮是无法点击的，就是点不动，点了button按钮没有反应。

河南棒小伙 2021-03-16

打赏
举报

我又给你回复一下，希望你能学习到哪怕一点点东西，看看两种事件的添加方式，以及绑定样式的方法。

河南棒小伙 2021-03-16

打赏
举报

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="app"> </div> <script> function getAgentType() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { return 'mobile' } return 'pc' } function dianwo(){ console.log('dianwo') } window.onload = function(){ let ele const device = getAgentType() if(device == 'pc'){ ele = document.createElement('button') ele.type = 'button' // 设置属性的方式 ele.setAttribute('onclick','dianwo()') // addEventListener添加事件 // ele.addEventListener('click',dianwo) ele.textContent = '我的PC电脑要显示的内容' // ele添加样式 // 字符串方式 ele.style = "color:#666;border:0;background:#fff;font-size:15px;" // style单个样式赋值，需要横杠转驼峰，比如font-size需要用style.fontSize = '15px' } else if (device == 'mobile'){ ele = document.createElement('a') ele.href="http://www.baidu.com" ele.textContent = '我是移动设备要显示的内容' } const app = document.getElementById('app') app.appendChild(ele) } </script> </body> </html>

wandoudicom 2021-03-14

打赏
举报

正确的显示方法应该是： PC端只显示button按钮，不显示A链接。移动端只显示A链接，不显示button按钮。哪位大神再帮帮忙调整下，谢谢谢谢谢谢！！！

wandoudicom 2021-03-14

打赏
举报

display: none;不好搞，要么button和A链接都显示，要么button和A链接都不显示，要怎么办好呢？

wandoudicom 2021-03-14

打赏
举报

<button class="pc" style="color:#666;border:0;background:#fff;font-size:15px;display: none;" type="button" onclick="dianwo()">我的PC电脑要显示的内容</button> <a class="mobile" style="display: none;" href="http://www.baidu.com">我是移动设备要显示的内容</a> 上面这段还是有点小问题，如果将display:none写进去PC端不显示，只有移动端会显示。如果不将display:none写进去，移动端会同时显示button按钮和A链接

尼坤神 2021-03-11

打赏
举报


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
	<button class="pc" style="color:#666;border:0;background:#fff;font-size:15px;display: none;" type="button" onclick="dianwo()">我的PC电脑要显示的内容</button>
	<a class="mobile" style="display: none;" href="http://www.baidu.com">我是移动设备要显示的内容</a>
  </div>
  <script>
    function getAgentType() {
		if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
			return 'mobile';
		}
		return 'pc';
	}
	function dianwo(){
		console.log('dianwo')
	}
	window.onload = function(){
	  const eles = document.getElementsByClassName(getAgentType());
	  Array.from(eles).map(ele => ele.style.display = "block");
	}
  </script>
</body>
</html>

尼坤神 2021-03-11

打赏
举报

ele.style = "color:#666; border:0; background:#fff; font-size:15px;"

wandoudicom 2021-03-10

打赏
举报

ele.onclick = 'dianwo()' ele.addEventListener('click',dianwo) 这2个都不能在button输出onclick="dianwo()" button必须输出如下结果，button才会有效 <button style="color:#666;border:0;background:#fff;font-size:15px;" type="button" onclick="dianwo()">

wandoudicom 2021-03-10

打赏
举报

ele.style.color = '#666' ele.style.background = '#fff' 上面这2个还行 ele.style.font-size = '15px' 怎么下面的就不行了这个问题现在已经解决的差不多了，就剩下一点点小瑕疵了，帮个忙呗

wandoudicom 2021-03-10

打赏
举报

window.onload = function(){ let ele const device = getAgentType() if(device == 'pc'){ ele = document.createElement('button') ele.type = 'button' ele.addEventListener('click',dianwo) ele.textContent = '我的PC电脑要显示的内容' 请问怎么给button按钮写样式啊，上面代码虽然是可以用，但button样式不能自定义，帮忙写下按钮显示样式，写好立即结贴。帮忙帮到底，送佛送到西，万分感谢。以下是我的button按钮样式 <li><button style="color:#666;border:0;background:#fff;font-size:15px;" type="button" onclick="dianwo()">我是PC端显示的button按钮</button></li> 谢谢谢谢谢谢

河南棒小伙 2021-03-09

打赏
举报

引用 12 楼 wandoudicom 的回复:

[quote=引用 11 楼河南棒小伙的回复:]这2楼说的很明白了，通过userAgent就能判断设备类型了，然后根据不同设备类型，通过代码生成button或者a，使用document.createElement，然后将生成的元素添加到指定位置就行了啊,指定元素假设id是app, const app = document.getElementById('app');然后app.appendChild(动态生成的元素)

不懂呀，帮忙写个看看，能用我给你结贴。谢谢呀[/quote] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="app"> </div> <script> function getAgentType() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { return 'mobile' } return 'pc' } function dianwo(){ console.log('dianwo') } window.onload = function(){ let ele const device = getAgentType() if(device == 'pc'){ ele = document.createElement('button') ele.type = 'button' ele.addEventListener('click',dianwo) ele.textContent = '我的PC电脑要显示的内容' } else if (device == 'mobile'){ ele = document.createElement('a') ele.href="http://www.baidu.com" ele.textContent = '我是移动设备要显示的内容' } const app = document.getElementById('app') app.appendChild(ele) } </script> </body> </html> 里面的app换成你的id就行了

wandoudicom 2021-03-07

打赏
举报

引用 11 楼河南棒小伙的回复:

这2楼说的很明白了，通过userAgent就能判断设备类型了，然后根据不同设备类型，通过代码生成button或者a，使用document.createElement，然后将生成的元素添加到指定位置就行了啊,指定元素假设id是app, const app = document.getElementById('app');然后app.appendChild(动态生成的元素)

不懂呀，帮忙写个看看，能用我给你结贴。谢谢呀

河南棒小伙 2021-03-05

打赏
举报

这2楼说的很明白了，通过userAgent就能判断设备类型了，然后根据不同设备类型，通过代码生成button或者a，使用document.createElement，然后将生成的元素添加到指定位置就行了啊,指定元素假设id是app, const app = document.getElementById('app');然后app.appendChild(动态生成的元素)

wandoudicom 2021-03-05