一个小小的转盘 【HTML+CSS+JS】

 

放假去哪玩？

开始 停止

敲代码 敲代码 敲代码

敲代码 出去玩 敲代码

敲代码 敲代码 敲代码

 

 

 

 

<p>&nbsp;</p>
<style><!--
/*初始边距 为0*/
        body {
            margin: 0;
            padding: 0;
        }
        /*设置h1左边界*/
        h1 {
            margin-left: 300px;
        }
        /* 每行dvi的宽度*/
        .div1 {
            width: 400px;
            height: 100px;

        }
        /*设置每个span*/
        .left1 {
            text-align: center; /* 内容居中*/
            line-height: 100px; /* 字体行高*/

            width: 120px; /*高度*/
            height: 120px;/*宽度*/
            border: 0.3px solid beige; /*边框*/
            background-color: #b2b2b2; /*背景色*/
            float: left; /*向左浮动*/
        }
        /*设置包含按钮的DIV */
        .button1 {
            margin-left: 270px;
            margin-bottom: 20px;

        }
        /*设置按钮*/
        .button1 button {
            width: 100px;
            height: 30px;
            background-color: #00a2d4;
            border-radius: 60%;
            margin-right: 20px;

        }
        /*清除按钮点击后的焦点样式*/
        button:focus{
            outline: none;
        }
        /*设置大DIV的属性*/
        #ddiv {
            width: 360px;
            height: 360px;
            margin-left:  200px;
            padding: -2px;
            background-color: #00a2d4;
            overflow: hidden;  /*设置溢出效果为：内容被剪切，并不可见*/
            border-radius: 20%; /* 实现圆角框的效果*/
        }
--></style>
<h1>放假去哪玩？</h1>
<div class="button1"><button id="b1"> 开始</button> <button id="b2"> 停止</button></div>
<div id="ddiv">
<div class="div1"><span class="left1">敲代码</span> <span class="left1">敲代码</span> <span class="left1">敲代码</span></div>
<div class="div1"><span class="left1">敲代码</span> <span class="left1">出去玩</span> <span class="left1">敲代码</span></div>
<div class="div1"><span class="left1">敲代码</span> <span class="left1">敲代码</span> <span class="left1">敲代码</span></div>
</div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/tyler-bog/aaa.js"></script>