current_time.svg
1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
polygon { fill: black }
div {
color: white;
font:18px serif;
}
.currentDate {
text-align: center;
}
.currentTime {
text-align: center;
}
</style>
<polygon points="5,5 195,5 195,80 5,80" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="5" y="5" width="195" height="80">
<!--
In the context of SVG embeded into HTML, the XHTML namespace could
be avoided, but it is mandatory in the context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
<div id="currentDate" class="currentDate">
</div>
<div id="currentTime" class="currentTime">
</div>
</div>
<script>
var currentDate = document.getElementById("currentDate");
currentDate.innerHTML = getCurrentDate();
//封装日期函数
function getCurrentDate() {
var date = new Date(); //创建日期对象
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
var day = date.getDay();
return year + '年' + month + '月' + dates + '日 ' + arr[day];
}
function getTime(){
var date = new Date();
var hh = date.getHours();
var mf = date.getMinutes();
var ss = date.getSeconds();
mf = mf>10?mf:'0'+mf;
ss = ss>10?ss:'0'+ss;
return time = hh+':'+mf+':'+ss;
}
setInterval(function(){
var currentTime = document.getElementById("currentTime");
currentTime.innerHTML = getTime();
},1000)
</script>
</foreignObject>
</svg>