20180304---第二次---网站的首页制作成功
20180304—第二次—网站的首页制作成功
废话不多说，直接上代码：
html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <!--适应移动设备--> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>阅尽天下代码</title> 9 <!-- Bootstrap --> 10 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 11 <!--你自己的样式文件 --> 12 <link href="css/index.css" rel="stylesheet" /> 13 <link href="css/layout-head.css" rel="stylesheet" /> 14 <link href="css/clock.css" rel="stylesheet" /> 15 <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> 16 <!--[if lt IE 9]> 17 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 18 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 19 <![endif]--> 20 </head> 21 <body> 22 <div class="layout-head"> 23 <div class="container"> 24 <div class="navbar navbar-default navbar-fixed-top book-nav" role="navigation"> 25 <div class="navbar-header"> 26 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-responsive-collapse"> 27 <span class="sr-only">Toggle Navigation</span> 28 <span class="icon-bar"></span> 29 <span class="icon-bar"></span> 30 <span class="icon-bar"></span> 31 </button> 32 <a href="##" class="navbar-brand book-brand"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> 首页</a> 33 </div> 34 <div class="collapse navbar-collapse" id="navbar-responsive-collapse"> 35 <ul class="nav navbar-nav"> 36 <li><a href="##">图书</a></li> 37 <li><a href="##">文章</a></li> 38 </ul> 39 <form action="##" class="navbar-form navbar-left" rol="search"> 40 <div class="form-group"> 41 <input type="text" class="form-control" placeholder="请输入关键词" /> 42 </div> 43 <button type="submit" class="btn btn-default">搜索</button> 44 </form> 45 <ul class="nav navbar-nav" id="nav-register"> 46 <li class="head-compose"><a href="##">新会员注册</a></li> 47 <li class="head-compose"><a href="##">登录</a></li> 48 </ul> 49 </div> 50 </div> 51 </div> 52 </div> 53 <div id="home" class="customized-page"> 54 <div class="container"> 55 <div class="row"> 56 <div class="col-md-2 col-sm-2 column" id="column-1"> 57 <a href="#" class="post-tag">英语类</a> 58 </div> 59 <div class="col-md-2 col-sm-2 column" id="column-2"> 60 <a href="#" class="post-tag">文艺青年</a> 61 </div> 62 <div class="col-md-2 col-sm-2 column" id="column-3"> 63 <a href="#" class="post-tag">程序代码</a> 64 </div> 65 <div class="col-md-2 col-sm-2 column" id="column-4"> 66 <a href="#" class="post-tag">人生哲理</a> 67 </div> 68 <div class="col-md-2 col-sm-2 column" id="column-5"> 69 <a href="#" class="post-tag">互联网</a> 70 </div> 71 <div class="col-md-2 col-sm-2 column" id="column-6"> 72 <a href="#" class="post-tag">数学类</a> 73 </div> 74 </div> 75 </div> 76 </div> 77 <div id="row-2"> 78 <div class="container"> 79 <div class="row"> 80 <div class="col-md-9" id="title-next"> 81 <div class="block-header-book" id="title-h4"> 82 <h4><a href="#">热门图书</a></h4> 83 </div> 84 <div class="header-more marquee-btns" id="head-more-page"> 85 <a href="#" class="btn btn-default" disabled="disabled"><span class="fa fa-angle-left">«</span></a> 86 <a href="#" class="btn btn-default"><span class="fa fa-angle-right">»</span></a> 87 </div> 88 <div id="display-books"> 89 <ul class="block-items"> 90 <li class="block-item"> 91 <div class="book-img"> 92 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 93 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 94 </a> 95 </div> 96 <div class="book-info"> 97 <h4 class="name"> 98 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 99 </h4> 100 <div class="author"> 101 <span> 102 Staffan Noteberg 103 </span> 104 <span> 105 <a href="#">大胖</a> 106 译 107 </span> 108 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 109 </div> 110 </div> 111 </li> 112 <li class="block-item"> 113 <div class="book-img"> 114 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 115 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 116 </a> 117 </div> 118 <div class="book-info"> 119 <h4 class="name"> 120 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 121 </h4> 122 <div class="author"> 123 <span> 124 Staffan Noteberg 125 </span> 126 <span> 127 <a href="#">大胖</a> 128 译 129 </span> 130 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 131 </div> 132 </div> 133 </li> 134 <li class="block-item"> 135 <div class="book-img"> 136 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 137 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 138 </a> 139 </div> 140 <div class="book-info"> 141 <h4 class="name"> 142 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 143 </h4> 144 <div class="author"> 145 <span> 146 Staffan Noteberg 147 </span> 148 <span> 149 <a href="#">大胖</a> 150 译 151 </span> 152 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 153 </div> 154 </div> 155 </li> 156 <li class="block-item "> 157 <div class="book-img"> 158 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 159 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 160 </a> 161 </div> 162 <div class="book-info"> 163 <h4 class="name"> 164 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 165 </h4> 166 <div class="author"> 167 <span> 168 Staffan Noteberg 169 </span> 170 <span> 171 <a href="#">大胖</a> 172 译 173 </span> 174 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 175 </div> 176 </div> 177 </li> 178 <li class="block-item "> 179 <div class="book-img"> 180 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 181 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 182 </a> 183 </div> 184 <div class="book-info"> 185 <h4 class="name"> 186 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 187 </h4> 188 <div class="author"> 189 <span> 190 Staffan Noteberg 191 </span> 192 <span> 193 <a href="#">大胖</a> 194 译 195 </span> 196 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 197 </div> 198 </div> 199 </li> 200 <li class="block-item "> 201 <div class="book-img"> 202 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 203 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 204 </a> 205 </div> 206 <div class="book-info"> 207 <h4 class="name"> 208 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 209 </h4> 210 <div class="author"> 211 <span> 212 Staffan Noteberg 213 </span> 214 <span> 215 <a href="#">大胖</a> 216 译 217 </span> 218 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 219 </div> 220 </div> 221 </li> 222 <li class="block-item "> 223 <div class="book-img"> 224 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 225 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 226 </a> 227 </div> 228 <div class="book-info"> 229 <h4 class="name"> 230 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 231 </h4> 232 <div class="author"> 233 <span> 234 Staffan Noteberg 235 </span> 236 <span> 237 <a href="#">大胖</a> 238 译 239 </span> 240 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 241 </div> 242 </div> 243 </li> 244 <li class="block-item "> 245 <div class="book-img"> 246 <a href="#" title="单核工作法图解：事多到事少，拖延变高效"> 247 <img src="imgs/单核工作法图解_正封.jpg" alt="单核工作法图解：事多到事少，拖延变高效" /> 248 </a> 249 </div> 250 <div class="book-info"> 251 <h4 class="name"> 252 <a href="#" title="单核工作法图解：事多到事少，拖延变高效">单核工作法图解：事多到事少，拖延变高效</a> 253 </h4> 254 <div class="author"> 255 <span> 256 Staffan Noteberg 257 </span> 258 <span> 259 <a href="#">大胖</a> 260 译 261 </span> 262 <p class="intro">本书的主题是管理时间，战胜拖延。作者通过自身多年的经验，首创了一套简单、灵活而又强大的单核工作法，能行之有效地...</p> 263 </div> 264 </div> 265 </li> 266 </ul> 267 </div> 268 </div> 269 <div class="col-md-3 " id="display-dynamic"> 270 <div class="block-header-dynamic"> 271 <h4>最新动态</h4> 272 </div> 273 <div class="editable-area"> 274 <div class="block-event"> 275 <dl> 276 <dt>最新书讯</dt> 277 <dd> 278 <p> 279 <a href="http://www.ituring.com.cn/article/500505">2月书讯：13本好书与你一起开工</a> 280 </p> 281 </dd> 282 </dl> 283 <dl> 284 <dt>「码农」电子期刊</dt> 285 <dd> 286 <p> 287 <a href="http://www.ituring.com.cn/book/2598">《码农·人工智能小谈（第32期）》</a> 288 </p> 289 </dd> 290 </dl> 291 </div> 292 <div class="clock"> 293 <div class="hourHand"></div> 294 <div class="minuteHand"></div> 295 <div class="secondHand"></div> 296 <div class="center"></div> 297 <div class="time"></div> 298 <ul> 299 <li><span>1</span></li> 300 <li><span>2</span></li> 301 <li><span>3</span></li> 302 <li><span>4</span></li> 303 <li><span>5</span></li> 304 <li><span>6</span></li> 305 <li><span>7</span></li> 306 <li><span>8</span></li> 307 <li><span>9</span></li> 308 <li><span>10</span></li> 309 <li><span>11</span></li> 310 <li><span>12</span></li> 311 </ul> 312 </div> 313 </div> 314 </div> 315 </div> 316 </div> 317 </div> 318 <div id="footer"></div> 319 <div id="toTop"></div> 320 <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> 321 <script src="js/jquery.min.js"></script> 322 <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --> 323 <script src="js/bootstrap.min.js"></script> 324 <script src="js/index.js"></script> 325 <script> 326 window.onload = function () { 327 const hourHand = document.querySelector('.hourHand'); 328 const minuteHand = document.querySelector('.minuteHand'); 329 const secondHand = document.querySelector('.secondHand'); 330 const time = document.querySelector('.time'); 331 const clock = document.querySelector('.clock'); 332 333 function setDate() { 334 const today = new Date(); 335 336 const second = today.getSeconds(); 337 const secondDeg = ((second / 60) * 360) + 360; 338 secondHand.style.transform = `rotate(${secondDeg}deg)`; 339 340 const minute = today.getMinutes(); 341 const minuteDeg = ((minute / 60) * 360); 342 minuteHand.style.transform = `rotate(${minuteDeg}deg)`; 343 344 const hour = today.getHours(); 345 const hourDeg = ((hour / 12) * 360); 346 hourHand.style.transform = `rotate(${hourDeg}deg)`; 347 348 time.innerHTML = '<span>' + '<strong>' + hour + '</strong>' + ' : ' + minute + ' : ' + '<small>' + second + '</small>' + '</span>'; 349 } 350 351 setInterval(setDate, 1000); 352 353 } 354 </script> 355 </body> 356 </html>
View Code
css:
1 html { 2 box-sizing: border-box; 3 } 4 *, *:before, *:after { 5 box-sizing: inherit; 6 } 7 body { 8 background: #fff; 9 font: 400 14px/1.8 Helvetica,Arial, 10 "PingFang SC","Microsoft Yahei","微软雅黑", 11 "Hiragino Sans GB","Microsoft Sans Serif", 12 "WenQuanYi Micro Hei","sans-serif"; 13 color: #111; 14 } 15 ul,li{ 16 list-style:none; 17 } 18 * { 19 padding: 0px; 20 margin: 0px; 21 } 22 .book-nav { 23 background-color: #3b5998; 24 } 25 .book-brand { 26 padding-left: 200px; 27 padding-right: 30px; 28 } 29 @media (min-width:768px) { 30 .navbar-nav { 31 float: left; 32 margin: 0 0 0 10px; 33 } 34 .navbar-nav > li { 35 float: left; 36 margin: 0 10px; 37 font-size: 18px; 38 color: #fff; 39 } 40 .navbar-nav > li > a { 41 padding: 15px 20px; 42 } 43 } 44 #nav-register { 45 clear: left; 46 float: right; 47 margin-top: -50px; 48 margin-right: 100px; 49 } 50 @media only screen and (min-width: 768px){ 51 .nav .navbar-nav > li > a:hover, 52 .nav .navbar-nav > li > a:active, 53 .nav .navbar-nav > li > a:focus { 54 background-color: #344e86; 55 text-decoration: none; 56 } 57 } 58 #home { 59 margin-top: 100px; 60 /*border: solid 1px red;*/ 61 } 62 .column { 63 /*border: solid 1px blue;*/ 64 width:170px; 65 } 66 a:hover{ 67 text-decoration:none; 68 } 69 .post-tag { 70 display: inline-block; 71 font-size: 16px; 72 line-height: 22px; 73 padding: 5px 28px 4px 14px; 74 margin: 8px 8px 8px 0; 75 border-bottom-left-radius: 2px; 76 border-top-left-radius: 2px; 77 border-bottom-right-radius: 20px; 78 border-top-right-radius: 20px; 79 background-color: #fcf8e3; 80 background-image: none; 81 color: #a07023; 82 border: 1px solid #fbcc66; 83 border-bottom-width: 2px; 84 border-right-width: 2px; 85 position: relative; 86 box-shadow: 0 2px 5px 0 rgba(0,0,0,.05); 87 } 88 .block-header-book > h4 { 89 font-size: 22px; 90 line-height: 1.4; 91 margin: 0; 92 padding: 0; 93 font-weight: 700; 94 min-height: 40px; 95 color: #333; 96 } 97 .fa { 98 display: inline-block; 99 font: normal normal normal 14px/1 FontAwesome; 100 font-size: inherit; 101 text-rendering: auto; 102 -webkit-font-smoothing: antialiased; 103 } 104 .test{ 105 border:1px red solid; 106 } 107 #row-2{ 108 margin:30px auto; 109 } 110 #title-h4, #head-more-page { 111 display: inline; 112 position: relative; 113 } 114 #title-h4 { 115 float: left; 116 } 117 #title-next { 118 119 } 120 #head-more-page { 121 clear: left; 122 float: right; 123 margin-top: -40px; 124 } 125 #display-dynamic { 126 font-size: 22px; 127 color: #333; 128 height:100%; 129 } 130 #display-books { 131 margin-top: 60px; 132 border-top: 1px solid #a5a5a5; 133 } 134 .block-item { 135 width: 20.2%; 136 margin-top: 6px; 137 display: inline-block; 138 padding: 0 15px; 139 text-align: center; 140 vertical-align: top; 141 white-space: normal; 142 font-size: 14px; 143 } 144 .book-img { 145 padding: 0 0 2px 1px; 146 margin-bottom: 0; 147 position: relative; 148 text-align: left; 149 } 150 .book-img > a { 151 position: relative; 152 display: inline-block; 153 width: 116px; 154 height: 170px; 155 } 156 a:link{ 157 cursor:pointer; 158 } 159 img{ 160 width:100%; 161 border:0; 162 } 163 img:hover { 164 -webkit-box-shadow: 3px 3px 14px rgba(0,0,0,.2); 165 -moz-box-shadow: 3px 3px 14px rgba(0,0,0,.2); 166 box-shadow: 3px 3px 14px rgba(0,0,0,.2); 167 } 168 .name { 169 display: block; 170 margin-bottom: 1px; 171 font-weight: 500; 172 font-size: 16px; 173 line-height: 1.4; 174 } 175 .book-info { 176 padding: 0; 177 text-align: left; 178 } 179 .author { 180 line-height: 1.6; 181 white-space: nowrap; 182 overflow: hidden; 183 text-overflow: ellipsis; 184 color: #767676; 185 } 186 .intro { 187 display: none; 188 font-size: 14px; 189 color: #767676; 190 } 191 p { 192 margin: 0 0 10px; 193 } 194 .author span { 195 display: block; 196 white-space: nowrap; 197 overflow: hidden; 198 text-overflow: ellipsis; 199 } 200 .block-header-dynamic { 201 background: none; 202 border: none; 203 padding: 0; 204 height: auto; 205 margin: 30px 0 6px 0; 206 border-bottom: 1px solid #a5a5a5; 207 position: relative; 208 } 209 .block-event dl { 210 padding: 14px 0; 211 border-bottom: 1px dashed #a5a5a5; 212 line-height: 1.6; 213 font-size: 16px; 214 } 215 dl { 216 margin-top: 0; 217 margin-bottom: 20px; 218 } 219 .list_aa li .img img { 220 display: block; 221 width: 120px; 222 height: 120px; 223 } 224 #loop-show { 225 border: 1px solid #eaeaea; 226 padding: 6px 0 0; 227 width: 238px; 228 height: 187px; 229 position: relative; 230 margin-bottom: 9px; 231 overflow: hidden; 232 } 233 .clock { 234 width: 300px; 235 height: 300px; 236 border-radius: 50%; 237 background-color: antiquewhite; 238 margin: 100px auto 0px auto; 239 position: relative; 240 border: 20px solid cornsilk; 241 margin-left:-15px; 242 margin-top:-10px; 243 } 244 245 .center { 246 background-color: #000; 247 position: absolute; 248 left: calc(50% - 10px); 249 top: calc(50% - 10px); 250 width: 20px; 251 height: 20px; 252 border-radius: 50%; 253 z-index: 20; 254 } 255 256 .hourHand { 257 width: 10px; 258 height: 75px; 259 background-color: #000; 260 transform-origin: bottom center; 261 border-radius: 4px; 262 position: absolute; 263 top: 75px; 264 left: 145px; 265 z-index: 10; 266 transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 267 transform: rotate(360deg); 268 } 269 270 .minuteHand { 271 width: 5px; 272 height: 120px; 273 background-color: #000; 274 transform-origin: bottom center; 275 border-radius: 4px; 276 position: absolute; 277 top: 30px; 278 left: 147px; 279 z-index: 9; 280 transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 281 transform: rotate(90deg); 282 } 283 284 .secondHand { 285 width: 2px; 286 height: 120px; 287 background-color: red; 288 transform-origin: bottom center; 289 border-radius: 4px; 290 position: absolute; 291 top: 30px; 292 left: 149px; 293 transition: all 0.06s; 294 transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 295 z-index: 8; 296 transform: rotate(360deg); 297 } 298 299 .time { 300 position: absolute; 301 top: 45%; 302 left: 10%; 303 border: 1px solid #fff8dc; 304 background-color: #fff; 305 padding: 5px; 306 display: block; 307 box-shadow: inset 0px 2px 5px rgba(0,0,0,.4); 308 border-radius: 5px; 309 min-width: 70px; 310 height: 15px; 311 } 312 313 .time small { 314 color: red; 315 transition: all 0.05s; 316 transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 317 } 318 319 .clock ul { 320 list-style: none; 321 padding: 0; 322 } 323 324 .clock ul li { 325 position: absolute; 326 width: 20px; 327 height: 20px; 328 text-align: center; 329 line-height: 20px; 330 font-size: 10px; 331 color: red; 332 } 333 334 .clock ul li:nth-child(1) { 335 right: 22%; 336 top: 6.5%; 337 } 338 339 .clock ul li:nth-child(2) { 340 right: 6%; 341 top: 25%; 342 } 343 344 .clock ul li:nth-child(3) { 345 right: 1%; 346 top: calc(50% - 10px); 347 color: #000; 348 font-size: 20px; 349 font-weight: bold; 350 } 351 352 .clock ul li:nth-child(4) { 353 right: 6%; 354 top: 69%; 355 } 356 357 .clock ul li:nth-child(5) { 358 right: 22%; 359 top: 84%; 360 } 361 362 .clock ul li:nth-child(6) { 363 right: calc(50% - 10px); 364 top: calc(99% - 20px); 365 color: #000; 366 font-size: 20px; 367 font-weight: bold; 368 } 369 370 .clock ul li:nth-child(7) { 371 left: 22%; 372 top: 84%; 373 } 374 375 .clock ul li:nth-child(8) { 376 left: 6%; 377 top: 69%; 378 } 379 380 .clock ul li:nth-child(9) { 381 left: 1%; 382 top: calc(50% - 10px); 383 color: #000; 384 font-size: 20px; 385 font-weight: bold; 386 } 387 388 .clock ul li:nth-child(10) { 389 left: 6%; 390 top: 25%; 391 } 392 393 .clock ul li:nth-child(11) { 394 left: 22%; 395 top: 6.5%; 396 } 397 398 .clock ul li:nth-child(12) { 399 right: calc(50% - 10px); 400 top: 1%; 401 color: #000; 402 font-size: 20px; 403 font-weight: bold; 404 }
View Code
js:
1 <script> 2 window.onload = function () { 3 const hourHand = document.querySelector('.hourHand'); 4 const minuteHand = document.querySelector('.minuteHand'); 5 const secondHand = document.querySelector('.secondHand'); 6 const time = document.querySelector('.time'); 7 const clock = document.querySelector('.clock'); 8 9 function setDate() { 10 const today = new Date(); 11 12 const second = today.getSeconds(); 13 const secondDeg = ((second / 60) * 360) + 360; 14 secondHand.style.transform = `rotate(${secondDeg}deg)`; 15 16 const minute = today.getMinutes(); 17 const minuteDeg = ((minute / 60) * 360); 18 minuteHand.style.transform = `rotate(${minuteDeg}deg)`; 19 20 const hour = today.getHours(); 21 const hourDeg = ((hour / 12) * 360); 22 hourHand.style.transform = `rotate(${hourDeg}deg)`; 23 24 time.innerHTML = '<span>' + '<strong>' + hour + '</strong>' + ' : ' + minute + ' : ' + '<small>' + second + '</small>' + '</span>'; 25 } 26 27 setInterval(setDate, 1000); 28 29 } 30 </script>
直接嵌入在html才有效
最后的效果图：
版权声明：本文为anwser-jungle原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。