html5在线考试倒计时,html5 canvas 实现倒计时 功能
function showTime(a) {
var b = {
id: "showtime", //canvasid
x: 60, //中心点坐标 X轴;
y: 60, //中心点坐标 Y轴;
radius: 60, //圆的半径
angle: 0, //角度 无需设置
linewidth: 6, //线的宽度
backround: "#d65554", //倒计时背景色
color: "#e4e4e4", //填充色
day: 0,
time: 0,
minute: 0,
seconds: 0
}
//若参数有更新则合并
if (a) {
b = $.extend(b, a);
}
this.total = 0;
this.id = b.id;
this.x = b.x;
this.y = b.y;
this.radius = b.radius;
this.angle = b.angle;
this.linewidth = b.linewidth;
this.backround = b.backround;
this.color = b.color;
this.time = b.time;
this.day = b.day;
this.minute = b.minute;
this.seconds = b.seconds;
var canvas = document.getElementById(this.id);
if (canvas == null) {
return false;
}
var ctx = canvas.getContext("2d");
this.creatText = function() {
ctx.fillStyle = "#000";
ctx.font = "13px Arial";
ctx.fillText("剩余时间", 32, 38);
ctx.fillStyle = "#333";
if (Number(this.day) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.day), 13, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("天", 38, 75);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.time), 58, 75);
ctx.font = "14px Arial";
ctx.fillStyle = "#333";
ctx.fillText("小时", 82, 75);
} else if (Number(this.time) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.time), 11, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("小时", 33, 75);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.minute), 61, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("分钟", 84, 75);
} else if (Number(this.minute) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.minute), 13, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("分钟", 35, 75);
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.seconds), 65, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("秒", 90, 75);
} else if (Number(this.seconds) > 0) {
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr(this.seconds), 40, 75);
ctx.font = "13px Arial";
ctx.fillStyle = "#333";
ctx.fillText("秒", 65, 75);
}else{
ctx.font = "22px Arial";
ctx.fillStyle = "#000";
ctx.fillText(getStr("00:00"), 31, 75);
}
function getStr(num) {
return num.toString().length < 2 ? "0" + num : num;
}
},
showTime.prototype.creatEle = function() {
var _w = canvas.getAttribute("width");
var _h = canvas.getAttribute("height");
ctx.clearRect(0, 0, _w, _h); //清楚canva绘制区域
ctx.save();
ctx.restore();
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(-Math.PI / 2)
if(this.angle == 360){
ctx.fillStyle = this.color;
}else{
ctx.fillStyle = this.backround;
}
ctx.beginPath();
ctx.arc(0, 0, this.radius-0.5, Math.PI / 180 * 0, Math.PI * 2, true);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(-Math.PI / 2)
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(0, 0, this.radius, Math.PI / 180 * this.angle, Math.PI * 2, true);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.restore();
ctx.save();
ctx.beginPath();
var linew = this.radius - this.linewidth;
ctx.arc(this.x, this.y, linew, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fillStyle = 'white';
ctx.fill();
ctx.restore();
this.creatText();
};
this.creatEle();
}
var countdown = function(startTime, lastTime, nowTime, step) {
this.startTime = startTime; //服务器开始时间
this.lastTime = lastTime; //服务器到期时间
this.nowTime = nowTime; //服务器当前时间
this.alltime = this.lastTime - this.startTime; //总时间段
this.step = step * 1000; //执行的阶段时间，一般是1秒
};
countdown.prototype = {
atTime: function(a, b) {
//参数说明：a:到期回调方法，b:倒计时回调方法
var that = this;
//var timeold = parseFloat(Number(that.lastTime) - Number(that.startTime));
var timeold = that.lastTime - that.nowTime;
var msPerDay = 24 * 60 * 60 * 1000;
var e_daysold = timeold / msPerDay;
var daysold = Math.floor(e_daysold); //天
var e_hrsold = (e_daysold - daysold) * 24;
var hrsold = Math.floor(e_hrsold); //小时
var e_minsold = (e_hrsold - hrsold) * 60;
var minsold = Math.floor((e_hrsold - hrsold) * 60); //分钟
var seconds = Math.round((e_minsold - minsold) * 60); //秒
var msSeconds = Math.ceil(Math.round(((e_minsold - minsold) * 60 - seconds) * 1000) / 100) * 10;
var totaltime = that.lastTime - that.nowTime;
var timeangle = 360 - totaltime / (that.alltime / 360);
if (msSeconds == 100) {
msSeconds = 99;
}
if (that.nowTime > that.lastTime) {
arguments[0]();
} else {
arguments[1](that.getStr(daysold), that.getStr(hrsold), that.getStr(minsold), that.getStr(seconds), that.getStr(msSeconds),Math.floor(timeangle));
that.nowTime = parseInt(that.nowTime) + that.step;
window.setTimeout(function() {
that.atTime(a,b);
}, that.step);
}
},
getStr: function(num) {
return num.toString().length < 2 ? "0" + num : num;
}
};
$(function() {
var startTime = 1437765600000; //开始时间
var lastTime = 1437766880000; //结束时间
var nowTime = 1437766850000; //服务器当前时间
var showtime = new countdown(startTime, lastTime, nowTime,1)
showtime.atTime(function(){},function(){
var one = new showTime({
id:"showtime",
day:arguments[0],
time:arguments[1],
minute:arguments[2],
seconds:arguments[3],
angle:arguments[5]
})
one.creatEle();
});
})
以上代码为一个 canvas的倒计时功能，拷贝粘贴即可使用，
使用方法如下:
$(function() {
var startTime = 1437765600000; //开始时间
var lastTime = 1437766880000; //结束时间
var nowTime = 1437766850000; //服务器当前时间
var showtime = new countdown(startTime, lastTime, nowTime,1)
showtime.atTime(function(){},function(){
var one = new showTime({
id:"showtime",
day:arguments[0],
time:arguments[1],
minute:arguments[2],
seconds:arguments[3],
angle:arguments[5]
})
one.creatEle();
});
})
详细设置参数如下：
id: "showtime", //canvasid
x: 60, //中心点坐标 X轴;
y: 60, //中心点坐标 Y轴;
radius: 60, //圆的半径
angle: 0, //角度 无需设置
linewidth: 6, //线的宽度
backround: "#d65554", //倒计时背景色
color: "#e4e4e4", //填充色
day: 0,
time: 0,
minute: 0,
seconds: 0
实现效果如下：
不满一天，显示，小时/分钟，不满一小时显示 分钟/秒 不满一分钟显示 / 秒，不满一秒显示 00:00
代码逻辑比较简单，当然还有很大的优化空间，比较忙暂不做优化，希望能对后来者有所帮助吧。
利用canvas实现倒计时功能
wxml代码:
HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...
导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
赠书：HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
用html5 canvas和JS写个数独游戏
为啥要写这个游戏? 因为我儿子二年级数字下册最后一章讲到了数独.他想玩儿. 因为我也想玩有提示功能的数独. 因为我也正想决定要把HTML5和JS搞搞熟.熟悉一个编程平台,最好的办法,就是了解其原理与思 ...
随机推荐
VO,DO,DTO,PO,POJO，EJB
PO:persistent Object,持久化对象,和数据库一一对应. VO:view Object,视图对象,用于展示,把某个页面或者组件的数据封装起来. DO:Domain Object,领域对 ...
240. Search a 2D Matrix II
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
智能 RPC框架 (C++)
RPC中文叫远程函数调用,它是一种通信方式,只是看起来像普通的函数调用. 它包括三个基本要素: 1:服务端注册相应的(服务)函数(用于调用方调用) 2:调用方通过函数调用的方式将一些信息和参数打包到消 ...
Asp.net MVC 4 Html帮助类
Html帮助类 used to render (modify and output) HTML form elements 用来渲染HTML表单元素(修改和输出) Html.ActionLink 输出 ...
Bitmap、BitmapDrawable、BitmapFactory、Matrix类之间的关系
1.BitmapFactory是一个工具类 Bitmap实现在android.graphics包中.但是Bitmap类的构造函数是私有的,外面并不能实例化,只能是通过JNI实例化.这必然是 某个辅助类 ...
取得正在运行的Activity
在main.xml中: <?xml version="1.0" encoding="utf-8"?>
【stanford C++】字符串(String)与流(Stream)
字符串(String)与流(Stream) 一.C++中字符串(String) 字符串(String):就是(可能是空的)字符序列. C++中的字符串在概念上和Java中的字符串类似. C++字符串用 ...
在 JavaScript 中 prototype 和 __proto__ 有什么区别
本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...
ubuntu12.04：Mysql数据库：手动安装
首先到mysql的下载中心上下载最新的tar.gz包: 1.在浏览器中输入http://www.mysql.com/downloads/ 进入mysql的下载中心,在这里有使用mysql开发的一些工具 ...
微博第三方登录使用social_django实现显示登陆的用户名
首先修改social_soce源码,将用户信息添加进cookie 将其修改为: response = backend.strategy.redirect(url) payload = jwt ...
html5在线考试倒计时,html5 canvas 实现倒计时 功能相关推荐
- html5在线天数计时器,JS实现动态倒计时功能（天数、时、分、秒）
写在前面: 实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数.时.分.秒.由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行 ...
- html5在线考试开发,基于HTML5的无纸化在线考试系统.docx
摘要: 本系统为实际商业项目的一部分,是基于面向无纸化考试过程中的核心模块之一.无论是界面视觉还是操作都充分考虑了用户的需求,力求开发出一个美观严谨性能稳定的考试系统.考试的安排.出题.答题.阅卷都实 ...
- html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画 在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例 要在HTML5画布上绘制 ...
- html5基础考试选择题,HTML5 基础测试题
1.HTML5 之前的 HTML 版本是什么?() 2.HTML5 的正确 doctype 是?() C. 3.在 HTML5 中,哪个元素用于组合标题元素?() 4.HTML5 中不再支持下面哪个元 ...
- 在线考试系统的时间控制（倒计时）
在线考试系统的时间控制倒计时跟一般的html倒计时的区别:html可以很轻松地实现倒计时,但是页面刷新的同时,时间回到原点,根本没啥用.但是在线考试系统的时间控制是通过时间同步来实现真真正正的倒计时以 ...
- 在线考试系统的倒计时
最近在做一个在线考试系统,设计到倒计时的设置,其实非常简单,只要设置一个变量,然后再Ajax的time控件的事件中递减即可.代码如下: //触发Timer控件的Timer1_Tick事件实现考试倒计时 ...
- 基于springboot在线考试报名系统毕业设计源码031706
在线考试报名系统 摘 要 随着计算机技术的迅猛发展,学校教学和管理的信息化发展也有长足的进步,考试也是一样.与传统的考试方式相比,网络考试报名系统极大地提高了考试的灵活性,并在许多领域已经有了广泛的应 ...
- （附源码）基于springboot在线考试报名系统 毕业设计031706
在线考试报名系统 摘 要 随着计算机技术的迅猛发展,学校教学和管理的信息化发展也有长足的进步,考试也是一样.与传统的考试方式相比,网络考试报名系统极大地提高了考试的灵活性,并在许多领域已经有了广泛的应 ...
- 基于springboot在线考试报名系统 毕业设计-附源码031706
在线考试报名系统 摘 要 随着计算机技术的迅猛发展,学校教学和管理的信息化发展也有长足的进步,考试也是一样.与传统的考试方式相比,网络考试报名系统极大地提高了考试的灵活性,并在许多领域已经有了广泛的应 ...
最新文章
- PyTorch中文版官方教程来啦（附pdf下载）
- GDCM：gdcm::EnumeratedValues的测试程序
- 10分钟采集凡客最新的省、市、区、邮政编码和电话区号（附源码）
- 使用Apache Tomcat Maven插件部署运行 Web 项目
- opencv14-自定义线性滤波
- android提示程序正在执行,Android中获取正在运行的进程（一）
- 【CCCC】L2-006 树的遍历 (25分)，根据后序与中序遍历建立二叉树（我讨厌树，系列1）
- oracle12c 常用视图,oracle12c v$sql视图字段全解
- 个人发卡网站源码运营版 内置4套模板
- Xsens MVN Analyze高精度惯性动作捕捉系统Link版
- 2022年终工作总结PPT模板来了~
- F# 图形数学基础。
- 定时器：setTimeout（）
- 理解-1NF,2NF,3NF
- Socket详解-socket建立
- win7c盘空间越来越小：C盘哪些文件可以清理删除呢
- 用 python 脚本，把当前目录及子目录下的 wav 音频文件转换为 flac 格式
- scal实现工厂方法模式
- 使用Gmsh画非均匀网格
- STM32 RTC例程