JavaScript 鍜?CSS3 鍋氬嚭杞洏鎶藉鏁堟灉

Posted 2020-12-04

鏍囩锛?a href='http://www.mamicode.com/so/1/border' title='border'>border   nts   style   order   20px   relative   css   random   text   

棣栧厛鏄疕TML浠ｇ爜

	<p id="text">鎮ㄨ繕鍓╀綑3娆℃満浼?lt;/p>
	<div class="box">
		<img src="./img/lanren.png" >
		<div class="btn btn1"></div>
		<div class="btn2 btn"></div>
	</div>

銆€鐒跺悗鏄疌SS浠ｇ爜

        body{
銆€銆€銆€銆€銆€銆€padding: 0;
銆€銆€銆€銆€銆€銆€margin: 0;
銆€銆€銆€銆€銆€}
        .box{
銆€銆€銆€銆€銆€銆€銆€銆€width: 640px;
            height: 640px;
            border-radius: 50%;
            margin: 150px auto;
            position: relative;
        }
        img{
            width: 100%;
            height: 100%;
            transform: rotateZ(0deg);
            transition: all 2s;    
        }
        .btn{
            position: absolute;
            width: 190px;
            height: 220px;
            background-image: url("./img/arrow.png");
            background-repeat: no-repeat;
            background-position: -30px 0;
            top: 50%;
            left: 50%;
            margin-left: -95px;
            margin-top: -110px;
        }
    .btn2{
      background-position: -281px 0;
      display: none;
    }
        p{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: #facebf;
        }

鏈€鍚庡姞JS浠ｇ爜

 1         //鍒濆鍖栦竴涓搴?/span>
 2         var x = 0;
 3         //瀹氫箟涓€鍏辫兘鎶藉澶氬皯娆?/span>
 4         var a = 3;
 5         //鑾峰彇闇€瑕佺殑dom鍏冪礌
 6         var text = document.getElementById("text");
 7         var btn1 = document.getElementsByClassName(鈥榖tn1鈥?[0];
 8         var btn2 = document.getElementsByClassName(鈥榖tn2鈥?[0];
 9         var img = document.getElementsByTagName(鈥榠mg鈥?[0];
10         //瀹氫箟涓€涓殢鏈烘暟  鍦ㄤ笅闈娇鐢?/span>
11         function random(a,b){
12             return Math.floor(Math.random()*(b-a))+a;               
13         }
14         //鐐瑰嚮鎸夐挳鏃? 鎵ц浜嬩欢  棣栧厛a-1  鐒跺悗鍐嶉殢鏈哄緱鍒颁竴涓搴︽暟瀛? 鐒跺悗鍐嶈祴鍊肩粰img鍏冪礌  鏈€鍚庡啀鎵ц涓€涓洖璋冨嚱鏁?濡傛灉鐩存帴鎶婂洖璋冨嚱鏁伴噷闈㈢殑浠ｇ爜灏嗕細鍑虹幇BUG 浣嗘槸鎴戜笉鐭ラ亾浠€涔堟儏鍐?   鐢辫繖涓洖璋冨嚱鏁版潵鍒ゆ柇杩樻湁鍑犳鎶藉鏈轰細
15         btn1.onclick=function(){
16             a-=1;
17             x += parseInt(random(10, 30) * 60);
18       img.style.transform = "rotateZ(" + x + "deg)";
19             qq(a);
20 
21         }
22         function qq(x){
23             text.innerhtml=`鎮ㄨ繕鏈?{x}娆℃満浼歚;
24             if(x==0){  //濡傛灉娆℃暟绛変簬0  鍒欎笉鎵ц浠讳綍浜嬩欢
25                 text.innerHTML=`鎮ㄨ繕鏈?娆℃満浼歚;
26                 btn1.onclick=function(){
27                     return false;
28                 }
29             }
30         }