当前位置: 首页 > 编程日记 > 正文

动态加载的html没有js效果,JS利用html5实现loadding动态加载效果代码实例

51前端

window.οnlοad=function(){

var Loading = function (canvas, options) {

this.canvas = document.getElementById(canvas);

this.options = options;

};

Loading.prototype={

constructor: Loading,

show: function(){

var canvas = this.canvas,

begin = this.options.begin,

old = this.options.old,

lineWidth = this.options.lineWidth,

canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},

ctx = canvas.getContext("2d"),

color = this.options.color,

num = this.options.num,

angle = 0,

lineCap = this.options.lineCap,

CONST_PI = Math.PI * (360 / num) / 180;

window.timer = setInterval(function () {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for(var i = 0; i < num; i += 1){

ctx.beginPath();

ctx.strokeStyle = color[num - 1 - i];

ctx.lineWidth = lineWidth;

ctx.lineCap= lineCap;

ctx.moveTo(canvasCenter.x

+ Math.cos(CONST_PI * i + angle) * begin, canvasCenter.y

+ Math.sin(CONST_PI * i + angle) * begin);

ctx.lineTo(canvasCenter.x

+ Math.cos(CONST_PI * i + angle) * old, canvasCenter.y

+ Math.sin(CONST_PI * i + angle) * old);

ctx.stroke();

ctx.closePath();

}

angle += CONST_PI;

console.log(angle)

},50);

},

hide: function () {

clearInterval(window.timer);

}

};

(function(){

var options = {

num : 8,

begin: 20,

old: 40,

lineWidth: 10,

lineCap: "round",

color: ["rgb(0, 0, 0)",

"rgb(20, 20, 20)",

"rgb(40, 40, 40)",

"rgb(60, 60, 60)",

"rgb(80, 80, 80)",

"rgb(100, 100, 100)",

"rgb(120, 120, 120)",

"rgb(140, 140, 140)"]

};

var loading = new Loading("canvas", options);

loading.show();

}());

}

相关文章:

iOS 自动布局框架 – Masonry 详解

来源&#xff1a;伯乐在线 - 刘小壮 如有好文章投稿&#xff0c;请点击 → 这里了解详情 如需转载&#xff0c;发送「转载」二字查看说明 目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了&#xff0c;但是在一些变化比较复杂的页面&#xff0c;还是…

GDC2016 Epic Games【Bullet Train】 新风格的VR-FPS的制作方法

追求“舒适”和“快感”的VR游戏设计方法http://game.watch.impress.co.jp/docs/news/20160318_749016.html【Bullet Train】演讲的状况在游戏的创造历史上&#xff0c;有那种决定性的创新&#xff0c;以及高完成度的作品&#xff0c;对于FPS风格来说&#xff0c;【DOOM】就是这…

例4-1和例4-2和例4-3

public class ComputerCircleArea{ public static void main(String args[]){ double radius; double area; radius163.16; area3.14*radius*radius; System.out.printf("半径是%5.3f的圆的面积:\n%5.3f\n",radius,area); }} class Circle{ double radius; doubl…

html中的两种标记,如何在html选项标记中实现两种不同的对齐?

下面是一个单空间js解决方案,与scott everden的jquery示例一起使用。我只在firefox中测试过,但这应该足够开始了。javascriptvar MIN_SPACES_BETWEEN_VALS 3;function mkOption(left, right, total){var str left;var spaces total - left.length - right.length;for(x 0;x…

html标签(2)--有序列表与无序列表

有一些内容形式&#xff0c;用div来实现非常麻烦&#xff0c;也不适合 例如一些表格形式 无序列表 ul 代表列表 li 代表列表中的项 list-style 控制列表的样式 有序列表 ol 代表列表 li 代表列表中的项 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN…

Swift3实现的绘制股票K线库, FastImageCache提升图片的加载和渲染速度,Chameleon颜色框架

代码1:用Swift3实现的绘制股票K线库 for iOS & macOS代码地址&#xff1a;网页链接代码2:FastImageCache是Path团队开发的一个开源库&#xff0c;用于提升图片的加载和渲染速度&#xff0c;让基于图片的列表滑动起来更顺畅。代码地址&#xff1a;网页链接代码3&#xff1a;…

传智播客还收费 兄弟会都是免费的

【传智播客还收费 兄弟会都是免费的 兄弟连兄弟会it开发培训 www.itxdh.net 企鹅群&#xff1a;499956522 高端人才培养就到【兄弟连兄弟会it开发培训】纯免费的高端IT人才培养】 传智播客&#xff0c;一个多么具有戏剧性的词眼&#xff0c;以前张孝祥老师建校的初衷就是为了让…

用计算机的英语造句process,process的用法总结大全

process的意思n. 过程,工序,做事方法,工艺流程vt. 加工,处理,审阅,审核vi. 列队行进adj. 经过特殊加工(或处理)的变形&#xff1a;过去式: processed&#xff1b; 现在分词&#xff1a;processing&#xff1b; 过去分词&#xff1a;processed&#xff1b;process用法process可以…

iOS进阶之页面性能优化

作者: hi_xgb 地址: http://www.jianshu.com/p/1b5cbf155b31 前言 在软件开发领域里经常能听到这样一句话&#xff0c;“过早的优化是万恶之源”&#xff0c;不要过早优化或者过度优化。我认为在编码过程中时刻注意性能影响是有必要的&#xff0c;但凡事都有个度&#xff0c;不…

LabelMe图像数据集下载

Download MATLAB Toolbox for the LabelMe Image Database 利用Matlab Toolbox工具箱下载图像库 一、下载Matlab Toolbox工具箱 1. Github repository We maintain the latest version of the toolbox on github. To pull the latest version, make sure that "git" …

win8计算机管理没有用户组,Win8右键计算机管理提示“该文件没有与之关联的程序”怎么办?...

最近有Win8用户反映&#xff0c;右键计算机管理的时候&#xff0c;出现提示“该文件没有与之关联的程序来执行该操作”&#xff0c;这让用户非常苦恼。那么&#xff0c;Win8右键计算机管理提示“该文件没有与之关联的程序”怎么办呢&#xff1f;下面&#xff0c;我们就一起往下…

Objective-C 自动生成文档工具:appledoc

来源&#xff1a;iOS_小松哥 www.jianshu.com/p/fd4d8d6b6177 如有好文章投稿&#xff0c;请点击 → 这里了解详情 由于最近琐事比较多&#xff0c;所以好久没有写文章了。今天我们聊一聊Objective-C自动生成文档。 做项目的人多了&#xff0c;就需要文档了。手工写文档是一件…

linux命令--提升

查看系统进程&#xff1a;top 查看磁盘空间&#xff1a; df -h 查询系统负载: uptime , 以下显示输入uptime的信息&#xff1a; 04:03:58 up 10 days, 13:19, 1 user, load average: 0.54, 0.40, 0.20 1.当前时间 04:03:58 2.系统已运行的时间 10 days, 13:19 3.前在线用户…

git 从远程主服务器当中创建新分支

现有版本; h20, h28&#xff0c;h26,i8 h28&#xff0c;h26,i8是从H20下面创建的。 需求: 从H28下面创建新分支继续开发。 思路&#xff1a; 所有代码均是放置到H20上仓库当中&#xff0c;首先下载H20完整仓库&#xff0c;也就是.git文件夹当中内容&#xff0c;其本质是一个ZIP…

涉密计算机用户账号设置审批表,北京邮电大学涉密计算机配置审批表.PDF

北京邮电大学涉密计算机配置审批表北京邮电大学涉密计算机配置审批表使用部门 品牌型号涉密计算机类型 ?台式机 ?便携机 资产编号用途 ?科研 ?办公 ?其他 配置日期硬盘序列号中央处理器硬盘容量CPU基本配置 内 存显示器品牌型号MAC 地址操作系统版本 操作系统安装时间放置…

Oracle 正则表达式

ORACLE中的支持正则表达式的函数主要有下面四个&#xff1a;1&#xff0c;REGEXP_LIKE &#xff1a;与LIKE的功能相似2&#xff0c;REGEXP_INSTR &#xff1a;与INSTR的功能相似3&#xff0c;REGEXP_SUBSTR &#xff1a;与SUBSTR的功能相似4&#xff0c;REGEXP_REPLACE &#x…

制作 Swift 和 Objective-C Mixed 的 Pod

来源&#xff1a;南栀倾寒 www.jianshu.com/p/c7623c31d77b 如有好文章投稿&#xff0c;请点击 → 这里了解详情 知识背景 What is CocoaPods&#xff08;https://guides.cocoapods.org/using/getting-started.html&#xff09; What did CocoaPods do&#xff1f;&#x…

SearchRequestBuilder常用方法说明

SearchRequestBuilder常用方法说明 (1) setIndices(String... indices)&#xff1a;上文中描述过&#xff0c;参数可为一个或多个字符串&#xff0c;表示要进行检索的index&#xff1b;(2) setTypes(String... types)&#xff1a;参数可为一个或多个字符串&#xff0c;表示要进…

计算机知识课后反思,计算机硬件和软件知识课后反思

计算机硬件和软件知识课后反思《计算机系统组成》—计算机硬件和软件知识一课是七年级信息技术中《信息技术基础》里的知识。在学习这之前&#xff0c;学生虽然都使用过计算机&#xff0c;但对于计算机的系统组成、主机内的硬件知识基本知之甚少。但是对这些知识学生又充满了好…

iOS超全开源框架、项目和学习资料汇总:UI篇

2017-01-30 iOS巍 CocoaChina原文 上下拉刷新控件 1. MJRefresh --仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。&#xff08;推荐&#xff09; 2. SVPullToRefresh --下拉刷新控件4500star&#xff0c;…

NYOJ 90 —— 求正整数n划分为若干个正整数的划分个数

整数划分 时间限制&#xff1a;3000 ms | 内存限制&#xff1a;65535 KB描述将正整数n表示成一系列正整数之和&#xff1a;nn1n2…nk&#xff0c; 其中n1≥n2≥…≥nk≥1&#xff0c;k≥1。 正整数n的这种表示称为正整数n的划分。求正整数n的不 同划分个数。 例如正整数6有如…

调整命令行的列数和行数 mode con: cols=100 lines=10000

mode con: cols100 lines10000转载于:https://www.cnblogs.com/passer1991/archive/2013/03/25/2980285.html

写一个 iOS 复杂表单的正确姿势

前言 这几天项目的新需求中有个复杂的表单界面&#xff0c;在做的过程中发现要比想象中复杂很多&#xff0c;有好多问题需要处理。有很多东西值得写下来好好梳理下。 需求分析&#xff1a; 6创建网店1.png上图便是UI根据需求给的高保真&#xff0c; 我们先根据这张图片来描述一…

2014计算机三级网络技术,2014计算机三级网络技术综合题解题思路

2014计算机三级网络技术综合题解题思路,全部自码第一小题 IP地址的计算公式正常IP地址计算&#xff1a;已知IP地址&#xff1b;子网掩码&#xff1b;地址类别&#xff1a;A类地址&#xff1a;1—126(00)B类地址&#xff1a;128—191(10)C类地址&#xff1a;192—223(110) D类地…

word 生成HTML

View Code 1 string wordPath Server.MapPath("/Fileword/" FileUpload1.FileName); 2 string htmlPath Server.MapPath("/Fileword/测试.html");3 //上传word文件4 FileUpload1.SaveAs(wordP…

CCF系列之画图(201409-2)

试题编号&#xff1a; 201409-2试题名称&#xff1a; 画图时间限制&#xff1a; 1.0s内存限制&#xff1a; 256.0MB问题描述&#xff1a; 问题描述在一个定义了直角坐标系的纸上&#xff0c;画一个(x1,y1)到(x2,y2)的矩形指将横坐标范围从x1到x2&#xff0c;纵坐标范围从y1到y2…

大连理工计算机专业导师,大连理工大学计算机科学与技术学院研究生导师简介-申彦明...

大连理工大学计算机科学与技术学院研究生导师简介-申彦明大连理工大学 免费考研网/2016-05-04申彦明院系&#xff1a;计算机科学与技术学院办公电话&#xff1a;无电子信箱&#xff1a;shendlut.edu.cn更新时间&#xff1a;2014-4-4其他专业&#xff1a;计算机系统结构个人简介…

iOS基础问答面试题连载-附答案

2017-02-02 timhbw CocoaChina以下是一些自己收集的比较基础的问题&#xff08;大神可以忽略&#xff09;&#xff0c;附上答案&#xff0c;方便大家阅读。俗话说得好&#xff0c;基础不牢&#xff0c;地动山摇。文章末尾会提供PDF版的文档&#xff0c;方便大家木有网的时候也可…

一个非常简单的 ASP.NET MVC 示例:长轮询(又叫:反向 AJAX,英文名:Comet)实现...

关于 长轮询&#xff08;又叫&#xff1a;反向 AJAX&#xff0c;英文名&#xff1a;Comet&#xff09;的介绍&#xff0c;请查看&#xff1a;反向Ajax&#xff0c;第1部分&#xff1a;Comet介绍 下面是代码实现&#xff1a; UI: <p><input type"button" onc…

周记 2016.4.5

1. BUILD_IDpleaseDontKillMe /usr/local/tomcat_car/bin/shutdown.sh /usr/local/tomcat_car/bin/startup.sh 2. windown中mysql解压版设置密码: 最开始mysql没有密码&#xff0c;启动mysql后&#xff1a; cmd -- mysql -u root ----- use mysql , 然后执行下面命令 update…