Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 特别黄的免费视频大片,国产日韩欧美中文字幕,日日干天天操 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢(xún)熱線(xiàn)：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          極簡(jiǎn)javascript時(shí)鐘，代碼卻不簡(jiǎn)單！
          
        
           
          
	
	
          
		
                        
          擊查看時(shí)鐘特效
          極簡(jiǎn)主義，程序員javascript打造極簡(jiǎn)時(shí)鐘特效
          對(duì)于javascript特效的學(xué)習(xí)，重要的是邏輯思路，所以這個(gè)時(shí)鐘特效不是很華麗，但是功能都展現(xiàn)出來(lái)了，而學(xué)習(xí)javascript并不是單純的扣代碼，很多人都覺(jué)得，摳完代碼，能看懂了，就算是學(xué)會(huì)了，但是，說(shuō)的難聽(tīng)點(diǎn)這樣的學(xué)習(xí)方式其實(shí)是自斷前程的學(xué)習(xí)方法，若是一門(mén)月薪過(guò)萬(wàn)的技術(shù)有那么簡(jiǎn)單學(xué)習(xí)，那么怎么還會(huì)有那么多人找不到工作呢？學(xué)習(xí)javascript特效最重要的是仔細(xì)研究一個(gè)特效的思路方法，然后根據(jù)這個(gè)特效可以擴(kuò)展最初其他類(lèi)似功能或者更復(fù)雜的特效，才算徹底的掌握好了這方面的知識(shí)！我的頭條號(hào)里面也有許多華麗的特效以及HTML5/javascript游戲，有興趣的朋友可以去看看！文末附上本次javascript時(shí)鐘的源碼！
          如果想要更多的企業(yè)求職加分項(xiàng)目，案例，學(xué)習(xí)方法可以來(lái)一下我的前端群570946165，每天都會(huì)精挑細(xì)選一個(gè)特效，項(xiàng)目出來(lái)詳細(xì)講解，分享！包括答疑解惑！
          HTML5/javascript時(shí)鐘特效源碼
          代碼過(guò)長(zhǎng)需要文檔版源碼來(lái)我的前端群570946165，已上傳到群文件
          頭條號(hào)里有許多web前端學(xué)習(xí)視頻/源碼，企業(yè)常用特效/案例/項(xiàng)目，敬請(qǐng)關(guān)注！
          .說(shuō)明：
          推薦指數(shù)：★★★★★
          下面的代碼注釋很詳細(xì)，慢慢看，仔細(xì)享受，有的長(zhǎng)，先收藏，慢慢看，通俗易懂，看完就是入門(mén)了。
          導(dǎo)言：學(xué)習(xí)python，也是需要了解其他變成的語(yǔ)言的相關(guān)指示，計(jì)算機(jī)編程語(yǔ)言是相通的，vue也的確比較火，所以帶大家熟悉一下，別怕，很簡(jiǎn)單，小白都能看得懂，有注釋。當(dāng)然，本代碼還是可以?xún)?yōu)化的，看到css一大串的類(lèi)似代碼，學(xué)習(xí)python的人一定知道，可以采用推導(dǎo)式和for啥in啥，對(duì)吧？其實(shí)html也是可以的，因?yàn)榛A(chǔ)，所以別急，先熟悉，學(xué)會(huì)走路，大神估計(jì)看到，會(huì)呵呵，希望大家指定，繼續(xù)優(yōu)化代碼，哈哈哈，謝謝。

          對(duì)大神來(lái)說(shuō)，代碼優(yōu)化后只需一點(diǎn)點(diǎn)代碼就可以了，python也是，html也是。

          2.建一個(gè)文件夾：如下這些文件放置：

          3.效果圖：

          very beautiful！
          4.建一個(gè)index.html文件，復(fù)制如下代碼：
          <!--說(shuō)明：注意html、css、js的位置和注釋不同的學(xué)習(xí)-->
<!--第1步--聲明-->
<!DOCTYPE html>

<!--第2步：html大框架包起來(lái)-->
<!--也可以這樣聲明lang語(yǔ)言：html lang="en"-->
<html>
<!--第2-1步：head設(shè)置：包括編碼字符串格式和標(biāo)題，基本固定-->
<head>
<meta charset="UTF-8" />
<title>實(shí)時(shí)節(jié)氣羅盤(pán)文字時(shí)鐘代碼</title>
<!--css文件的導(dǎo)入，可以放在head，也可以放在body，注意格式：link rel和href-->
<!--css文件的導(dǎo)入，本代碼中是./代表同一個(gè)文件夾下，是linux系統(tǒng)，注意win可能不一樣-->
<link rel="stylesheet" href="./jieqi2.css" />
<link rel="stylesheet" href="./jieqi3.css" />

<!--以下2個(gè)meta，可要可不要，注意是對(duì)瀏覽器的聲明和框的設(shè)定，我注釋掉了-->
<!--meta name="viewport" content="width=device-width, initial-scale=1.0" /-->
<!--meta http-equiv="X-UA-Compatible" content="ie=edge" /-->
</head>

<!--第2-2步：body部分的設(shè)置：一般放導(dǎo)入js文件或者編寫(xiě)js代碼（JavaScript代碼）-->
<!--注意有一個(gè)細(xì)節(jié)：一般導(dǎo)入vue.js和其他.js文件，可以放在head或者body的位置，但本代碼只能放在body的div之后-->
<body>

<div id="sum">
  <!--當(dāng)前時(shí)間向右的指示的水平線(xiàn)條 -->
  <li id="shade"></li>

  <!-- 注意：下面的兩個(gè)大括號(hào)是vue的特點(diǎn) -->
  <!-- 秒 -->
  <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>

  <!-- 時(shí) -->
  <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>

  <!-- 節(jié)氣 -->
  <div id="solar">
	<ul>
	  <li
		v-for="(item,index) in flag_solar"
		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和其他js文件的引入 -->
<script src="./vue.js"></script>
<script src="./jieqi1.js"></script>

</body>
</html>
          1. 在建一個(gè)jieqi1.js文件，代碼：
          const vm = new Vue({
  el: '#sum',
  data() {
    return {
      flag: [
        '零秒',
        '一秒',
        '二秒',
        '三秒',
        '四秒',
        '五秒',
        '六秒',
        '七秒',
        '八秒',
        '九秒',
        '十秒',
        '十一秒',
        '十二秒',
        '十三秒',
        '十四秒',
        '十五秒',
        '十六秒',
        '十七秒',
        '十八秒',
        '十九秒',
        '二十秒',
        '二十一秒',
        '二十二秒',
        '二十三秒',
        '二十四秒',
        '二十五秒',
        '二十六秒',
        '二十七秒',
        '二十八秒',
        '二十九秒',
        '三十秒',
        '三十一秒',
        '三十二秒',
        '三十三秒',
        '三十四秒',
        '三十五秒',
        '三十六秒',
        '三十七秒',
        '三十八秒',
        '三十九秒',
        '四十秒',
        '四十一秒',
        '四十二秒',
        '四十三秒',
        '四十四秒',
        '四十五秒',
        '四十六秒',
        '四十七秒',
        '四十八秒',
        '四十九秒',
        '五十秒',
        '五十一秒',
        '五十二秒',
        '五十三秒',
        '五十四秒',
        '五十五秒',
        '五十六秒',
        '五十七秒',
        '五十八秒',
        '五十九秒'
      ],
      flag_minute: [
        '零分',
        '一分',
        '二分',
        '三分',
        '四分',
        '五分',
        '六分',
        '七分',
        '八分',
        '九分',
        '十分',
        '十一分',
        '十二分',
        '十三分',
        '十四分',
        '十五分',
        '十六分',
        '十七分',
        '十八分',
        '十九分',
        '二十分',
        '二十一分',
        '二十二分',
        '二十三分',
        '二十四分',
        '二十五分',
        '二十六分',
        '二十七分',
        '二十八分',
        '二十九分',
        '三十分',
        '三十一分',
        '三十二分',
        '三十三分',
        '三十四分',
        '三十五分',
        '三十六分',
        '三十七分',
        '三十八分',
        '三十九分',
        '四十分',
        '四十一分',
        '四十二分',
        '四十三分',
        '四十四分',
        '四十五分',
        '四十六分',
        '四十七分',
        '四十八分',
        '四十九分',
        '五十分',
        '五十一分',
        '五十二分',
        '五十三分',
        '五十四分',
        '五十五分',
        '五十六分',
        '五十七分',
        '五十八分',
        '五十九分'
      ],
      flag_hour: [
        '十二時(shí)',
        '一時(shí)',
        '二時(shí)',
        '三時(shí)',
        '四時(shí)',
        '五時(shí)',
        '六時(shí)',
        '七時(shí)',
        '八時(shí)',
        '九時(shí)',
        '十時(shí)',
        '十一時(shí)'
      ],
      flag_mouth: [
        {
          name: '一月',
          flag: false
        },
        {
          name: '二月',
          flag: false
        },
        {
          name: '三月',
          flag: false
        },
        {
          name: '四月',
          flag: false
        },
        {
          name: '五月',
          flag: false
        },
        {
          name: '六月',
          flag: false
        },
        {
          name: '七月',
          flag: false
        },
        {
          name: '八月',
          flag: false
        },
        {
          name: '九月',
          flag: false
        },
        {
          name: '十月',
          flag: false
        },
        {
          name: '十一月',
          flag: false
        },
        {
          name: '十二月',
          flag: false
        }
      ],
      flag_solar: [
        {
          name: '立春',
          flag: false,
        },
        {
          name: '雨水',
          flag: false,
        },
        {
          name: '驚蟄',
          flag: false,
        },
        {
          name: '春分',
          flag: false,
        },
        {
          name: '清明',
          flag: false,
        },
        {
          name: '谷雨',
          flag: false,
        },
        {
          name: '立夏',
          flag: false,
        },
        {
          name: '小滿(mǎn)',
          flag: false,
        },
        {
          name: '芒種',
          flag: false,
        },
        {
          name: '夏至',
          flag: false,
        },
        {
          name: '小暑',
          flag: false,
        },
        {
          name: '大暑',
          flag: false,
        },
        {
          name: '立秋',
          flag: false,
        },
        {
          name: '處暑',
          flag: false,
        },
        {
          name: '白露',
          flag: false,
        },
        {
          name: '秋分',
          flag: false,
        },
        {
          name: '寒露',
          flag: false,
        },
        {
          name: '霜降',
          flag: false,
        },
        {
          name: '立冬',
          flag: false,
        },
        {
          name: '小雪',
          flag: false,
        },
        {
          name: '大雪',
          flag: false,
        },
        {
          name: '冬至',
          flag: false,
        },
        {
          name: '小寒',
          flag: false,
        },
        {
          name: '大寒',
          flag: false,
        }
      ],
      Arrays: [],
      flag_data: [
        {
          name: '一號(hào)',
          flag: false
        },
        {
          name: ' 二號(hào)',
          flag: false
        },
        {
          name: '三號(hào)',
          flag: false
        },
        {
          name: ' 四號(hào)',
          flag: false
        },
        {
          name: '五號(hào)',
          flag: false
        },
        {
          name: '六號(hào)',
          flag: false
        },
        {
          name: '七號(hào)',
          flag: false
        },
        {
          name: '八號(hào)',
          flag: false
        },
        {
          name: '九號(hào)',
          flag: false
        },
        {
          name: ' 十號(hào)',
          flag: false
        },
        {
          name: '十一號(hào)',
          flag: false
        },
        {
          name: '  十二號(hào)',
          flag: false
        },
        {
          name: '   十三號(hào)',
          flag: false
        },
        {
          name: '    十四號(hào)',
          flag: false
        },
        {
          name: '   十五號(hào)',
          flag: false
        },
        {
          name: ' 十六號(hào)',
          flag: false
        },
        {
          name: '  十七號(hào)',
          flag: false
        },
        {
          name: '   十八號(hào)',
          flag: false
        },
        {
          name: '    十九號(hào)',
          flag: false
        },
        {
          name: '     二十號(hào)',
          flag: false
        },
        {
          name: '二十一號(hào)',
          flag: false
        },
        {
          name: ' 二十二號(hào)',
          flag: false
        },
        {
          name: '  二十三號(hào)',
          flag: false
        },
        {
          name: '   二十四號(hào)',
          flag: false
        },
        {
          name: '二十五號(hào)',
          flag: false
        },
        {
          name: ' 二十六號(hào)',
          flag: false
        },
        {
          name: ' 二十七號(hào)',
          flag: false
        },
        {
          name: '  二十八號(hào)',
          flag: false
        },
        {
          name: '   二十九號(hào) ',
          flag: false
        },
        {
          name: '   三十號(hào) ',
          flag: false
        },
        {
          name: '   三十一號(hào) ',
          flag: false
        }
      ],
      flag_AP: [
        {
          name: '白天'
        },
        {
          name: '晚上'
        }
      ],
      NllNumber: []
    }
  },
  methods: {
    showMsg: function(index) {
      var this_ = this
      var sum = this_.flag_solar
      var a = 0
      var b = 12
      // 處理后合格的字符串
      var newObject
      // 確保拿到需要的字符串
      var strings = sum[index].msg
      // 字符串分割
      var arrayy = strings.split('')
      var length = arrayy.length
      // 獲取到的數(shù)組（循環(huán)中）
      var arrayOne
      // 獲取數(shù)組轉(zhuǎn)換的字符串（帶','需要處理的）
      var stringOne = ''
      // 獲取字符串并添加
      for (var i = 0; i < 10; i++) {
        arrayOne = arrayy.slice(a, b)
        // console.log(arrayOne.length)
        if (arrayOne.length !== 0) {
          stringOne = arrayOne.join()
          // console.log(stringOne)
          newObject = stringOne
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
            .replace(',', '')
          // 添加數(shù)組元素
          this.Arrays.push(newObject)
        }
        // 第一列個(gè)數(shù)和別的列字?jǐn)?shù)不一樣
        if (i === 0) {
          a += 12
          b += 20
        } else {
          a += 20
          b += 20
        }

      }

    },
    hideMsg: function() {
      this.Arrays = []
      this.NllNumber = []
    }
  }
})

// 秒數(shù)圈動(dòng)作控制
var number = 0
//  window.onload =
function sell() {
  var data = new Date()
  var second = data.getSeconds() + 1
  number = second * -6
  document
    .getElementById('second')
    .setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')

  var myVar = setInterval(function() {
    sell_one()
  }, 1000)
}

function sell_one() {
  document
    .getElementById('second')
    .setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')
  number += -6
}
sell()



var number_minute = 0
function minutes() {
  var myVar = setInterval(function() {
    sell_two()
  }, 1000)
}

function sell_two() {
  var data = new Date()
  var minute = data.getMinutes()
  number_minute = minute * -6
  document.getElementById('minute').style.webkitTransform =
    'rotate' + '(' + number_minute + 'deg)'
}
minutes()

// 小時(shí)控制
var number_hour = 0
function hours() {
  var myVar = setInterval(function() {
    sell_three()
  }, 1000)
}

function sell_three() {
  var data = new Date()
  var hour = data.getHours()
  // console.log(hour)
  number_hour = hour * -30
  document.getElementById('hour').style.webkitTransform =
    'rotate' + '(' + number_hour + 'deg)'
}
hours()

// 年分控制
function year() {
  var data = new Date()
  var year = data.getFullYear()
  document.getElementById('yearAll').innerHTML = year + '年'
}

year()

// 節(jié)氣控制
function solarAndMouth() {
  var data = new Date()
  var mouth = data.getMonth()
  var number_mouth = mouth * -30
  document.getElementById('mouth').style.webkitTransform =
    'rotate' + '(' + number_mouth + 'deg)'
  document.getElementById('solar').style.webkitTransform =
    'rotate' + '(' + number_mouth + 'deg)'
}
solarAndMouth()

// data控制
function dates() {
  var data = new Date()
  var date = data.getDate()
  var number_date = date * -11.25 + 11.25
  
  document.getElementById('data').style.webkitTransform =
    'rotate' + '(' + number_date + 'deg)'
}
dates()

// AP控制
function APS() {
  var data = new Date()
  var ap = data.getHours()
  if (ap > 12) {
    document.getElementById('AP').style.webkitTransform = 'rotate(180deg)'
  } else {
    document.getElementById('AP').style.webkitTransform = 'rotate(0deg)'
  }
}
APS()

          6 再去下載一個(gè)vue.js文件，官網(wǎng)上有的，也可以外部在線(xiàn)導(dǎo)入，直接復(fù)制可以。
          7 jieqi2.css文件，代碼：
          * {
  padding: 0;
  margin: 0;
}
/* 此部分樣式包括總，時(shí)，分,秒 */
body {
  /*注意css的顏色設(shè)定法，可以直接輸入英文，比如：red；或者顏色的十六進(jìn)制，還有這種*/
  background: rgba(14, 0, 8, 1);
  overflow: hidden;
  color: #fff;
  /*顯示字體大小*/
  font-size: 8px;}

#sum {
  width: 730px;
  height: 730px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -365px;
  margin-top: -365px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;}

li {
  text-align: center;
  list-style-type: none;}

/* --第7圈---秒數(shù)控制樣式 */
#second {
  position: absolute;
  width: 600px;
  height: 600px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#second li {
  position: absolute;
  width: 80px;
  height: 20px;}
#second ul {
  position: relative;
  left: -40px;
  top: -10px;}
#second ul li:nth-child(1) {
  transform: rotate(0) translateX(240px);}
#second ul li:nth-child(2) {
  transform: rotate(6deg) translateX(240px);}
#second ul li:nth-child(3) {
  transform: rotate(12deg) translateX(240px);}
#second ul li:nth-child(4) {
  transform: rotate(18deg) translateX(240px);}
#second ul li:nth-child(5) {
  transform: rotate(24deg) translateX(240px);}
#second ul li:nth-child(6) {
  transform: rotate(30deg) translateX(240px);}
#second ul li:nth-child(7) {
  transform: rotate(36deg) translateX(240px);}
#second ul li:nth-child(8) {
  transform: rotate(42deg) translateX(240px);}
#second ul li:nth-child(9) {
  transform: rotate(48deg) translateX(240px);}
#second ul li:nth-child(10) {
  transform: rotate(54deg) translateX(240px);}
#second ul li:nth-child(11) {
  transform: rotate(60deg) translateX(240px);}
#second ul li:nth-child(12) {
  transform: rotate(66deg) translateX(240px);}
#second ul li:nth-child(13) {
  transform: rotate(72deg) translateX(240px);}
#second ul li:nth-child(14) {
  transform: rotate(78deg) translateX(240px);}
#second ul li:nth-child(15) {
  transform: rotate(84deg) translateX(240px);}
#second ul li:nth-child(16) {
  transform: rotate(90deg) translateX(240px);}
#second ul li:nth-child(17) {
  transform: rotate(96deg) translateX(240px);}
#second ul li:nth-child(18) {
  transform: rotate(102deg) translateX(240px);}
#second ul li:nth-child(19) {
  transform: rotate(108deg) translateX(240px);}
#second ul li:nth-child(20) {
  transform: rotate(114deg) translateX(240px);}
#second ul li:nth-child(21) {
  transform: rotate(120deg) translateX(240px);}
#second ul li:nth-child(22) {
  transform: rotate(126deg) translateX(240px);}
#second ul li:nth-child(23) {
  transform: rotate(132deg) translateX(240px);}
#second ul li:nth-child(24) {
  transform: rotate(138deg) translateX(240px);}
#second ul li:nth-child(25) {
  transform: rotate(144deg) translateX(240px);}
#second ul li:nth-child(26) {
  transform: rotate(150deg) translateX(240px);}
#second ul li:nth-child(27) {
  transform: rotate(156deg) translateX(240px);}
#second ul li:nth-child(28) {
  transform: rotate(162deg) translateX(240px);}
#second ul li:nth-child(29) {
  transform: rotate(168deg) translateX(240px);}
#second ul li:nth-child(30) {
  transform: rotate(174deg) translateX(240px);}
#second ul li:nth-child(31) {
  transform: rotate(180deg) translateX(240px);}
#second ul li:nth-child(32) {
  transform: rotate(186deg) translateX(240px);}
#second ul li:nth-child(33) {
  transform: rotate(192deg) translateX(240px);}
#second ul li:nth-child(34) {
  transform: rotate(198deg) translateX(240px);}
#second ul li:nth-child(35) {
  transform: rotate(204deg) translateX(240px);}
#second ul li:nth-child(36) {
  transform: rotate(210deg) translateX(240px);}
#second ul li:nth-child(37) {
  transform: rotate(216deg) translateX(240px);}
#second ul li:nth-child(38) {
  transform: rotate(222deg) translateX(240px);}
#second ul li:nth-child(39) {
  transform: rotate(228deg) translateX(240px);}
#second ul li:nth-child(40) {
  transform: rotate(234deg) translateX(240px);}
#second ul li:nth-child(41) {
  transform: rotate(240deg) translateX(240px);}
#second ul li:nth-child(42) {
  transform: rotate(246deg) translateX(240px);}
#second ul li:nth-child(43) {
  transform: rotate(252deg) translateX(240px);}
#second ul li:nth-child(44) {
  transform: rotate(258deg) translateX(240px);}
#second ul li:nth-child(45) {
  transform: rotate(264deg) translateX(240px);}
#second ul li:nth-child(46) {
  transform: rotate(270deg) translateX(240px);}
#second ul li:nth-child(47) {
  transform: rotate(276deg) translateX(240px);}
#second ul li:nth-child(48) {
  transform: rotate(282deg) translateX(240px);}
#second ul li:nth-child(49) {
  transform: rotate(288deg) translateX(240px);}
#second ul li:nth-child(50) {
  transform: rotate(294deg) translateX(240px);}
#second ul li:nth-child(51) {
  transform: rotate(300deg) translateX(240px);}
#second ul li:nth-child(52) {
  transform: rotate(306deg) translateX(240px);}
#second ul li:nth-child(53) {
  transform: rotate(312deg) translateX(240px);}
#second ul li:nth-child(54) {
  transform: rotate(318deg) translateX(240px);}
#second ul li:nth-child(55) {
  transform: rotate(324deg) translateX(240px);}
#second ul li:nth-child(56) {
  transform: rotate(330deg) translateX(240px);}
#second ul li:nth-child(57) {
  transform: rotate(336deg) translateX(240px);}
#second ul li:nth-child(58) {
  transform: rotate(342deg) translateX(240px);}
#second ul li:nth-child(59) {
  transform: rotate(348deg) translateX(240px);}
#second ul li:nth-child(60) {
  transform: rotate(354deg) translateX(240px);}


/*--第6圈---分針樣式 */
#minute {
  position: absolute;
  width: 500px;
  height: 500px;
  color:green;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#minute li {
  position: absolute;
  width: 80px;
  height: 20px;}
#minute ul {
  position: relative;
  left: -40px;
  top: -10px;}
#minute ul li:nth-child(1) {
  transform: rotate(0) translateX(200px);}
#minute ul li:nth-child(2) {
  transform: rotate(6deg) translateX(200px);}
#minute ul li:nth-child(3) {
  transform: rotate(12deg) translateX(200px);}
#minute ul li:nth-child(4) {
  transform: rotate(18deg) translateX(200px);}
#minute ul li:nth-child(5) {
  transform: rotate(24deg) translateX(200px);}
#minute ul li:nth-child(6) {
  transform: rotate(30deg) translateX(200px);}
#minute ul li:nth-child(7) {
  transform: rotate(36deg) translateX(200px);}
#minute ul li:nth-child(8) {
  transform: rotate(42deg) translateX(200px);}
#minute ul li:nth-child(9) {
  transform: rotate(48deg) translateX(200px);}
#minute ul li:nth-child(10) {
  transform: rotate(54deg) translateX(200px);}
#minute ul li:nth-child(11) {
  transform: rotate(60deg) translateX(200px);}
#minute ul li:nth-child(12) {
  transform: rotate(66deg) translateX(200px);}
#minute ul li:nth-child(13) {
  transform: rotate(72deg) translateX(200px);}
#minute ul li:nth-child(14) {
  transform: rotate(78deg) translateX(200px);}
#minute ul li:nth-child(15) {
  transform: rotate(84deg) translateX(200px);}
#minute ul li:nth-child(16) {
  transform: rotate(90deg) translateX(200px);}
#minute ul li:nth-child(17) {
  transform: rotate(96deg) translateX(200px);}
#minute ul li:nth-child(18) {
  transform: rotate(102deg) translateX(200px);}
#minute ul li:nth-child(19) {
  transform: rotate(108deg) translateX(200px);}
#minute ul li:nth-child(20) {
  transform: rotate(114deg) translateX(200px);}
#minute ul li:nth-child(21) {
  transform: rotate(120deg) translateX(200px);}
#minute ul li:nth-child(22) {
  transform: rotate(126deg) translateX(200px);}
#minute ul li:nth-child(23) {
  transform: rotate(132deg) translateX(200px);}
#minute ul li:nth-child(24) {
  transform: rotate(138deg) translateX(200px);}
#minute ul li:nth-child(25) {
  transform: rotate(144deg) translateX(200px);}
#minute ul li:nth-child(26) {
  transform: rotate(150deg) translateX(200px);}
#minute ul li:nth-child(27) {
  transform: rotate(156deg) translateX(200px);}
#minute ul li:nth-child(28) {
  transform: rotate(162deg) translateX(200px);}
#minute ul li:nth-child(29) {
  transform: rotate(168deg) translateX(200px);}
#minute ul li:nth-child(30) {
  transform: rotate(174deg) translateX(200px);}
#minute ul li:nth-child(31) {
  transform: rotate(180deg) translateX(200px);}
#minute ul li:nth-child(32) {
  transform: rotate(186deg) translateX(200px);}
#minute ul li:nth-child(33) {
  transform: rotate(192deg) translateX(200px);}
#minute ul li:nth-child(34) {
  transform: rotate(198deg) translateX(200px);}
#minute ul li:nth-child(35) {
  transform: rotate(204deg) translateX(200px);}
#minute ul li:nth-child(36) {
  transform: rotate(210deg) translateX(200px);}
#minute ul li:nth-child(37) {
  transform: rotate(216deg) translateX(200px);}
#minute ul li:nth-child(38) {
  transform: rotate(222deg) translateX(200px);}
#minute ul li:nth-child(39) {
  transform: rotate(228deg) translateX(200px);}
#minute ul li:nth-child(40) {
  transform: rotate(234deg) translateX(200px);}
#minute ul li:nth-child(41) {
  transform: rotate(240deg) translateX(200px);}
#minute ul li:nth-child(42) {
  transform: rotate(246deg) translateX(200px);}
#minute ul li:nth-child(43) {
  transform: rotate(252deg) translateX(200px);}
#minute ul li:nth-child(44) {
  transform: rotate(258deg) translateX(200px);}
#minute ul li:nth-child(45) {
  transform: rotate(264deg) translateX(200px);}
#minute ul li:nth-child(46) {
  transform: rotate(270deg) translateX(200px);}
#minute ul li:nth-child(47) {
  transform: rotate(276deg) translateX(200px);}
#minute ul li:nth-child(48) {
  transform: rotate(282deg) translateX(200px);}
#minute ul li:nth-child(49) {
  transform: rotate(288deg) translateX(200px);}
#minute ul li:nth-child(50) {
  transform: rotate(294deg) translateX(200px);}
#minute ul li:nth-child(51) {
  transform: rotate(300deg) translateX(200px);}
#minute ul li:nth-child(52) {
  transform: rotate(306deg) translateX(200px);}
#minute ul li:nth-child(53) {
  transform: rotate(312deg) translateX(200px);}
#minute ul li:nth-child(54) {
  transform: rotate(318deg) translateX(200px);}
#minute ul li:nth-child(55) {
  transform: rotate(324deg) translateX(200px);}
#minute ul li:nth-child(56) {
  transform: rotate(330deg) translateX(200px);}
#minute ul li:nth-child(57) {
  transform: rotate(336deg) translateX(200px);}
#minute ul li:nth-child(58) {
  transform: rotate(342deg) translateX(200px);}
#minute ul li:nth-child(59) {
  transform: rotate(348deg) translateX(200px);}
#minute ul li:nth-child(60) {
  transform: rotate(354deg) translateX(200px);}

/*--第5圈--時(shí)針控制樣式，半徑160px */
#hour {
  position: absolute;
  width: 400px;
  height: 400px;
  color:#4876FF;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#hour li {
  position: absolute;
  width: 50px;
  height: 20px;}
#hour ul {
  position: relative;
  left: -25px;
  top: -10px;}
#hour ul li:nth-child(1) {
  transform: rotate(0deg) translateX(160px);}
#hour ul li:nth-child(2) {
  transform: rotate(30deg) translateX(160px);}
#hour ul li:nth-child(3) {
  transform: rotate(60deg) translateX(160px);}
#hour ul li:nth-child(4) {
  transform: rotate(90deg) translateX(160px);}
#hour ul li:nth-child(5) {
  transform: rotate(120deg) translateX(160px);}
#hour ul li:nth-child(6) {
  transform: rotate(150deg) translateX(160px);}
#hour ul li:nth-child(7) {
  transform: rotate(180deg) translateX(160px);}
#hour ul li:nth-child(8) {
  transform: rotate(210deg) translateX(160px);}
#hour ul li:nth-child(9) {
  transform: rotate(240deg) translateX(160px);}
#hour ul li:nth-child(10) {
  transform: rotate(270deg) translateX(160px);}
#hour ul li:nth-child(11) {
  transform: rotate(300deg) translateX(160px);}
#hour ul li:nth-child(12) {
  transform: rotate(330deg) translateX(160px);}

/*---當(dāng)前時(shí)間向右的水平線(xiàn)條設(shè)置 */
#shade {
  position: absolute;
  list-style-type: none;
  background: #CAE1FF;
  /*當(dāng)前時(shí)間顏色向右水平條框*/
  width: 300px;
  height: 2px;
  left: 350px;}
          8 jieqi3.css文件，代碼：
          /* 此部分樣式寫(xiě)年，月，節(jié)氣，日 */
/*圓心點(diǎn)---年分控制 */
#year {
  position: absolute;
  display: flex;
  color: darkorange;
  font-size: large;
  justify-content: center;
  align-items: center;
  transition: all 1s;}

/*--第3圈--月份控制 */
#mouth {
  position: absolute;
  width: 50px;
  height: 50px;
  color:#8A2BE2;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#mouth li {
  position: absolute;
  /*月份的字體寬度，太小不好，比如：十二月，就會(huì)分兩部分顯示*/
  width: 80px;
  /* inline-size: auto; */
  height: 20px;
  left: -40px;
  top: -10px;}
#mouth ul {
  position: relative;}
/*月份的一圈的半徑30px控制*/
#mouth ul li:nth-child(1) {
  transform: rotate(0deg) translateX(80px);}
#mouth ul li:nth-child(2) {
  transform: rotate(30deg) translateX(80px);}
#mouth ul li:nth-child(3) {
  transform: rotate(60deg) translateX(80px);}
#mouth ul li:nth-child(4) {
  transform: rotate(90deg) translateX(80px);}
#mouth ul li:nth-child(5) {
  transform: rotate(120deg) translateX(80px);}
#mouth ul li:nth-child(6) {
  transform: rotate(150deg) translateX(80px);}
#mouth ul li:nth-child(7) {
  transform: rotate(180deg) translateX(80px);}
#mouth ul li:nth-child(8) {
  transform: rotate(210deg) translateX(80px);}
#mouth ul li:nth-child(9) {
  transform: rotate(240deg) translateX(80px);}
#mouth ul li:nth-child(10) {
  transform: rotate(270deg) translateX(80px);}
#mouth ul li:nth-child(11) {
  transform: rotate(300deg) translateX(80px);}
#mouth ul li:nth-child(12) {
  transform: rotate(330deg) translateX(80px);}

/*--第2圈--solar=節(jié)氣*/
#solar {
  position: absolute;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(0);
  transition: all 5s;
  z-index: 50;}
#solar li {
  position: absolute;
  width: 80px;
  height: 20px;
  cursor:pointer;}
#solar ul {
  position: relative;
  left: -40px;
  top: -10px;}
#solar ul li:nth-child(1) {
  transform: rotate(22.5deg) translateX(50px);}
#solar ul li:nth-child(2) {
  transform: rotate(37.5deg) translateX(50px);}
#solar ul li:nth-child(3) {
  transform: rotate(52.5deg) translateX(50px);}
#solar ul li:nth-child(4) {
  transform: rotate(67.5deg) translateX(50px);}
#solar ul li:nth-child(5) {
  transform: rotate(82.5deg) translateX(50px);}
#solar ul li:nth-child(6) {
  transform: rotate(97.5deg) translateX(50px);}
#solar ul li:nth-child(7) {
  transform: rotate(112.5deg) translateX(50px);}
#solar ul li:nth-child(8) {
  transform: rotate(127.5deg) translateX(50px);}
#solar ul li:nth-child(9) {
  transform: rotate(142.5deg) translateX(50px);}
#solar ul li:nth-child(10) {
  transform: rotate(157.5deg) translateX(50px);}
#solar ul li:nth-child(11) {
  transform: rotate(172.5deg) translateX(50px);}
#solar ul li:nth-child(12) {
  transform: rotate(187.5deg) translateX(50px);}
#solar ul li:nth-child(13) {
  transform: rotate(202.5deg) translateX(50px);}
#solar ul li:nth-child(14) {
  transform: rotate(217.5deg) translateX(50px);}
#solar ul li:nth-child(15) {
  transform: rotate(232.5deg) translateX(50px);}
#solar ul li:nth-child(16) {
  transform: rotate(247.5deg) translateX(50px);}
#solar ul li:nth-child(17) {
  transform: rotate(262.5deg) translateX(50px);}
#solar ul li:nth-child(18) {
  transform: rotate(277.5deg) translateX(50px);}
#solar ul li:nth-child(19) {
  transform: rotate(292.5deg) translateX(50px);}
#solar ul li:nth-child(20) {
  transform: rotate(307.5deg) translateX(50px);}
#solar ul li:nth-child(21) {
  transform: rotate(322.5deg) translateX(50px);}
#solar ul li:nth-child(22) {
  transform: rotate(337.5deg) translateX(50px);}
#solar ul li:nth-child(23) {
  transform: rotate(352.5deg) translateX(50px);}
#solar ul li:nth-child(24) {
  transform: rotate(367.5deg) translateX(50px);}

/*--第4圈--日期控制 */
#data {
  position: absolute;
  width: 300px;
  height: 300px;
  color:yellow;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#data li {
  position: absolute;
  width: 80px;
  height: 20px;}
#data ul {
  position: relative;
  left: -40px;
  top: -10px;}
/*data=日期=幾號(hào)，半徑120px*/
#data ul li:nth-child(1) {
  transform: rotate(0) translateX(120px);}
#data ul li:nth-child(2) {
  transform: rotate(11.25deg) translateX(120px);}
#data ul li:nth-child(3) {
  transform: rotate(22.5deg) translateX(120px);}
#data ul li:nth-child(4) {
  transform: rotate(33.75deg) translateX(120px);}
#data ul li:nth-child(5) {
  transform: rotate(45deg) translateX(120px);}
#data ul li:nth-child(6) {
  transform: rotate(56.25deg) translateX(120px);}
#data ul li:nth-child(7) {
  transform: rotate(67.5deg) translateX(120px);}
#data ul li:nth-child(8) {
  transform: rotate(78.75deg) translateX(120px);}
#data ul li:nth-child(9) {
  transform: rotate(90deg) translateX(120px);}
#data ul li:nth-child(10) {
  transform: rotate(101.25deg) translateX(120px);}
#data ul li:nth-child(11) {
  transform: rotate(112.5deg) translateX(120px);}
#data ul li:nth-child(12) {
  transform: rotate(123.75deg) translateX(120px);}
#data ul li:nth-child(13) {
  transform: rotate(135deg) translateX(120px);}
#data ul li:nth-child(14) {
  transform: rotate(146.25deg) translateX(120px);}
#data ul li:nth-child(15) {
  transform: rotate(157.5deg) translateX(120px);}
#data ul li:nth-child(16) {
  transform: rotate(168.75deg) translateX(120px);}
#data ul li:nth-child(17) {
  transform: rotate(180deg) translateX(120px);}
#data ul li:nth-child(18) {
  transform: rotate(191.25deg) translateX(120px);}
#data ul li:nth-child(19) {
  transform: rotate(202.5deg) translateX(120px);}
#data ul li:nth-child(20) {
  transform: rotate(213.75deg) translateX(120px);}
#data ul li:nth-child(21) {
  transform: rotate(225deg) translateX(120px);}
#data ul li:nth-child(22) {
  transform: rotate(236.25deg) translateX(120px);}
#data ul li:nth-child(23) {
  transform: rotate(247.5deg) translateX(120px);}
#data ul li:nth-child(24) {
  transform: rotate(258.75deg) translateX(120px);}
#data ul li:nth-child(25) {
  transform: rotate(270deg) translateX(120px);}
#data ul li:nth-child(26) {
  transform: rotate(281.25deg) translateX(120px);}
#data ul li:nth-child(27) {
  transform: rotate(292.5deg) translateX(120px);}
#data ul li:nth-child(28) {
  transform: rotate(303.75deg) translateX(120px);}
#data ul li:nth-child(29) {
  transform: rotate(315deg) translateX(120px);}
#data ul li:nth-child(30) {
  transform: rotate(326.25deg) translateX(120px);}
#data ul li:nth-child(31) {
  transform: rotate(337.5deg) translateX(120px);}
/*注意由于日期有不等，28~32天，所以造成1號(hào)～31號(hào)之間的距離稍微寬些*/

/*--最外圈--上午/白天和下午/晚上的設(shè)置*/
#AP {
  position: absolute;
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;}
#AP li {
  position: absolute;
  width: 80px;
  /*顏色設(shè)置可以是英文，可以是十六進(jìn)制*/
  color:red;
  height: 20px;}
#AP ul {
  position: relative;
  left: -40px;
  top: -10px;}
/*上午和下午的設(shè)置，半徑270px,改成最外邊*，改成白天和晚上/
/*上午的設(shè)置*/
#AP ul li:nth-child(1) {
  transform: rotate(0deg) translateX(270px);}
/*下午的設(shè)置*/
#AP ul li:nth-child(2) {
  transform: rotate(180deg) translateX(270px);}

          9 很長(zhǎng)對(duì)吧？但是搞懂了，就是入門(mén)了，哈哈哈。如果能繼續(xù)優(yōu)化，那就是大神。
          avascript寫(xiě)特效寫(xiě)多了，今天想換個(gè)風(fēng)格，就用CSS寫(xiě)個(gè)小時(shí)鐘玩下吧。
          用CSS3做一個(gè)小小的時(shí)鐘，跟現(xiàn)實(shí)中的時(shí)鐘，功能一樣，都能實(shí)現(xiàn)看時(shí)間的效果。
          這里還是要說(shuō)一下我自己建的前端學(xué)習(xí)群：594959296，從我一個(gè)人到現(xiàn)在的1755個(gè)都是看我每一篇文章看我每一個(gè)案例來(lái)的，可以說(shuō)都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來(lái)，歡迎初學(xué)和進(jìn)階中的小伙伴
          1. 簡(jiǎn)介
          2. 制作時(shí)鐘的思路
          1. 第一步畫(huà)表盤(pán)
          2. 第二步添加時(shí)針，分針，秒針
          3. 第三步設(shè)置指針
          3. 代碼
          3.1畫(huà)表盤(pán)
          你會(huì)好奇，為什么數(shù)字都會(huì)在一塊，因?yàn)槎ㄎ涣税?，那么，怎么讓他們分開(kāi)？可以用循環(huán)變換角度。。。
          又有問(wèn)題了，那字怎么倒了啊，怎么整??？在反轉(zhuǎn)回去，這里別反轉(zhuǎn)div，要是反轉(zhuǎn)div的話(huà)，字又回去了，那你看我的HTML結(jié)構(gòu)，我在反轉(zhuǎn)span標(biāo)簽就歐克了。
          3.2 添加時(shí)針，分針，秒針
          3.3 設(shè)置指針
          4. 完整代碼
          今天的這個(gè)案例就寫(xiě)完了，希望大家能夠?qū)W習(xí)到東西。
          因?yàn)橹坝泻芏喟咐际莏avascript做的，有些人也想我用CSS做幾個(gè)試試，讓他們學(xué)學(xué)，所以今天才有了這篇文章。
          學(xué)習(xí)javascript也是有難度的，前提是你的html和css學(xué)的應(yīng)該要很號(hào)，您不能連html這東東是干啥的都不知道就開(kāi)始學(xué)javascript了，學(xué)乘除前，學(xué)好加減法總是有益無(wú)害的。
          再說(shuō)幾點(diǎn)建議：
          1. 不要急著看一些復(fù)雜的javascript網(wǎng)頁(yè)特效的代碼，這樣除了打擊你的自信心，什么也學(xué)不到
          2. 看網(wǎng)上什么幾天精通javascript的，直接跳過(guò)吧，會(huì)浪費(fèi)你很多時(shí)間
          3. 這個(gè)案例就算做完了，想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取，已經(jīng)上傳到群文件里了，群號(hào)：594959296，歡迎學(xué)習(xí)交流的小伙伴過(guò)來(lái)一起學(xué)習(xí)交流。
          如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號(hào)：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
无码人妻品一区二区三区精99|
国产日韩精品一区二区三区在线
|
天海翼一区二区三区高清视频|
国产成人精品一区二三区在线观看|
3d动漫精品成人一区二区三|
久久久久人妻一区精品|
无码中文字幕乱码一区|
国产免费一区二区三区不卡|
精品无码中出一区二区|
精品国产区一区二区三区在线观看|
91秒拍国产福利一区|
性色AV一区二区三区|
国产裸体歌舞一区二区
|
亚洲一区二区三区免费观看|
中文字幕精品无码一区二区|
97精品国产福利一区二区三区|
日韩动漫av在线播放一区|
国产在线视频一区二区三区|
国精产品一区一区三区有限公司|
亚洲中文字幕乱码一区|
一区国产传媒国产精品|
亚洲日韩国产一区二区三区在线|
91精品一区二区三区在线观看|
91video国产一区|
日本片免费观看一区二区|
亚洲AV无码一区东京热|
蜜桃臀无码内射一区二区三区
|
亚洲AV无码一区二区三区鸳鸯影院|
一区二区无码免费视频网站|
在线免费观看一区二区三区|
日韩一区二区三区不卡视频|
精彩视频一区二区三区
|
在线观看一区二区三区av|
亚洲综合av一区二区三区不卡
|
丝袜人妻一区二区三区|
久久se精品一区二区|
亚洲国产一区在线观看|
国精产品一区一区三区有限在线|
国产成人综合亚洲一区|
中文字幕一区二区免费|
精品欧洲av无码一区二区14|