文档章节

一个很简单的H5的转盘抽奖的(主要用的是css3的属性)

tianyuqin
 tianyuqin
发布于 2016/10/24 17:08
字数 179
阅读 370
收藏 1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5抽奖的</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .luck{
            width: 600px;
            height: 600px;
            position: relative;
            border: 1px solid #cccccc;
            margin: 0 auto;
        }
        .draw{
            background-image:url("../imge/luckdraw.png");
            background-repeat: no-repeat;
            background-size: cover;
            text-align: center;
            width: 600px;
            height: 600px;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }
        .shot{
            background-image:url("../imge/luckshot.png");
            background-repeat: no-repeat;
            background-size: cover;
            text-align: center;
            width: 196px;
            height: 246px;
            position: absolute;
            top: 153px;
            left: 196px;
            z-index: 3;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="luck">
    <div class="draw" id="draw">
    </div>
    <div class="shot" id="btn">
       <!-- <button>抽奖的</button>-->
    </div>
</div>

</body>
<script>
    var draw = document.getElementById('draw');
    var btn = document.getElementById('btn');
    var timer;
    btn.onclick = function(){
        var t = 0;
        var stopT = parseInt(1+Math.random()*10)*1000;
       clearInterval(timer);
        timer = setInterval(function(){
            if(t >= 360){
                t = 0;
            }else{
                t = t+1;
            }
            draw.style.transform = 'rotate('+t+'deg)';
        },20);

        setTimeout(function(){
            clearInterval(timer);
        },stopT);
    }
</script>
</html>

© 著作权归作者所有

tianyuqin
粉丝 1
博文 23
码字总数 8481
作品 0
成都
程序员
私信 提问
用 JavaScript 和 C3 实现一个转盘小游戏

本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏,由于改实现可以有不同方式,如果熟悉canvas的话也可以用canvas实现,本文采用js和css实现主要考虑...

徐小夕
07/23
0
0
Rattenking/LuckDraw

@file H5转盘抽奖插件 @author 梁亚军 1148063373@qq.com 2018.11.15 luckDraw.js 文件参数说明 DEMO地址 转盘抽奖指针旋转DEMO预览 转盘抽奖转盘旋转DEMO预览 九宫格抽奖DEMO预览 插件效果图...

Rattenking
03/02
0
0
在微信上呈现大转盘抽奖活动(很简单,速来捡钱)

大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,主要用于通过微信公众号推广此活动,实现网站用户注册。基本要求如下: 1. 抽奖活动的项目可通...

xl123666
2016/01/25
28
0
在微信上呈现大转盘抽奖活动(很简单,速来捡钱)

大转盘是一种抽奖活动类型,本项目要求开发一套界面美观,配置灵活,逻辑严谨的大转盘抽奖活动,主要用于通过微信公众号推广此活动,实现网站用户注册。基本要求如下: 1. 抽奖活动的项目可通...

xl123666
2016/01/23
33
0
从零开始完成 React Native 抽奖

从零开始完成React Native 九宫格抽奖 本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布...

王程1488767817000
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可见性有序性,Happens-before来搞定

写在前面 上一篇文章并发 Bug 之源有三,请睁大眼睛看清它们 谈到了可见性/原子性/有序性三个问题,这些问题通常违背我们的直觉和思考模式,也就导致了很多并发 Bug 为了解决 CPU,内存,IO ...

tan日拱一兵
27分钟前
2
0
网络七层模型与TCP/UDP

为了使全球范围内不同的计算机厂家能够相互之间能够比较协调的进行通信,这个时候就有必要建立一种全球范围内的通用协议,以规范各个厂家之间的通信接口,这就是网络七层模型的由来。本文首先...

爱宝贝丶
31分钟前
2
0
Jenkins World 贡献者峰会及专家答疑展位

本文首发于:Jenkins 中文社区 原文链接 作者:Marky Jackson 译者:shunw Jenkins World 贡献者峰会及专家答疑展位 本文为 Jenkins World 贡献者峰会活动期间的记录 Jenkins 15周岁啦!Jen...

Jenkins中文社区
48分钟前
8
0
杂谈:面向微服务的体系结构评审中需要问的三个问题

面向微服务的体系结构如今风靡全球。这是因为更快的部署节奏和更低的成本是面向微服务的体系结构的基本承诺。 然而,对于大多数试水的公司来说,开发活动更多的是将现有的单块应用程序转换为...

liululee
今天
7
0
OSChina 周二乱弹 —— 我等饭呢,你是不是来错食堂了?

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 自行车丢了:给主编推荐首歌 《クリスマスの夜》- 岡村孝子 手机党少年们想听歌,请使劲儿戳(这里) @烽火燎原 :国庆快来,我需要长假! ...

小小编辑
今天
817
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部