文档章节

HTML5实现方形及圆形倒计时进度条

Mediv
 Mediv
发布于 2015/01/30 14:31
字数 593
阅读 2682
收藏 7

js代码

var Utils = {

    //TODO:注意:0 == ''为true

    isNull: function (obj) {

        if (typeof obj == 'undefined' || obj == null || obj == 'null' || obj == 'NULL' || obj == '') {

            return true;

        } else {

            return false;

        }

    },

};

var Timer = {

    canvas: null,

    config: {

        lineWidth: 3,

        shadowBlur: 3,

        shadowColor: 'yellow',

        strokeStyle: 'red'

    },

    colorList: ["#FFFF99", "#B5FF91", "#94DBFF", "#FFBAFF", "#FFBD9D", "#C7A3ED", "#CC9898", "#8AC007", "#CCC007", "#FFAD5C"],

    getAbsTop: function (obj) {

        var top = obj.offsetTop;

        while (obj.offsetParent != null) {

            obj = obj.offsetParent;

            top += obj.offsetTop;

        }

        return top;

    },

    getAbsLeft: function (obj) {

        var left = obj.offsetLeft;

        while (obj.offsetParent != null) {

            obj = obj.offsetParent;

            left += obj.offsetLeft;

        }

        return left;

    },

    /**

     * target是目标dom, time是时长以s算

     * */

    startTimer: function (target, time, type, finishCall, config, os) {

        var me = this;

        me.setConfig(config);

        var body = document.getElementsByTagName('body')[0];

        var canvas = document.createElement('canvas');

        body.appendChild(canvas);

        canvas.id = 'timer';

        canvas.width = target.offsetWidth + 4;

        canvas.height = target.offsetHeight + 4;

        canvas.style.setProperty('top', (me.getAbsTop(target) - 2) + 'px');

        canvas.style.setProperty('left', (me.getAbsLeft(target) - 2) + 'px');

        var context = canvas.getContext('2d');

        me.setCanvasStyle(context);

        var timer;

        if (type == 'brick') {

            timer = me.drawBrick(context, canvas, time, os, finishCall);

        } else if (type == 'circle') {

            timer = me.drawCircle(context, canvas, time, os, finishCall);

        } else {

            return 'no type';

        }

        return {

            canvas: canvas,

            timer: timer

        };

    },

    setConfig: function (config) {

        if (!Utils.isNull(config)) {

            if (typeof config.lineWidth == 'number') {

                this.config.lineWidth = config.lineWidth;

            }

            if (typeof config.shadowBlur == 'number') {

                this.config.shadowBlur = config.shadowBlur;

            }

            if (!Utils.isNull(config.shadowColor)) {

                this.config.shadowColor = config.shadowColor;

            }

            if (!Utils.isNull(config.strokeStyle)) {

                this.config.strokeStyle = config.strokeStyle;

            }

        }

    },

    setClearColor: function (context) {

        context.shadowColor = '#ffffff';

        context.strokeStyle = '#ffffff';

    },

    setRandomLine: function (context) {

        context.shadowColor = this.getColorByRandom();

        context.strokeStyle = this.getColorByRandom();

    },

    setCanvasStyle: function (context) {

        context.lineWidth = this.config.lineWidth;

        context.shadowBlur = this.config.shadowBlur;

        context.shadowColor = this.config.shadowColor;

        context.strokeStyle = this.config.strokeStyle;

    },

    getColorByRandom: function () {

        var me = this;

        var colorIndex = Math.floor(Math.random() * me.colorList.length);

        return me.colorList[colorIndex];

    },

    drawCircle: function (context, canvas, time, os, finishCall) {

        var r = 0;

        if (canvas.width > canvas.height) {

            r = canvas.height / 2;

        } else {

            r = canvas.width / 2;

        }

        r = r - context.lineWidth;

        var x = canvas.width / 2;

        var y = canvas.height / 2;

        var step = 0, startAngle = 0, endAngle, n = 200, add = Math.PI * 2 / n, counterClockwise = false;

 

        var disTime;

        if (os != 'ios') {

            disTime = time * 1000 / n;

        } else {

            disTime = time / n;

        }

 

        function drawArc(s, e) {

            context.beginPath();

            context.arc(x, y, r, s, e, counterClockwise);

            context.stroke();

        }

 

        //TODO:会执行100次

        var timer = setInterval(function () {

            if (step <= n) {

                endAngle = startAngle + add;

                drawArc(startAngle, endAngle);

                startAngle = endAngle;

                ++step;

            } else {

                clearInterval(timer);

                if (typeof finishCall == 'function') {

                    finishCall();

                }

            }

        }, disTime);

        return timer;

    },

    drawBrick: function (context, canvas, time, os, finishCall) {

        context.lineTo(0, 0);

        var x = 0, y = 0, isBack = false, cWidth = canvas.width, cHeight = canvas.height;

        var zhouchang = (cWidth + cHeight) * 2;

        var disTime;

        if (os != 'ios') {

            disTime = time * 1000 / zhouchang;

        } else {

            disTime = time / zhouchang;

        }

        var timer1 = setInterval(function () {

            if (y < cHeight && !isBack) {

                ++y;

            } else if (x > cWidth || y > cHeight) {

                clearInterval(timer1);

                if (typeof finishCall == 'function') {

                    finishCall();

                }

            } else if (x < 0 || y < 0) {

                clearInterval(timer1);

                if (typeof finishCall == 'function') {

                    finishCall();

                }

            } else if (y == 0 && isBack) {

                --x;

            } else if (x == cWidth) {

                isBack = true;

                --y;

            } else if (y == cHeight && !isBack) {

                ++x;

            } else if (x == 0 && y == 0 && isBack) {

                clearInterval(timer1);

                if (typeof finishCall == 'function') {

                    finishCall();

                }

            }

            context.lineTo(x, y);

            context.stroke();

        }, disTime);

        return timer1;

    }

};

测试代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="Timer.js"></script>

    <style>

        #timer {

            position: absolute;

        }

 

        .test {

            width: 50px;

            height: 50px;

            margin-left: 100px;

            margin-top: 100px;

            border: 1px solid #000000;

        }

        .bg1{

            width: 300px;

            height: 300px;

            margin-top: 200px;

            margin-left: 100px;

            border: 1px solid #000000;

        }

        .bg2{

            width: 200px;

            height: 200px;

            margin-top: -10%;

            margin-left: -10%;

            border: 1px solid #000000;

        }

    </style>

</head>

<body>

<div>

    <div>

        <div></div>

    </div>

</div>

<script>

    var target = document.getElementsByClassName('test')[0];

    var startTime = (new Date()).getTime();

    Timer.startTimer(target, 5, 'circle', function(){

        var endTime = (new Date()).getTime();

        console.log('total time:',endTime - startTime);

    });

</script>

</body>

</html>

 

© 著作权归作者所有

Mediv
粉丝 2
博文 19
码字总数 9698
作品 0
深圳
程序员
私信 提问
加载中

评论(1)

jess2014
jess2014
79
html5新效果,请各位同事本周学习一下

Twitter“点赞”红心按钮CSS3动画特效 http://www.htmleaf.com/Demo/201508302494.html HTML5 SVG制作滚动变形的半圆形页面头部特效 http://www.htmleaf.com/html5/SVG/201508302493.html H......

hi30059478
2016/02/21
14
0
不可错过的前端开发资源大荟萃

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的‘学’与‘习’的...

gbin1
2014/10/22
6
0
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传、上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5...

xhload3d
2015/06/08
0
0
12款程序员们最爱的Bootstrap模板

如果你还没有开始使用Bootstrap模板,那你可真是有够OUT,这是一个帮助你快速开发的工具,Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一...

gbin1
2014/09/18
179
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
5
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
3
0
Java设计模式之外观模式(门面模式)

什么是外观模式   外观模式(Facade),他隐藏了系统的复杂性,并向客户端提供了一个可以访问系统的接口。这种类型的设计模式属于结构性模式。为子系统中的一组接口提供了一个统一的访问接口...

须臾之余
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部