摇股子就是用javascript实现的一个简单的小特效。

下面来看一下我自己做的一个用javascript实现的摇股子。

效果图如下:

我做的股子是由6张图片,点击股子它自己会随机晃动。

代码如下:

   

 案例思路:给三张图片都加一个点击函数,给三张图片一个循环,让这六张图片一直循环显示出来,在script里面获取div的id和三张图片,给图片一个开始点击的函数和停止点击的函数,然后给图片一个随机函数,让它能随机切换,最后给它了一个停止的时候显示的一个数值的判断。

JavaScript摇股子的更多相关文章

  1. 【HTML5 】手机重力与方向感应的应用——摇一摇效果

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  2. JavaScript性能优化之摇树

    作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到 ...

  3. 用JavaScript+HTML实现双色球随机摇号效果

    用JavaScript+HTML实现双色球随机摇号效果 首先要知道双色球的规则是什么 双色球投注区分为红球号码区和蓝球号码区 红球号码范围为01-33,蓝球号码范围为01-16 双色球每期从33个红球 ...

  4. Javascript网页摇一摇

    function init(){ if (window.DeviceMotionEvent) { // 移动浏览器支持运动传感事件 window.addEventListener('devicemot ...

  5. 使用JAVAScript技术在WEB网页实现摇一摇的应用

    实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  7. C#开发微信门户及应用(38)--微信摇一摇红包功能

    摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...

  8. 悟透JavaScript(理解JS面向对象的好文章)

    引子 编程世界里只存在两种基本元素,一个是数据,一个是代码.编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力. 数据天生就是文静的,总想保持自己固有的本色:而代码却天生活泼,总想改变这个 ...

  9. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

随机推荐

  1. Reverse Core 第二部分 - 13章 - PE文件格式

    @date: 2016/11/24 @author: dlive ​ PE (portable executable) ,它是微软在Unix平台的COFF(Common Object File For ...

  2. 如何搞定IE+google双内核的360浏览器表单自动回填兼容问题

    最近开发中碰到一个关于表单问题,在用户提交表单时候浏览器会提示是否保存帐号 如果点击保存,在退出帐号切换其他帐号时,浏览器会自动为表单填充数据,为了解决这个自动填充问题时, 主要分2个思路来解决,一个 ...

  3. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  4. js 固话正则

    var str = '82386012'; var partten = /(^(0\d{2})-(\d{8})$)|(^(0\d{3})-(\d{7})$)|(^(0\d{2})-(\d{8})-(\ ...

  5. 解决MVC4 时间验证Bug

    MVC验证时间控件(my97,时间格式:yyyy-MM-dd HH:mm:ss)  在谷歌浏览器上一切正常.但在火狐和IE 上一直验证不通过 (错误信息:日期格式不对) 猜想是 时间格式的问题..日期 ...

  6. 本人为巨杉数据库(开源NoSQL)写的C#驱动,支持Linq,全部开源,已提交github

    一.关于NoSQL的项目需求 这些年在做AgileEAS.NET SOA 中间件平台的推广.技术咨询服务过程之中,特别是针对我们最熟悉的医疗行业应用之中,针对大数据分析,大并发性能的需求,我们也在慢慢 ...

  7. 通过配置web.config使WCF向外提供HTTPS的Restful Service

    如何通过WCF向外提供Restful的Service请看如下链接 http://www.cnblogs.com/mingmingruyuedlut/p/4223116.html 那么如何通过对web. ...

  8. Express URL跳转(重定向)的实现

    Express URL跳转(重定向)的实现   Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和 ...

  9. getComputedStyle 方法

    一:getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...

  10. [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...