通过Web网页控制开发板LED灯
描述
Web网页点灯一
接下来将介绍如何通过Web网页来控制开发板上的LED灯，本文只是在网页上实现功能，并无交互功能，与开发板的交互功能实现将在《Web网页点灯二》中介绍
1. HTML实现
利用HTML + CSS + JavaScript开发技术在网页上实现点击开关，LED灯会变色的功能
"Content-Type" content="text/html; charset=utf-8" />
web 点灯<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>title>
<script defer=<span class="hljs-string">"defer"</span>>
<span class="hljs-function">function <span class="hljs-title">ledSwitch</span><span class="hljs-params">(string)</span> </span>{
<span class="hljs-comment">//该函数的功能是将string字符串赋值给id=txtState的背景颜色</span>
document.getElementById(<span class="hljs-string">"txtState"</span>).style.backgroundColor = string;
}
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>script>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>head>
<body style=<span class="hljs-string">"background-color:gray"</span>>
<font size=<span class="hljs-string">"12"</span> color=<span class="hljs-string">"yellow"</span>>
<b>
<div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"text"</span> style=<span class="hljs-string">" text-align:center;"</span>><big>Web 点灯<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>big><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>div>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>b>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>font>
<br> <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>br>
<div align=<span class="hljs-string">"center"</span> id=<span class="hljs-string">"txtState"</span>style=<span class="hljs-string">"margin:auto;width:160px;height:160px;border-radius:50%;background:white;"</span>><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>div>
<br> <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>br>
<div style=<span class="hljs-string">" text-align:center;"</span>>
<input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"打开"</span> style=<span class="hljs-string">"width:160px;height:80px;background:green;"</span> onclick=<span class="hljs-string">"ledSwitch('green')"</span> />
<input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"关闭"</span> style=<span class="hljs-string">"width:160px;height:80px;background:red;"</span> onclick=<span class="hljs-string">"ledSwitch('red')"</span> />
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>div>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>body>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>html>
<span class="vditor-linenumber__rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>用浏览器打开该文件，显示的界面如下图示，点击打开按钮LED颜色变绿，点击关闭按钮LED颜色变红</p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgZomRHetCAWZSJAABcWRIzrjw158.jpg' alt='javascript' /></p>
<p><strong>2. 交互功能</strong></p>
<p>利用HTML + CSS + JavaScript +AJAX开发技术实现网页与服务器间的交互功能。网页上点击开关，通过AJAX技术向服务器发送请求，再将服务器返回的响应传入到JavaScript函数中，以实现网页与服务器之间的交互</p>
<pre><code style="max-height:1000px;" class="hljs java vditor-linenumber"><html>
<head>
<meta http-equiv=<span class="hljs-string">"Content-Type"</span> content=<span class="hljs-string">"text/html; charset=utf-8"</span> />
<title>web 点灯<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>title>
<script defer=<span class="hljs-string">"defer"</span>>
<span class="hljs-function">function <span class="hljs-title">ledSwitch</span><span class="hljs-params">(string)</span> </span>{
<span class="hljs-keyword">var</span> xmlhttp;
<span class="hljs-keyword">if</span> (window.XMLHttpRequest) {
xmlhttp = <span class="hljs-keyword">new</span> XMLHttpRequest();
} <span class="hljs-keyword">else</span> {
xmlhttp = <span class="hljs-keyword">new</span> ActiveXObject(<span class="hljs-string">"Microsoft.XMLHTTP"</span>);
}
xmlhttp.onreadystatechange = function () {
<span class="hljs-keyword">if</span> (xmlhttp.readyState == <span class="hljs-number">4</span> && xmlhttp.status == <span class="hljs-number">200</span>) {
document.getElementById(<span class="hljs-string">"txtState"</span>).style.backgroundColor = xmlhttp.responseText;
console.log(xmlhttp.responseText);
}
};
xmlhttp.open(<span class="hljs-string">"GET"</span>, string, <span class="hljs-keyword">true</span>);
xmlhttp.send();
}
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>script>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>head>
<body style=<span class="hljs-string">"background-color:gray"</span>>
<font size=<span class="hljs-string">"12"</span> color=<span class="hljs-string">"yellow"</span>>
<b>
<div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"text"</span> style=<span class="hljs-string">" text-align:center;"</span>><big>Web 点灯<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>big><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>div>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>b>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>font>
<br> <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>br>
<div align=<span class="hljs-string">"center"</span> id=<span class="hljs-string">"txtState"</span>style=<span class="hljs-string">"margin:auto;width:160px;height:160px;border-radius:50%;background:white;"</span>><span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>div>
<br> <span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>br>
<div style=<span class="hljs-string">" text-align:center;"</span>>
<input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"打开"</span> style=<span class="hljs-string">"width:160px;height:80px;background:green;"</span> onclick=<span class="hljs-string">"ledSwitch('on')"</span> />
<input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"关闭"</span> style=<span class="hljs-string">"width:160px;height:80px;background:red;"</span> onclick=<span class="hljs-string">"ledSwitch('off')"</span> />
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>div>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>body>
<span <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"hljs-name"</span>html>
<span class="vditor-linenumber__rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>EasyWebServer网站服务器：是一款小型的Web服务器软件。它可以很快速地在您的PC上创建一个站点，而无需IIS等庞大复杂的工具</p>
<p>EasyWebServer的使用方法如下图示：</p>
<ul><li>打开EasyWebServer</li>
<li>设置主目录和端口号</li>
<li>在主目录下放置相关文件</li>
<li>浏览器中输入127.0.0.1即可访问该站点</li>
</ul><p><img src='//file1.elecfans.com/web2/M00/82/40/wKgaomRHetCAEmxLAAKRreKCgjA744.jpg' alt='javascript' /></p>
<p>打开 index.html 网页，使用Chrome浏览器的开发者工具，即可观察到网页与服务器之间的交互过程</p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgaomRHetCAdWO_AAFpQ1Q1r9s863.jpg' alt='javascript' /></p>
<p><strong>3. 抓包分析</strong></p>
<p>HTTP首部字段结构以及4种HTTP首部字段类型如下图示：</p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgaomRHetCAKSbLAATByLReb9M378.jpg' alt='javascript' /></p>
<p>请求html的http报文：请求报文和响应报文如下图示</p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgZomRHetCAVho5AAIcuWJTcjw819.jpg' alt='javascript' /></p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgZomRHetCAUYqJAAFgk5DmkdM274.jpg' alt='javascript' /></p>
<p>打开命令的http报文：on 命令的请求和响应报文如下图示</p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgZomRHetCAX1VrAAHNslm7Ptk055.jpg' alt='javascript' /></p>
<p>关闭命令的http报文：off 命令的请求和响应报文如下图示</p>
<p><img src='//file1.elecfans.com/web2/M00/82/40/wKgaomRHetCAPdiFAAHUIL2A5fg216.jpg' alt='javascript' /></p>
</div> <!-- copy 原来页面的推送 -->
<script type="application/ld+json">
{
"@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld",
"@id": "//m.obk20.com/article/2067645.html",
"title": "通过Web网页控制开发板LED灯",
"images": [
"//www.obk20.com//file1.elecfans.com/web2/M00/82/40/wKgZomRHetCAWZSJAABcWRIzrjw158.jpg"
],
"description": "接下来将介绍如何通过Web网页来控制开发板上的LED灯，本文只是在网页上实现功能，并无交互功能，与开发板的交互功能实现将在《Web网页点灯二》中介绍",
"pubDate": "2023-04-25T15:05:29"
}
</script>
<!-- end copy 原来页面的推送 -->
</div>
<!-- <a href="javascript:" target="_blank"></a> -->
<!-- <a href="//m.obk20.com/www/app/download.html" class="open_app_arc baidu_click_tongji2 inAppHide" target="_blank">打开APP阅读更多精彩内容</a> -->
<span class="open_app_arc baidu_click_tongji2 downAppBtn inAppHide">打开APP阅读更多精彩内容</span>
<div class="see_more_arc hide">
<div class="arrow_more show_more">
<i></i>
<i></i>
</div>
<button class="read_more">点击阅读全文</button>
</div>
</div>
</div>
<!--声明-无论是否原创都显示此声明-->
<div class="statement">
声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。
<a class="complaint handleJumpBy" href="//m.obk20.com/about/tousu.html" target="_self">举报投诉</a>
</div>
<!--评论-->
<div class="arc_comment comment">
</div>
<!--查看电子发烧友网-->
<div class="openx-hero inAppHide" style="text-align: center;">
<div class="advertWrap">
<a href="" target="_blank">
<img src="">
</a>
</div>
</div>
<div class="rela_article">
<div class="rela_article_title flex">
<ul class="tab_lis flex">
<li><span>相关推荐</span></li>
<li><a href="//m.obk20.com/tags/led灯.html" target="_self" class="handleJumpBy advertTagId" data-id="599">led灯</a></li><li><a href="//m.obk20.com/tags/Web.html" target="_self" class="handleJumpBy advertTagId" data-id="1401">Web</a></li><li><a href="//m.obk20.com/tags/开发板.html" target="_self" class="handleJumpBy advertTagId" data-id="15453">开发板</a></li><li><a href="/tags/javascript.html" target="_self" class="handleJumpBy advertTagId" data-id="22884">javascript</a></li><li><a href="//m.obk20.com/tags/网页.html" target="_self" class="handleJumpBy advertTagId" data-id="23361">网页</a></li> </ul>
</div>
<ul class="rela_article_content">
<li
>
<a href="//m.obk20.com/www/soft/33/2016/20161026442245.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">让<b class='flag-m-1'>开发板</b>上的<b class='flag-m-1'>LED</b><b class='flag-m-1'>灯</b>闪烁起来吧</div>
<div class="time_and_hot flex">
<span>2016-11-11</span> <span>962</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_568974_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">[嵌入式<b class='flag-m-1'>开发板</b>] iTOP-4412实现<b class='flag-m-1'>web</b><b class='flag-m-1'>控制</b><b class='flag-m-1'>led</b></div>
<div class="time_and_hot flex">
<span>2016-03-14</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_922690_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">【EVB-335X-II试用体验】之基于boa+cgi在EVB-335X-II<b class='flag-m-1'>开发板</b>上实现<b class='flag-m-1'>web</b>服务</div>
<div class="time_and_hot flex">
<span>2016-07-31</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_1695022_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">用手机遥控<b class='flag-m-1'>开发板</b>上的<b class='flag-m-1'>LED</b><b class='flag-m-1'>灯</b></div>
<div class="time_and_hot flex">
<span>2018-12-04</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_2130619_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">怎样<b class='flag-m-1'>通过</b>FPGA去点亮<b class='flag-m-1'>开发板</b>上的<b class='flag-m-1'>LED</b><b class='flag-m-1'>灯</b>？</div>
<div class="time_and_hot flex">
<span>2021-07-26</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_2210761_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">如何<b class='flag-m-1'>通过</b><b class='flag-m-1'>开发板</b>上的KEY0<b class='flag-m-1'>控制</b>指示<b class='flag-m-1'>灯</b><b class='flag-m-1'>LED</b>0的亮灭？</div>
<div class="time_and_hot flex">
<span>2021-12-03</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_2235542_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct"><b class='flag-m-1'>开发板</b><b class='flag-m-1'>LED</b><b class='flag-m-1'>灯</b><b class='flag-m-1'>控制</b>威廉希尔官方网站
分享</div>
<div class="time_and_hot flex">
<span>2022-01-06</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_2252082_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">如何在局域网里<b class='flag-m-1'>通过</b><b class='flag-m-1'>网页</b>来<b class='flag-m-1'>控制</b><b class='flag-m-1'>led</b><b class='flag-m-1'>灯</b>呢</div>
<div class="time_and_hot flex">
<span>2022-02-15</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/bbs/jishu_2320030_1_1.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">【触觉智能 Purple Pi<b class='flag-m-1'>开发板</b>试用】+板载<b class='flag-m-1'>LED</b><b class='flag-m-1'>灯</b>的<b class='flag-m-1'>控制</b></div>
<div class="time_and_hot flex">
<span>2022-12-04</span> <span>0</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/www/emb/danpianji/20180501670496.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">如何<b class='flag-m-1'>通过</b>W5500<b class='flag-m-1'>开发板</b><b class='flag-m-1'>控制</b>外接<b class='flag-m-1'>灯</b>带的亮度</div>
<div class="time_and_hot flex">
<span>2018-05-15</span> <span>2551</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/www/soft/33/2019/20190423918264.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">使用51单片机<b class='flag-m-1'>开发板</b><b class='flag-m-1'>控制</b><b class='flag-m-1'>LED</b>闪烁<b class='flag-m-1'>灯</b>的实验和程序免费下载</div>
<div class="time_and_hot flex">
<span>2019-08-09</span> <span>1164</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/www/d/1309553.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">基于Arduino Nano<b class='flag-m-1'>开发板</b>的<b class='flag-m-1'>LED</b>滚动条</div>
<div class="time_and_hot flex">
<span>2020-12-13</span> <span>3487</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/www/soft/33/2021/202112031751706.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">STM32F103_IOT物联网<b class='flag-m-1'>开发板</b>学习专栏3_STM32F103<b class='flag-m-1'>控制</b><b class='flag-m-1'>LED</b><b class='flag-m-1'>灯</b></div>
<div class="time_and_hot flex">
<span>2021-12-03</span> <span>657</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/www/soft/33/2021/202112061753609.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">ESP8266+<b class='flag-m-1'>网页</b><b class='flag-m-1'>控制</b><b class='flag-m-1'>LED</b></div>
<div class="time_and_hot flex">
<span>2021-12-06</span> <span>1258</span> </div>
</a>
</li><li
>
<a href="//m.obk20.com/www/soft/Mec/2023/202310202274372.html" target="_self" class="handleJumpBy">
<div class="rela_article_ct">利用onenet平台远程<b class='flag-m-1'>控制</b><b class='flag-m-1'>开发板</b>的<b class='flag-m-1'>LED</b> <b class='flag-m-1'>灯</b></div>
<div class="time_and_hot flex">
<span>2023-10-20</span> <span>413</span> </div>
</a>
</li> </ul>
</div>
<div class="go_elecfans ad-demo inAppHide"></div>
<!-- 全部评论 -->
<div class="all-comment comment">
<div class="all-comment-content">
<div class="all-com-close flex">
<p class="ph">全部<i>0</i>条评论</p>
<span class="close_com"></span>
<!-- <span class="edit_com">写评论</span> -->
</div>
<div class="all_words comment_content" id="all_words">
<div id="scroller"></div>
</div>
<div class="all_no_comment" class="hide">
<img src="https://staticm.obk20.com/images/newdetail/all_no_bg.png" alt="">
<p>快来发表一下你的评论吧 !</p>
</div>
</div>
<div class="ft">
<input type="text" placeholder="发评论" maxlength="10000">
<button>发送</button>
</div>
</div>
<input type="hidden" id="cover_desc" value="Web网页点灯一 接下来将介绍如何通过Web网页来控制开发板上的LED灯，本文只是在网页上实现功能，并无交互功能，与开发板的交互功能实现将在《Web网页点灯二》中介绍 1. HTML实现 利用HTML + CSS + JavaScript开发技术在网页上实现点击开关，LED灯会变色的功能 web 点灯 function ledSwitch(string) { //该函数的功能是将string字符串">
<input type="hidden" id="current_url" value="//m.obk20.com/article/2067645.html">
<input type="hidden" id="title" value="通过Web网页控制开发板LED灯">
<input type="hidden" id="pc_domain" value="//www.obk20.com">
<input type="hidden" id="aid" value="2067645">
<input type="hidden" id="pid" value="">
<!-- 文章作者id -->
<input type="hidden" id="column_uid" value="4638517">
<!-- 企业号文章id -->
<input type="hidden" id="evip_article_id" value="">
<!-- 是企业号文章 store_flag =15 -->
<input type="hidden" id="store_flag" value="0">
<input type="hidden" id="evip_type" value="0">
<!-- 是企业号文章 store_flag =15 -->
<input type="hidden" id="evip_id" value="0">
<!--打开APP底部悬浮按钮-->
<!-- <div class="open_app_btn">打开APP</div> -->
<footer class="art_footer flex">
<input type="text" placeholder="发评论" maxlength="10000" id="commentTxt">
<div class="flex">
<span class="ft_comment" data-com="发评论">
<i class="sups"></i>
</span>
<span class="ft_give_up ">
<!-- -->
</span>
<span class="ft_star ">
<!-- -->
</span>
<span class="ft_share btn-createCover"></span>
</div>
</footer>
<div class="login-reg-fixed inAppHide" data-uid="0">
<a href="//m.obk20.com/login.html" class="login-reg-btn">
登录/注册
</a> </div>
<!--二维码-->
<img src="" alt="" id="qrious" style="display: none;">
<!--老的底部 隐藏 -->
<div class="new-footer inAppHide">
<div class="flex-center"><a href="//m.obk20.com/www/app/download.html" target="_blank">下载APP</a></div>
<div class="flex-center">
<a href="//m.obk20.com/login.html" class="login-reg-btn">
登录注册
</a>
<span class="line">|</span><a href="//m.obk20.com/about/tousu.html">投诉反馈</a><span class="line">|</span><a href="https://author.baidu.com/home/1563378682824805?from=dusite_artdetailh5">电子发烧友网</a>
</div>
<div class="flex-center">© 2021 elecfans.com</div>
<div class="flex-center"><a href="https://beian.miit.gov.cn/">湘ICP备2023018690号</a></div>
<div><input type="hidden" value="0" name="arc_relate_vid"></div>
</div>
</div>
<!--微信分享图片地址-->
<input type="hidden" id="shareWxImg" value="//www.obk20.com//file1.elecfans.com/web2/M00/82/40/wKgZomRHetCAWZSJAABcWRIzrjw158.jpg">
<!--微信分享图片地址-->
<script>
/**
* 判断是否微信浏览器
* @return {Boolean} [description]
*/
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
$(function () {
$(window).scroll(function (e) {
var window_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var window_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
if (document.body.scrollTop + document.documentElement.scrollTop > window_h * 2) {
$('.go_top').show();
}
else {
$('.go_top').hide();
}
});
$('.go_top').on('click', function () {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
return false;
});
// 添加广告链接的Google Analytics事件跟踪
$('a').on('click', function () {
var href = $(this).attr('href');
if (href) {
var bannerArr = href.match(/__bannerid=(\d+)__/);
var zoneidArr = href.match(/__zoneid=(\d+)__/);
if ((bannerArr instanceof Array) && bannerArr.length == 2) {
var bannerid = bannerArr[1];
var zoneid = zoneidArr[1];
ga('send', 'event', 'mElecfansAd', 'click', 'zoneid:' + zoneid + ',bannerid: ' + bannerid, 1);
gtag('event', 'mElecfansAd', { 'zoneid': zoneid, 'bannerid': 'bannerid', 'describe': 'click' });
}
}
});
// 微信浏览器底部显示关注微信
/* if (is_weixin()) {
$('#foot-fixed').hide();
$('#foot-fixed-wx').show();
}*/
$('#foot-img-wx-small').click(function () {
$('#body-wx-big img').toggle();
});
});
</script>
<!-- 是否完善资料代码 s -->
<div class="perfect_infomation_tip">
<span class="no_tip_day3">×</span>
<div class="perfect_infomation_tip_box go_perfect_btn">
<span class="tip_jifen_text">20</span>
<div>
<img class="tip_jifen" src="https://staticm.obk20.com/images/tip_jifen.png">
</div>
<div>
完善资料，<br>赚取积分
</div>
</div>
</div>
<!-- 是否完善资料代码 e -->
<script src="https://staticm.obk20.com/weixinPrize/js/layer_mobile/layer.js"></script>
<script src="https://staticm.obk20.com/organizing/js/organizing.js?20230825" type="text/javascript" ></script>
<script src="https://staticm.obk20.com/hqAdvert.js?v2" type="text/javascript" ></script>
<script src="https://staticm.obk20.com/xgPlayer.js" type="text/javascript" ></script>
<script>
$(function(){
var scrollTimer
$(window).on("scroll",function(){
//滚动的时候悬浮缩回去 否则正常展示
$(".perfect_infomation_tip_box").css("right","0px")
clearTimeout(scrollTimer);
scrollTimer=setTimeout(function(){
$(".perfect_infomation_tip_box").css("right"," -70px");
},300)
})
// 用户下载附件判断登录
$("a[data-annex]").click(function(){
if($("#uid").attr("data-uid")== "0" || !$("#uid").attr("data-uid")){
window.location.href="/login.html"
}else{
var down_id= $(this).attr("data-annex");
var down_href= $('#'+down_id).val();
window.open(down_href);
}
return false
})
/* //判断当天是否弹出手机验证如果弹出这
if(typeof isVerification_new === "function"){
if(window.localStorage.getItem("m_verification")!==newDate_current()){
//弹出是否手机验证
//弹出是否手机验证
isVerification_new(function(){
//完成手机号验证 后判断是否完善资料
isPerfectInfo_phone($)
})
}
}*/
});
(function () {
//百度推广
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
//add sunjinliang 2021.1.11 copy 原来的统计
var user_uname = $('input[name="column-type-name"]').val();
//发烧友增加百度统计自定义变量统计单一用户数据访问量
var _hmt = _hmt || [];
if (_hmt && user_uname == '发烧友学院') {
_hmt.push(['_setCustomVar', 1, 'ChannelID', '发烧友学院', 3]);
}
var google_title = user_uname;
ga('send', { hitType: 'pageview', title: google_title, dimension0: 'Mobile' });
gtag('event', 'pageview', { 'title': google_title, 'dimension0': 'Mobile', 'describe': 'pageview' });
$(".baidu_click_tongji1").click(function(){
sendGA("头部")
})
$(".baidu_click_tongji2").click(function(){
sendGA("中部")
})
$(".baidu_click_tongji3").click(function(){
sendGA("尾部")
})
function sendGA(content){
//向百度发送数据
if(typeof(_hmt)!="undefined"){
//时间分类===_trackEvent 详情专题页面==zt_detail 点击事件==='click' 哪一个部分点击（content）==== 头部中部尾部
_hmt.push(['_trackEvent', "zt_detail", 'click', content]);
}
}
})();
</script>
<script src="https://staticm.obk20.com/artilePartjs.js?v=20230803160700" type="text/javascript" ></script>
</body>
</html>