南宁小程序开发,挑战百日学习计划第30天（flex布局-丢骰子)

最新推荐文章于 2021-02-17 10:54:13 发布

zkelm.com

最新推荐文章于 2021-02-17 10:54:13 发布

阅读量365

点赞数 1

分类专栏：小程序南宁小程序开发 css 文章标签： css3 小程序

本文链接：https://blog.csdn.net/zkelm/article/details/106959281

版权

小程序同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

南宁小程序开发

25 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

【南宁小程序开发：www.zkelm.com】，学了CSS 之后顺便接触了一些CSS3.0的语法，感觉css3.0更好玩。接下来准备画费有点时间去把CSS3.0撸一遍，看看到底是啥玩意。

我设计是这样子的：1.点击骰子自动滚动到另外一边，然后随机出现点数
南宁小程序开发公司：zkelm.com
因为我用的是纯CSS写的，所以想了两天，终于想到了好办法，就是先布局7个点，然后随机设置点的背景色=#DDD 这样子看起来。就是点数变化了，而且还不影响骰子的排布变现。 hoho 真聪明！

好咧废话不多说，直接附上代码 copy就可以直接运行，

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>flex制作骰子</title>

  <style>
   body{background: #000;}
   .box{
	position: relative;
    width:90px;
    height: 90px;
    border: 1ps solid #fff;
    background: #bbb;
    border-radius:10px;
    display: flex;
    flex-direction:center;
    justify-content: center;
    align-items:center;	
	
	
   }
   .flexcontainer{
	display: flex;
    width:80px;
    height: 80px;
    border:1px solid #ddd;
    border-radius: 8px;
    background: #ddd;
    box-shadow: 2px 2px 3px #888;
    flex-direction: column;
	flex-wrap:wrap;
	justify-content: space-between;
    
   }
   .flexitems{
    margin:3px;
    width:20px;
    height: 20px;
    background: #000;
    border-radius:50%;
   }
   .column{
   	  display: flex;
	  justify-content: space-between;
	  
   }
   .column:nth-child(2) {
	   justify-content: center;
	   
   }
   myhide{
	   background-color: #ddd;
   }
   myshow{
	   background-color: #f55;
   }
   @keyframes myfirst{
	   0%{left:0px;top:0px;transform:rotate(0deg)}
	   100%{left:400px;top:100px;transform:rotate(3600deg)}
   }
   .moveanimate{
	   animation:myfirst 5s;
   }
  </style>
 </head>
 <body><div class="box" onclick="Addstyle()" >
  <div class="flexcontainer">
	  <div class="column">
           <div id="1" class="flexitems"></div>
           <div id="2"  class="flexitems"></div>
			<div id="3"  class="flexitems"></div>
		   
	</div>
	<div class="column"><div id="4"class="flexitems"></div></div>
	<div class="column">
	        <div id="5" class="flexitems"></div>
	        <div id="6" class="flexitems"></div>
			<div id="7" class="flexitems"></div>
	 </div>
   </div>
  
  </div><br>
 

<script type="text/javascript">
	function Addstyle(){
		setTimeout(function(){
			var spot=Math.round(Math.random()*5)
			
			if(spot==0){
				document.getElementById("1").style.background="#DDDDDD"
				document.getElementById("2").style.background="#DDDDDD"
				document.getElementById("3").style.background="#DDDDDD"
				document.getElementById("4").style.background="#000"
				document.getElementById("5").style.background="#DDDDDD"
				document.getElementById("6").style.background="#DDDDDD"
				document.getElementById("7").style.background="#DDDDDD"
			}else if(spot==1){
				document.getElementById("1").style.background="#000"
				document.getElementById("2").style.background="#DDDDDD"
				document.getElementById("3").style.background="#DDDDDD"
				document.getElementById("4").style.background="#DDDDDD"
				document.getElementById("5").style.background="#DDDDDD"
				document.getElementById("6").style.background="#DDDDDD"
				document.getElementById("7").style.background="#000"
			}else if(spot==2){
				document.getElementById("1").style.background="#000"
				document.getElementById("2").style.background="#DDDDDD"
				document.getElementById("3").style.background="#DDDDDD"
				document.getElementById("4").style.background="#000"
				document.getElementById("5").style.background="#DDDDDD"
				document.getElementById("6").style.background="#DDDDDD"
				document.getElementById("7").style.background="#000"
				
			}else if(spot==3){
				document.getElementById("1").style.background="#000"
				document.getElementById("2").style.background="#DDDDDD"
				document.getElementById("3").style.background="#000"
				document.getElementById("4").style.background="#DDDDDD"
				document.getElementById("5").style.background="#000"
				document.getElementById("6").style.background="#DDDDDD"
				document.getElementById("7").style.background="#000"
			}else if(spot==4){
				document.getElementById("1").style.background="#000"
				document.getElementById("2").style.background="#DDDDDD"
				document.getElementById("3").style.background="#000"
				document.getElementById("4").style.background="#000"
				document.getElementById("5").style.background="#000"
				document.getElementById("6").style.background="#DDDDDD"
				document.getElementById("7").style.background="#000"
				
			}else{
				document.getElementById("1").style.background="#000"
				document.getElementById("2").style.background="#000"
				document.getElementById("3").style.background="#000"
				document.getElementById("4").style.background="#DDDDDD"
				document.getElementById("5").style.background="#000"
				document.getElementById("6").style.background="#000"
				document.getElementById("7").style.background="#000"
			}	
		},1500)
	    document.querySelector(".box").style.animation="myfirst 5s";
		setTimeout(function(){
			document.querySelector(".box").style.animation="";
			
		},5500)
		
	}
	
	
	window.onload=function(){
		document.getElementById("1").style.background="#DDDDDD"
		document.getElementById("2").style.background="#DDDDDD"
		document.getElementById("3").style.background="#DDDDDD"
		document.getElementById("5").style.background="#DDDDDD"
		document.getElementById("6").style.background="#DDDDDD"
		document.getElementById("7").style.background="#DDDDDD"
		
	}
	
</script>
 </body>
</html>

南宁小程序开发：zkelm.com

每天进步1% ，贵在坚持 . 我学到什么新技术我就在这里更新出来给大家参考，见证我学习的脚步.

zkelm.com

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
南宁小程序开发,挑战百日学习计划第30天（flex布局-丢骰子)

【南宁小程序开发：www.zkelm.com】，学了CSS 之后顺便接触了一些CSS3.0的语法，感觉css3.0更好玩。接下来准备画费有点时间去把CSS3.0撸一遍，看看到底是啥玩意。我设计是这样子的：1.点击骰子自动滚动到另外一边，然后随机出现点数因为我用的是纯CSS写的，所以想了两天，终于想到了好办法，就是先布局7个点，然后随机设置点的背景色=#DDD 这样子看起来。就是点数变化了，而且还不影响骰子的排布变现。 hoho 真聪明！好咧废话不多说，直接附上代码 cop
复制链接

扫一扫