【前端笔试系列】：0x01
1. jQuery？
1.1. 基础篇
题目01：
题目02：
题目03：
题目04：
题目05：
题目06：
题目07：
题目08：
题目09：
题目10：
题目11：
题目12：
题目13：
题目14：
题目15：
题目16：
1.2. 中级篇
题目01：
题目02：
题目03：
答案：ABD
题目04：
2. 综合篇？
2.1 初级篇：
题目01：
2.2 中级篇：
题目01：
题目02：
2.3 高级篇：
题目01：
仅供参考的一种解：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<style type="text/css">
.clock{
position: relative;
width: 300px;
height: 300px;
border: 2px solid blue;
}
.clock-arrow{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform-origin:0 100%;
}
.clock-arrow.hour{
width: 4px;
height: 100px;
border: 4px solid black;
}
.clock-arrow.minute{
width: 3px;
height: 150px;
border: 3px solid purple;
}
.clock-arrow.second{
width: 2px;
height: 200px;
border: 2px solid yellow;
}
</style>
</head>
<body>
<script type="text/javascript">
var Clock = (function(){
var uid = 0;
function Clock(dom){
uid++;
this.domid = "clock_"+uid;
this.date = new Date();
render.call(this, dom, this.domid);
}
Clock.prototype.setTime = function(hour, minute, second){
this.date.setHours(hour);
this.date.setMinutes(minute);
this.date.setSeconds(second);
refresh.call(this, this.domid, this.date);
};
Clock.prototype.run = function(){
setInterval(()=>{
this.date.setSeconds(this.date.getSeconds() + 1);
refresh.call(this, this.domid, this.date);
}, 1000);
};
function render(dom, domid){
var html = [
"<div id=\""+domid+"\" class=\"clock\">",
"<div class=\"clock-arrow hour\"></div>",
"<div class=\"clock-arrow minute\"></div>",
"<div class=\"clock-arrow second\"></div>",
"</div>"
];
$(html.join("")).appendTo($(dom));
}
function refresh(domid, date){
var hour = date.getHours();
var minutes = date.getMinutes()
var seconds = date.getSeconds();
var hourRotateDeg = (hour % 12) / 12 * 360 + ((360 / 12)*(minutes % 60) / 60);
var minuteRotateDeg = (minutes % 60) / 60 * 360 + ((360 / 60)*(seconds % 60) / 60);
var secondsRotateDeg = (seconds % 60) / 60 * 360;
$("#"+domid+" .hour").css("transform", "translate(0,-50%) rotate("+hourRotateDeg+"deg)");
$("#"+domid+" .minute").css("transform", "translate(0,-50%) rotate("+minuteRotateDeg+"deg)");
$("#"+domid+" .second").css("transform", "translate(0,-50%) rotate("+secondsRotateDeg+"deg)");
}
return Clock;
}());
var clock = new Clock(document.body);
clock.setTime(10, 10, 10);
clock.run();
</script>
</body>
</html>
灵魂效果图
参考：
《前端程序员——面试笔试宝典》 《牛客网》—— jquery 相关题库 https://www.nowcoder.com/search?type=question&query=jquery
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-12-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
