<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间轮盘</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="home">
<div class="thetime">
<ul>
<li class="timeting">
2019年
</li>
</ul>
</div>
<div id="second">
<ul>
<li v-for="second in seconds">
{{ second.name }}
</li>
</ul>
</div>
<div id="minute">
<ul>
<li v-for="minute in minutes">
{{ minute.name }}
</li>
</ul>
</div>
<div id="hour">
<ul>
<li v-for="hour in hours">
{{ hour.name }}
</li>
</ul>
</div>
<div id="apm">
<ul>
<li v-for="apm in apms">
{{apm.name}}
</li>
</ul>
</div>
<div id="week">
<ul>
<li v-for="week in weeklist">
{{week.name}}
</li>
</ul>
</div>
<div id="day">
<ul>
<li v-for="day in days">
{{day.name}}
</li>
</ul>
</div>
<div id="month">
<ul>
<li v-for="month in months">
{{month.name}}
</li>
</ul>
</div>
</div>
</body>
<script>
var demo = new Vue({
el:'#week',
data:{
weeklist: [
{
name: '星期一',
active:false
},{
name: '星期二',
active:false
},{
name: '星期三',
active:false
},{
name: '星期四',
active:false
},{
name: '星期五',
active:false
},{
name: '星期六',
active:false
},{
name: '星期日',
active:false
},{
name: '',
active:false
}
]
},
});
var demo2 = new Vue({
el:'#month',
data:{
months: [
{
name: '一月',
active:false
},{
name: '二月',
active:false
},{
name: '三月',
active:false
},{
name: '四月',
active:false
},{
name: '五月',
active:false
},{
name: '六月',
active:false
},{
name: '七月',
active:false
},{
name: '八月',
active:false
},{
name: '九月',
active:false
},{
name: '十月',
active:false
},{
name: '十一月',
active:false
},{
name: '十二月',
active:false
}
]
},
});
var demo3 = new Vue({
el:'#second',
data:{
seconds: [
{
name: '一秒',
active:false
},{
name: '二秒',
active:false
},{
name: '三秒',
active:false
},{
name: '四秒',
active:false
},{
name: '五秒',
active:false
},{
name: '六秒',
active:false
},{
name: '七秒',
active:false
},{
name: '八秒',
active:false
},{
name: '九秒',
active:false
},{
name: '十秒',
active:false
},{
name: '十一秒',
active:false
},{
name: '十二秒',
active:false
},{
name: '十三秒',
active:false
},{
name: '十四秒',
active:false
},{
name: '十五秒',
active:false
},{
name: '十六秒',
active:false
},{
name: '十七秒',
active:false
},{
name: '十八秒',
active:false
},{
name: '十九秒',
active:false
},{
name: '二十秒',
active:false
},{
name: '二十一秒',
active:false
},{
name: '二十二秒',
active:false
},{
name: '二十三秒',
active:false
},{
name: '二十四秒',
active:false
},{
name: '二十五秒',
active:false
},{
name: '二十六秒',
active:false
},{
name: '二十七秒',
active:false
},{
name: '二十八秒',
active:false
},{
name: '二十九秒',
active:false
},{
name: '三十秒',
active:false
},{
name: '三十一秒',
active:false
},{
name: '三十二秒',
active:false
},{
name: '三十三秒',
active:false
},{
name: '三十四秒',
active:false
},{
name: '三十五秒',
active:false
},{
name: '三十六秒',
active:false
},{
name: '三十七秒',
active:false
},{
name: '三十八秒',
active:false
},{
name: '三十九秒',
active:false
},{
name: '四十秒',
active:false
},{
name: '四十一秒',
active:false
},{
name: '
