用Html标签和CSS3写的一个手机资源-CSDN文库

共4个文件

js：2个

css：1个

html：1个

需积分: 50 149 浏览量 2022-07-19 08:54:54 上传评论收藏 61KB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

phone.zip （4个子文件）

css

base.css 6KB

index.html 2KB

jquery-3.6.0.min.js 87KB

time.js 77KB

<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>CSS画手机</title> <link href="css/base.css" rel="stylesheet"> <script src="js/jquery-3.6.0.min.js" ></script> <script type="text/javascript" src="js/time.js"></script> </head> <body> <div class="phone"> <div class="box"> <header> <div class="fl"> <div class="liantong">中国联通<span>HD</span></div> <div class="xinhao"> </div> <div class="wifi"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="fr"> <div class="source_num"> <span id="counter"></span></div> <div class="source"></div> <script> $('.source').mouseover(function(){ var interval = setInterval(increment,100); var current = 100; function increment(){ current--; $('#counter').html(current+'%'); if(current == 0) { current = 100; } } $('.source').mouseout(function(){ clearInterval(interval); }).mouseover(function(){ interval = setInterval(increment,100); }); }); </script> </div> </header>  <div id="clock"> <p class="time"><span>{{ time }}</span><em>:</em><span>{{ time2 }}</span></p> <p class="text">{{ date }}</p> </div> <script> var clock = new Vue({ el: '#clock', data: { time: '', time2: '', date: '' } }); var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var timerID = setInterval(updateTime, 1000); updateTime(); function updateTime() { var cd = new Date(); clock.time = zeroPadding(cd.getHours(), 2); clock.time2 = zeroPadding(cd.getMinutes(), 2); clock.date = zeroPadding(cd.getMonth()+1, 2) + '月' + zeroPadding(cd.getDate(), 2) + '日 ' + week[cd.getDay()]; }; function zeroPadding(num, digit) { var zero = ''; for(var i = 0; i < digit; i++) { zero += '0'; } return (zero + num).slice(-digit); }</script>   <footer> <div class="btn_camera"> <div></div> </div> </footer>  </div>  <div class="volume"></div> <div class="power"></div> <div class="camera"></div> <div class="receiver"> <div></div> </div>  </div> </body> </html>