一、序言

　　一直很中意win8等待提示圆圈进度条。win8刚出来那会，感觉好神奇!苦于当时没思路，没去研究。通过最近网上找找资料，终于给搞出来了！先上Demo,献丑了！预览请看：win8进度条。

二、简单介绍

　　原生javascript编写，需要理解js基于面向对象编程和圆形坐标计算！

　　实现原理：把每个圆点抽象成一个对象（ProgressBarWin8类型），将每个圆点对象存在数组中（progressArray），延迟执行每个圆点对象的run方法，至于圆点运行速度越来越快，是通过改变定时器延迟毫秒数实现的。

　// 判断元素x与圆心x坐标大小，设置定时器延迟时间

if (this.position.left < this.fixed.left) {

    this.delay += .5;

} else {

    this.delay -= .5;

}

　　还是上源码吧！表达能力实在不怎么好（代码中注释更详细，会看得更明白）。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>仿win8等待进度条</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background: green

        }

    </style>

</head>

<body>

    <script>

        //********准备条件********

        // 弧度角度转换公式：弧度=Math.PI*角度/180; js中Math.sin(),Math.cos()等函数，是根据弧度计算

        // 圆x轴坐标计算公式:Math.cos(Math.PI * 角度/ 180) * 半径 + 圆心x轴坐标

        // 圆y轴坐标计算公式:Math.sin(Math.PI * 角度/ 180) * 半径 + 圆心y轴坐标

        //********准备条件******** 

        // 圆点元素类（js中没有类的概念，这里模拟而已）

        function ProgressBarWin8() {

            // 圆心坐标

            this.fixed = {

                left: 0,

                top: 0

            };

            // html标签元素坐标

            this.position = {

                left: 0,

                top: 0

            };

            this.radius = 70; // 圆半径

            this.angle = 270; // 角度,默认270

            this.delay = 30; // 定时器延迟毫秒

            this.timer = null; // 定时器时间对象

            this.dom = null; // html标签元素

            // html标签元素样式， position需设置成absolute

            this.style = {

                position: "absolute",

                width: "10px",

                height: "10px",

                background: "#fff",

                "border-radius": "5px"

            };

        }

        // js中每个函数都有个prototype对象属性，每个实例都可以访问

        ProgressBarWin8.prototype = {

            // 运行方法

            run: function() {

                if (this.timer) {

                    clearTimeout(this.timer);

                }

                // 设置html标签元素坐标，即计算圆上的点x,y轴坐标

                this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius + this.fixed.left;

                this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius + this.fixed.top;

                this.dom.style.left = this.position.left + "px";

                this.dom.style.top = this.position.top + "px";

                // 改变角度

                this.angle++;

                // 判断元素x与圆心x坐标大小，设置定时器延迟时间

                if (this.position.left < this.fixed.left) {

                    this.delay += .5;

                } else {

                    this.delay -= .5;

                }

                var scope = this;

                // 定时器，循环调用run方法，有点递归的感觉

                this.timer = setTimeout(function () {

                    // js中函数的调用this指向调用者，当前this是window

                    scope.run();

                }, this.delay);

            },

            // html标签元素初始设置

            defaultSetting: function () {

                // 创建一个span元素

                this.dom = document.createElement("span");

                // 设置span元素的样式，js中对象的遍历是属性

                for (var property in this.style) {

                    // js中对象方法可以用.操作符，也可以通过键值对的方式

                    this.dom.style[property] = this.style[property];

                }

                // innerWidth innerHeight窗口中文档显示区域的宽度，不包括边框和滚动条,该属性可读可写。

                // 设置圆心x,y轴坐标，当前可视区域的一般，即中心点

                this.fixed.left = window.innerWidth / 2;

                this.fixed.top = window.innerHeight / 2;

                // 设置span元素的初始坐标

                this.position.left = Math.cos(Math.PI * this.angle / 180) * this.radius + this.fixed.left;

                this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius + this.fixed.top;

                this.dom.style.left = this.position.left + "px";

                this.dom.style.top = this.position.top + "px";

                // 把span标签添加到documet里面

                document.body.appendChild(this.dom);

                // 返回当前对象

                return this;

            }

        };

        // 不明白的，把后面的代码注释掉，先测试一个圆点运行情况

        //new ProgressBarWin8().defaultSetting().run();

        var progressArray = [], // 用于存放每个圆点元素对象数组，js中数组大小可变，类似于list集合

            tempArray = [], // 用于存放progressArray抛出来的每个对象，窗口大小改变后，重置每个对象的圆心坐标

            timer = 200; // 每隔多少毫秒执行一个元素对象run方法的定时器

        // 创建圆点元素对象，存入数组中，这里创建5个对象

        for (var i = 0; i < 5; ++i) {

            progressArray.push(new ProgressBarWin8().defaultSetting());

        }

        // 扩展数组each方法，c#中的lambda大都是这样实现

        Array.prototype.each = function (fn) {

            for (var i = 0, len = this.length; i < len;) {

                // 通过call(object,arg1,arg2,...)/apply(object,[arg1,arg2,...])方法改变函数fn内this的作用域，  以此可用于继承

                fn.call(this[i++], arguments);// 或者：fn.apply(this[i++],arguments)

            }

        };

        // 窗口大小改变事件，重置每个元素对象的圆心坐标

        window.onresize = function () {

            tempArray.each(function () {

                this.fixed.left = window.innerWidth / 2;

                this.fixed.top = window.innerHeight / 2;

            });

        };

        // 每个多少毫秒执行数组集合的元素对象run方法

        timer = setInterval(function () {

            if (progressArray.length <= 0) {

                // 清除此定时器，不然会一直执行（setTimeOut：延迟多少毫秒执行，一次；setInterval：每隔多少毫秒执行，多次）

                clearInterval(timer);

            } else {

                // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

                var entity = progressArray.shift();

                tempArray.push(entity);

                // 执行每个元素对象的run方法

                entity.run();

            }

        },timer);

    </script>

</body>

</html>

三、结束语：

　　好就点个赞！

原生javascript模仿win8等待进度条。的更多相关文章

  1. 混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

    混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...

  2. android 开发 制作弹出等待进度条

    技术点: dialog:ProgressBar:animated-rotate: 弹出框: import com.carspeak.client.R; import android.app.Dialo ...

  3. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  4. JavaScript入门学习(2)--进度条

    <html> <style type="text/css"> #bar{width:0px; height:20px; background:#ee00ff ...

  5. windows phone之山寨win8圆形进度条

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  6. [html][javascript] 关于SVG环形进度条

    下面是个例子: <style> .demo2{ transform-origin: center; transform: rotate(-90deg); transition: strok ...

  7. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  8. 【Web】前端文件上传，带进度条

    最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...

  9. web文件上传，带进度条

    原生ajax上传带进度条 (百分比) <%@ page language="java" contentType="text/html; charset=UTF-8& ...

随机推荐

  1. 理解 python metaclass使用技巧与应用场景分析

    理解python metaclass使用技巧与应用场景分析       参考: decorator与metaclass:http://jfine-python-classes.readthedocs. ...

  2. 转：ecshop商品分类页获取相册列表方法

    ecshop商品分类页获取相册列表方法 很久之前就看到过你好在商品列表页有获取到相册列表,但是一直没有实践过,感觉应该挺简单的吧,但是最近手上的项目刚好就需要这个功能,然后就想到网上查下资料,至少找个 ...

  3. 在线制作h5

    在线制作h5 官网:http://www.godgiftgame.com 在线制作h5首页预览效果图如下: 一.主要功能区域主要功能区域分布在上中左右三个地方,1.上面区域是功能选择区,包括图片素材. ...

  4. Mesos源码分析

    Mesos源码分析(1): Mesos的启动过程总论 Mesos源码分析(2): Mesos Master的启动之一 Mesos源码分析(3): Mesos Master的启动之二 Mesos源码分析 ...

  5. Navicat for MySQL Mac 破解版

    今天在macOS 系统下搭建 Java开发环境,需要配置MySQL,按照Windows的习惯,使用Navicat for MySQL 操作比较习惯.然后找不到比较好的破解版,这里介绍一个老版的,还是英 ...

  6. 批处理Ping服务器

    for /f "tokens=2,*" %%i in ('reg query "HKCU\Software\Microsoft\Windows\CurrentVersio ...

  7. Digg Reader 登录不了，原来如此

    cdnjs.cloudflare.com 不能访问,你懂的,给 https://cdnjs.cloudflare.com 跟 http://cdnjs.cloudflare.com 架个梯子就可以了, ...

  8. java之多态(Polymorphic)、动态绑定(Dynamic Binding)、迟绑定(Late Binding)

    今天,我们来说说java面向对象最核心的东西,多态.通过多态可以使我们的程序可复用性达到极致,这就是我们为什么要学多态的原因. “多态”(Polymorphic)也叫“动态绑定”(Dynamic Bi ...

  9. U盘FAT32转换NTFS格式

    运行----cmd----convert x:/fs:ntfs回车 x标识你的U盘或硬盘盘符 比如你的U盘是H盘,那就是h:/fs:ntfs  FAT32----NTFS是不可逆转的转换.

  10. 解决clone问题之外的体会

    adlnkoh.sh started at Thu Aug 25 15:42:51 CST 2016 Log file located at /u02/db/testdb/11.1.0/appsuti ...