极客工坊

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 576|回复: 0
打印 上一主题 下一主题

HTML+ESP8266mini控制用电器

[复制链接]
188bet www.188bet.com bwin 平博 unibet 明升 188bet uk Ladbrokes 德赢vwin 188bet m88.com w88 平博88 uedbet体育 188bet 188bet 威廉希尔 明升体育app 平博88 M88 Games vwin德赢 uedbet官网 bodog fun88 188bet
跳转到指定楼层
1#
发表于 2018-12-25 15:40:38 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 董董soul 于 2019-2-13 13:46 编辑

模块链接:D1 MINI


一、淘宝输入D1 MINI,下单。
二、D1mini到手之后
2.1、打开arduino IDE安装D1mini板子
详细待写
2.2、入门简单的HTML网页布局
详细待写
2.3、修改D1mini例程,把写好的HTML转化之后放入arduino程序里
详细待写



完整网页程序:新建TXT文档,复制到TXT,另存为文件名.HTML 双击打开即可看到完整的网页。
  1. <!--2018年8月20日23:20:38
  2.         记录:能在D1mini上正常运行,而2560内存不足。
  3. -->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8"><!--字符集 -->
  8. <title>LED WIFI控制</title><!--网页标签显示-->

  9. <!--注意:style的注释格式是/*注释内容*/-->
  10. <!--style 元素位于 head 部分中-->
  11. <!--style样式-->
  12. <style type="text/css">
  13.         *{                               
  14.                                 margin: 0px;  /*页边距为 0*/
  15.                                 padding: 0px;
  16.                 }
  17.         body{
  18.                 /*设置主显示背景颜色*/
  19.                 background-color: #F0FFFF;
  20.         
  21.         }
  22.         .wrapper{
  23.                                 width: 100%;
  24.                                 height:672px;
  25.                                 /*background-color: antiquewhite;*/
  26.                                 margin: 0px auto;/*上 下 左右 */
  27.                                  
  28.                         }
  29.         
  30.         .heading                       /*页眉*/
  31.                 {
  32.                    width: 100%;                        /*宽度*/
  33.                    height: 90px;                        /*高度*/
  34.                    background-color:#666699;   /*背景颜色*/
  35.                   
  36.                    /*padding-top:50px;*/       /*内边距*/
  37.                   
  38.             }
  39.            .heading_title{
  40.                            font-size: 30px;
  41.                                 font-family: "arial, helvetica, sans-serif";
  42.                                 color:white;              /*文字颜色*/
  43.                         text-align:center;        /*文字位置水平巨宗*/
  44.                        line-height: 90px;         /*垂直居中  行距应设为和height一样*/
  45.            }
  46.             .nav                          /*左边导航器*/
  47.                 {
  48.                    background-color:#FFFFFF;
  49.                    height:460px;  
  50.                    width:200px;
  51.                    float:left;                                /*浮动在左边*/
  52.                    /*padding-right: 25px;*/
  53.                   
  54.             }
  55.             /*列表*/
  56.             .nav ul{
  57.                     list-style-type: none;     /*去掉项前的小黑点*/
  58.                    
  59.             }
  60.             /*小列表*/
  61.             .nav li{
  62.                     width: 194px;                                /*每一个列表的宽度*/
  63.                         height: 50px;
  64.                     /*border: 3px solid red; */     /*列的外边框*/
  65.                     margin-bottom: 5px;         /*块与块之间的上下间距*/
  66.                         text-align:center;                         /*设置文字水平集中*/
  67.                         line-height: 50px;                        /*设置文字垂直集中*/
  68.                        
  69.             }
  70.             /*单独设置每个列表的颜色*/
  71.             .nav li:nth-child(1){
  72.                     background-color:powderblue;
  73.                     }
  74.             .nav li:nth-child(2){
  75.                     background-color: #39CAD1;
  76.                     }
  77.             .nav li:nth-child(3){
  78.                     background-color: #39ADD1;
  79.             }
  80.                
  81.         .nav a:link, a:visited{
  82.                 width: 194px;                                /*每一个变色列表的宽度*/
  83.                         height: 50px;
  84.                         /*border: 1px solid aquamarine;*/  /*链接外边框*/
  85.                         display: inline-block;                                 /*还不知道是什么功能*/
  86.                         font-weight: bold;                                         /*粗体文字*/
  87.                         /*background-color: #D9D9D9;*/
  88.                         color:      #fff;/*链接初始颜色 */
  89.                        
  90.                         /*padding: 50px;*/
  91.                                
  92.                         text-decoration: none;                /*去掉链接下划线*/
  93.                         }
  94.                         /*鼠标悬浮在链接上面会变色*/
  95.                 .nav a:hover,a:active{
  96.                                 width: 194px;                                /*每一个变色列表的宽度*/
  97.                                 height: 50px;
  98.                                 color: blue;               /*悬浮选中的链接颜色*/
  99.                                 background-color: #F17022; /*悬浮选中的背景颜色*/
  100.                                
  101.                         }  
  102.                 .nav_img img{
  103.                         width: 194px;          /*宽度 */
  104.                     height: 194px;         /*高度*/
  105.                 }
  106.                
  107.                 .nav-text p{
  108.                         width: 180px;/*形状长度*/
  109.                     height: 30px;
  110.                         line-height: 30px;                        /*设置文字垂直集中*/
  111.                         margin-top: 30px;/*兄弟间 :外部顶部距离*/
  112.                         border: 10px groove wheat;/*外边框  类型  颜色*/
  113.                         font-size: 30px;/*字体大小*/
  114.                         font-family: "arial, helvetica, sans-serif";/*字体*/
  115.                         border-radius: 5px;         /*标签显示圆角*/
  116.                         -webkit-animation: nav-cart 5s alternate-reverse 2s infinite ;/*让其无限闪烁发光*/

  117.                    
  118.                     background-color: ghostwhite;/*背景颜色*/
  119.                    
  120.                     /*text-decoration: blink;*/
  121.                    
  122.                 }       
  123.                 .nav-text p:hover{
  124.                         background-color: yellowgreen;
  125.                 }                          
  126.         
  127.             @-webkit-keyframes nav-cart{
  128.                     from{
  129.                             box-shadow: 0px 1px 1px coral;  /*阴影颜色渐变*/
  130.                             transform: rotateX(0);                        /*初始状态 ;rotatex为绕x轴翻转   */
  131.                     }
  132.                     to{
  133.                             box-shadow: 0px 10px 10px #0000FF;
  134.                             transform: rotateX(360deg);
  135.                     }
  136.             }
  137.             .body{
  138.                                 padding-top: 20px;
  139.                                 height: auto;
  140.                                 width: auto;
  141.                         }
  142.                 .body-butt{
  143.                                  margin-left: 200px;
  144.                                  padding-top: 20px;/*内部顶部距离*/
  145.                              
  146.                              width: 500px;
  147.                              height: auto;
  148.                                  
  149.                          border: 3px dotted wheat;   /*边框线*/  
  150.                 }
  151.                 .body-butt-led li{
  152.                         display: inline;                 /*横向*/
  153.                         padding-left: 19px;
  154.                         /*border: 3px dotted wheat;*//*边框线  用于调试布局方便观察*/
  155.                 }
  156.                 .body-butt-no li{
  157.                         display: inline;                 /*横向*/
  158.                         padding-left: 20px;/*两行之间距离*/
  159.                         /*padding-bottom: 20px;*/

  160.                 }       
  161.                 .body-butt-off li{                                /*两个列表都为横向 且横向间距为20px*/
  162.                         display: inline;                 /*横向*/
  163.                         padding-left: 20px;
  164.                        
  165.                         /*border: 3px dotted wheat; *//*边框线 调试布局用*/
  166.                 }/*把两行按钮撑开*/
  167.                 .body-butt-no{
  168.                         margin-bottom: 20px;/*no与off是"兄弟"*/
  169.                 }
  170.                 .body-but-pwm{
  171.                         margin-top: 20px;
  172.                        
  173.                         padding-left: 20px;
  174.                 }
  175.                 .body-but-pwm ul{
  176.                         list-style-type: none;/*去掉前面的黑点*/
  177.                 }
  178.                 .body-but-pwm li{
  179.                         padding-bottom: 20px;
  180.                 }
  181.         .footer                     /*底部信息*/
  182.                 {
  183.                    width: 100%;
  184.                    height: 100px;
  185.                    background-color:#666699;
  186.                    /*color:white;*//*里面的信息全白*/
  187.                    clear:both;
  188.             }
  189.             .footer p{
  190.                     text-align: center;/*文字位置*/
  191.                     padding:2px;/*内部间距*/
  192.                    
  193.             }
  194.             .footer-addre{
  195.                     text-align: center;/*让文字居中显示*/
  196.             }
  197.              #time_xianshi
  198.              {  
  199.                      float:right;       
  200.                         /*width:200px;        
  201.                         height:60px;*/
  202.                         /*background-color:#00FF66;*/
  203.                        
  204.               }
  205.             .b                                         /*时间显示样式*/
  206.                 {
  207.                 font-size:30px;
  208.                 /*color:#FF0000;*/
  209.                 color: white;
  210.                 text-align:center;
  211.                 padding:20px;
  212.                 font-weight:bolder;
  213.                 display:block;
  214.                 margin-top:10px;
  215.                 }       

  216. </style>
  217. </head>

  218. <body><!--背景颜色-->
  219.     <!--示例:ul.menu>li*6>a[href="#"]{HTML}-->
  220.     <div class="container"><!--容器-->
  221.       <div class="wrapper">
  222.               <div class="heading">
  223.                       <div id="time_xianshi"></div>                        <!--时间显示背景-->
  224.                        <div class="heading_title"><!--顶部大标题-->
  225.                                ESP8266
  226.                      
  227.                        </div>
  228.               </div>
  229.               <div class="nav">
  230.                        <ul>
  231.                                <li><a href="#">PC控制</a></li>
  232.                                <li><a href="#">APP控制</a></li>
  233.                                <li><a href="#">远程控制</a></li>
  234.                        </ul>
  235.                        <div class="nav_img">
  236.                                <img src="https://i01piccdn.sogoucdn.com/065a17404c9ee7bc" alt="" />
  237.                        </div>
  238.                        <div class="nav-text">
  239.                                <p>嗨,你好呀!</p>
  240.                        </div>
  241.               </div>
  242.               <div class="body">
  243.                                     <div class="body_title">
  244.                                              <h3>四路灯光独立控制</h3>
  245.                                              <p>哪里不亮点哪里</p>
  246.                                     </div>
  247.                                         <hr /><hr /><!--两条水平分割线        -->       
  248.                                         <div class="body-butt">
  249.                                             <div class="body-butt-led">
  250.                                                     <ul>
  251.                                                                   <li>大厅</li>
  252.                                                                   <li>大门</li>
  253.                                                                   <li>院子</li>
  254.                                                                   <li>厨房</li>
  255.                                                           </ul>       
  256.                                             </div>
  257.                                                     
  258.                                                   <div class="body-butt-no">
  259.                                                           <!--快捷键-li*5>a[href="on"]>input[type="button"value="开灯"]-->
  260.                                                          
  261.                                                           <ul>
  262.                                                                   <li><a href="on"><input type="button" title="按下将打开大厅灯光" value="开灯" /></a></li>
  263.                                                                   <li><a href="on"><input type="button" title="按下将打开大门灯光" value="开灯" /></a></li>
  264.                                                                   <li><a href="on"><input type="button" title="按下将打开院子灯光" value="开灯" /></a></li>
  265.                                                                   <li><a href="on"><input type="button" title="按下将打开厨房灯光" value="开灯" /></a></li>
  266.                                                                   <li><a href="on"><input type="button" title="按下将打开全部灯光" value="全开" /></a></li>
  267.                                                                  
  268.                                                                  
  269.                                                                  
  270.                                                                   <!--<li><a href="#"><input type="button"><span value="开灯"></span></input></a></li>
  271.                                                                   <li><a href="#"><input type="button"><span value="开灯"></span></input></a></li>
  272.                                                                   <li><a href="#"><input type="button"><span value="开灯"></span></input></a></li>
  273.                                                                   <li><a href="#"><input type="button"><span value="开灯"></span></input></a></li>
  274.                                                                   <li><a href="#"><input type="button"><span value="开灯"></span></input></a></li>-->
  275.                                                           </ul>
  276.                                                   </div>
  277.                                                   <div class="body-butt-off">
  278.                                                           <!--ul>li*5>a[href="/off"]>input[type="button"title="按下即将xx"value="关灯"]-->
  279.                                                           <ul>
  280.                                                                   <li><a href="/off"><input type="button" title="按下即将xx" value="关灯" /></a></li>
  281.                                                                   <li><a href="/off"><input type="button" title="按下即将xx" value="关灯" /></a></li>
  282.                                                                   <li><a href="/off"><input type="button" title="按下即将xx" value="关灯" /></a></li>
  283.                                                                   <li><a href="/off"><input type="button" title="按下即将xx" value="关灯" /></a></li>
  284.                                                                   <li><a href="/off"><input type="button" title="按下即将xx" value="全关" /></a></li>
  285.                                                           </ul>
  286.                                                   </div>
  287.                                                   <div class="body-but-pwm">
  288.                                                           <ul>
  289.                                                                   <li><a href="/pwma"><input type="button" title="xx" value="弱光" /></a></li>
  290.                                                                   <li><a href="/pmwb"><input type="button" title="xx" value="合适" /></a></li>
  291.                                                                   <li><a href="/pwmc"><input type="button" title="xx" value="强光" /></a></li>
  292.                                                           </ul>
  293.                                                   </div>
  294.                                           </div>
  295.               </div>
  296.       
  297.               <!--底部信息-->
  298.               <div class="footer">
  299.                              
  300.                                 <p>
  301.                          <a href="index.html">技术支持: [email][email protected][/email]</a>
  302.                         
  303.                          <a href="index.html">欢迎交流:555794952</a>
  304.                          <img src="http://pub.idqqimg.com/wpa/images/group.png" alt="群号码:555794952" /><!--显示加入QQ群小图标-->
  305.                         </p>
  306.                         
  307.                         <p>Copyright © [email protected]</p>
  308.                         <!--<address>地址:桂林</address>-->
  309.                         <!--<p>地址:桂林</p>-->
  310.                         <div class="footer-addre">
  311.                                 <address>地址:桂林</address>
  312.                         </div>
  313.                  </div>
  314.          </div>
  315.     </div>  
  316.         
  317.                  <script language="javascript">
  318.                
  319.                                         function shijian()
  320.                                         {
  321.                                         date=new Date();
  322.                                         var xiaoshi=date.getHours();
  323.                                         var fen=date.getMinutes();
  324.                                         var miao=date.getSeconds();
  325.                                         if(fen<=9)
  326.                                         fen="0"+fen;
  327.                                         if(miao<=9)
  328.                                         miao="0"+miao;
  329.                                         xianshi="<font class='b'>"+xiaoshi+":"+fen+":"+miao+"</font>";
  330.                                         time_xianshi.innerHTML=xianshi;       
  331.                                         setTimeout("shijian()",1000);
  332.                        
  333.                                         }
  334.                                         shijian();
  335.                 </script>   
  336.                              
  337.                 
  338. </body>
  339. </html>
复制代码


分享到:  QQ好友和群QQ好友和群
收藏收藏
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|联系我们|极客工坊 ( 浙ICP备09023225号 )

GMT+8, 2019-3-26 18:41 , Processed in 0.046860 second(s), 27 queries .

Powered by Discuz! X3.4 Licensed

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表