<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Title>document</Title> <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></head><body><h1>放假去哪玩?</h1><div ><button ID="b1"> 开始</button><button ID="b2"> 停止</button></div><div ID="ddiv"> <div > <span >敲代码</span> <span >敲代码</span> <span >敲代码</span> </div> <div > <span >敲代码</span> <span >出去玩</span> <span >敲代码</span> </div> <div > <span >敲代码</span> <span >敲代码</span> <span >敲代码</span> </div></div><script> var b1Ele = document.getElementByID('b1'); /*获取到 b1 对象*/ var b2Ele = document.getElementByID('b2'); /*获取到 b2 对象*/ var span1 = document.getElementsByTagname('span'); /*获取到所有的span标签,对象为字典形式*/ var sum = 0; /*设置一个变量,用来表示span标签的数组位置*/ var s; /*定义变量,来存时间*/ /*数组值的变化,当sum值大于8时,sum变为0,sum+1*/ function a() { if (sum > 8) { sum = 0 } sum += 1; } /*执行的函数*/ function start() { a(); /*去执行a,改变sum的值*/ spans = span1[sum - 1]; /*定义相对应数组位置的对象*/ if (sum == 1) { /*如果sum的值为1,就去还原最后一个框*/ sums = 8; } else { sums = sum - 2; } /*定义相对应数组位置的对象,用来还原颜色*/ var span2 = document.getElementsByTagname('span')[sums]; spans.style.backgroundcolor = '#00a2d4'; /*改变颜色*/ span2.style.backgroundcolor = '#b2b2b2'; /*还原上一个颜色*/ } b1Ele.onclick = function () { /*当点击开始按钮时执行*/ if (!s) { /*定义一个定时器*/ s = setInterval(start,50) } }; b2Ele.onclick = function () { /*当停止按钮点击后清除定时器*/ clearInterval(s); s = null }</script></body></HTML>
以上是内存溢出为你收集整理的一个小小的转盘程序【HTML+CSS+JS】全部内容,希望文章能够帮你解决一个小小的转盘程序【HTML+CSS+JS】所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)