jQuery实时节气罗盘时钟特效代码下载


jQuery实时节气罗盘时钟特效代码下载
jQuery实时节气罗盘时钟特效代码下载以及实时节气、罗盘时钟等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/ceshi9_1.css" />
<link rel="stylesheet" href="css/ceshi9_2.css" />
<link rel="stylesheet" href="css/ceshi9_3.css" />

2. 引入JS

<script src="js/jquery-3.3.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/ceshi9.js"></script>

3. HTML代码

<div id="sum">
  <!-- 节气信息 -->
  <div id="message">
	<ul>
	  <li class="msgs" v-for="(item,index) in Arrays">{{item}}</li>
	</ul>
  </div>
  <!-- 遮罩 -->
  <li id="shade"></li>
  <!-- 秒 -->
  <div id="second">
	<ul>
	  <li v-for="item in flag">
		{{item}}          </li>
	</ul>
  </div>
  <!-- 分 -->
  <div id="minute">
	<ul>
	  <li v-for="item in flag_minute">
		{{item}}          </li>
	</ul>
  </div>
  <!-- 时 -->
  <div id="hour">
	<ul>
	  <li v-for="item in flag_hour">
		{{item}}          </li>
	</ul>
  </div>
  <!-- 年 -->
  <div id="year">
	<ul>
	  <li id="yearAll">天祈</li>
	</ul>
  </div>
  <!-- 月 -->
  <div id="mouth">
	<ul>
	  <li v-for="item in flag_mouth">
		{{item.name}}          </li>
	</ul>
  </div>
  <!-- 节气 -->
  <div id="solar">
	<ul>
	  <li
		v-for="(item,index) in flag_solar"
		:key="index"
		v-on:mouseover="showMsg(index)"
		v-on:mouseout="hideMsg()"
		class="mm"
	  >
		{{item.name}}          </li>
	</ul>
  </div>
  <!-- 日 -->
  <div id="data">
	<ul>
	  <li v-for="item in flag_data">
		{{item.name}}          </li>
	</ul>
  </div>
  <!-- 上下午 -->
  <div id="AP">
	<ul>
	  <li v-for="item in flag_AP">
		{{item.name}}          </li>
	</ul>
  </div>
</div>
<!-- vue引入 -->

相关推荐

发表评论

相关文章