div 鼠标悬浮加阴影特效+ul标签实现导航菜单+js 导出excel

最新推荐文章于 2022-07-05 01:22:30 发布

weixin_30698297

最新推荐文章于 2022-07-05 01:22:30 发布

阅读量229

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/wysjrh520/p/11250048.html

版权

CSS3 box-shadow 属性

https://www.runoob.com/cssref/css3-pr-box-shadow.html

    .xiaomi{
       width:300px;
       height:300px;
       background:#FFFFFF;
   }
   .xiaomi:hover{
       position:relative;
       top:-10px;
       left:-10px;
       box-shadow: 10px 10px 5px #888888;
   }

导航条

js导出excel

完整代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <script src="./jquery-1.8.2.js" language="javascript" type="text/javascript"></script>
  7 </head>
  8 <style>
  9     body{
 10         background:#F4F4F3;
 11         padding:20px;
 12     }
 13     .xiaomi{
 14         width:300px;
 15         height:300px;
 16         background:#FFFFFF;
 17     }
 18     .xiaomi:hover{
 19         position:relative;
 20         top:-10px;
 21         left:-10px;
 22         box-shadow: 10px 10px 5px #888888;
 23     }
 24      * {
 25     padding:0;
 26     margin:0;
 27 }
 28     li {
 29 
 30         list-style: none;
 31     }
 32     .nav {
 33         margin:0 auto;
 34 
 35     }
 36     .nav >li{
 37         float: left;
 38     }
 39     ul a {
 40         width:100px;
 41         height:50px;
 42         display:block;
 43         text-decoration:none;
 44         background-color:black;
 45         text-align:center;
 46         line-height:50px;
 47         color:white;
 48     }
 49     .text-center {
 50         display:none;
 51         position:absolute;
 52     }
 53     
 54     .text-center li a:hover {
 55         background:green
 56     }
 57     .nav .text-menu:hover .text-center {
 58         display:block;
 59     }
 60     #tables{
 61         width: 300px;
 62         height: 200px;
 63         text-align: center;
 64         border: 1px solid #999999;
 65     }
 66      th,tr,td{
 67         border: 1px solid #999;
 68     }
 69 
 70 </style>
 71 <script>
 72 $(function(){
 73 });
 74 </script>
 75 <body>
 76 <div class="xiaomi">
 77 
 78 </div>
 79 <ul class="nav">
 80     <li class="text-menu"><a href="">书名</a>
 81         <ul class="text-center">
 82             <li><a href="#">《三国演义》</a></li>
 83             <li><a href="#">《红楼梦》</a></li>
 84             <li><a href="#">《西游记》</a></li>
 85         </ul>
 86     </li>
 87     <li class="text-menu"><a href="#">作家</a>
 88         <ul class="text-center">
 89             <li><a href="#">三毛</a></li>
 90             <li><a href="#">吴承恩</a></li>
 91 
 92         </ul>
 93     </li>
 94     <li class="text-menu"><a href="#">收藏</a>
 95 
 96 </ul>
 97 <div>
 98     <a id="dlink" style="display:none;"></a>
 99 <input id="button" type="button" value="Export to Excel">
100 <table id="tables">
101    <caption></caption>
102     <thead>
103         <tr>
104             <th>姓名</th>
105             <th>性别</th>
106             <th>年龄</th>
107           <!--  <th title="ESC取消保存，Enter保存">取值</th>-->
108         </tr>
109     </thead>
110     <tbody>
111         <tr index="0">
112             <td>小红</td>
113             <td>女</td>
114             <td>12</td>
115         </tr>
116         <tr index="1">
117              <td>小明</td>
118             <td>男</td>
119             <td>13</td>
120         </tr>
121         <tr index="2">
122             <td>小君</td>
123             <td>女</td>
124             <td>14</td>
125         </tr>
126     </tbody>
127 </table>
128 </div>
129 <script>
130     var tableToExcel = (function() {
131     var uri = 'data:application/vnd.ms-excel;base64,',
132         template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
133         base64 = function(s) {
134             return window.btoa(unescape(encodeURIComponent(s)))
135         },
136         format = function(s, c) {
137             return s.replace(/{(\w+)}/g, function(m, p) {
138                 return c[p];
139             })
140         };
141     return function(table, name, filename) {
142         if (!table.nodeType) table = document.getElementById(table);
143         console.log(table.innerHTML)
144         var ctx = {
145             worksheet: name || 'Worksheet',
146             table: table.innerHTML
147         } //此时的innerHTML数据可以自己自定义 比如json转化 只要值要数据符合即可
148 
149         document.getElementById("dlink").href = uri + base64(format(template, ctx));
150         document.getElementById("dlink").download = filename;
151         document.getElementById("dlink").click();
152     }
153 });
154 
155 var id = "tables",
156     worksheetName = 'sheet',
157     workName = "demo.xls";
158 
159 document.getElementById('button').onclick = function() {
160     var download = tableToExcel();
161     download(id, worksheetName, workName)
162 };
163 </script>
164 </body>
165 </html>

注：

<caption> 标签定义表格的标题。

<caption> 标签必须直接放置到 <table> 标签之后。

转载于:https://www.cnblogs.com/wysjrh520/p/11250048.html

weixin_30698297

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 鼠标悬浮加阴影特效+ul标签实现导航菜单+js 导出excel

CSS3 box-shadow 属性https://www.runoob.com/cssref/css3-pr-box-shadow.html .xiaomi{ width:300px; height:300px; background:#FFFFFF; } .xiaomi:hover{ position:...
复制链接

扫一扫