JavaScript+屏幕自适应：时钟（色卡分享+canvas+js）
2024-06-08 12:29:33
色卡作为一种预设工具，是自然界存在的颜色在某种材质上的体现，主要用于色彩选择、比对、沟通，是色彩实现在一定范围内统一的标准。目前市面上的色卡种类有很多，但是常用的又有那些呢 ？
常用色卡的种类：
色卡的种类有很多，不同的行业都有属于自己的标准色卡，但是色卡的种类到底有多少，没人详细统计过。常用的标准色卡品牌有美国的潘通色卡（PANTONE）、德国劳尔色卡（RAL）、瑞典的NCS色卡、日本DIC色卡，国产的有ISO灰卡及中国建筑色卡等。
1.潘通色卡
Pantone色卡，提供平面设计、服装家居、涂料、印刷等行业专色色卡，是国际上广泛应用的色卡。
2.德国RAL色卡
也被叫做RAL国际色卡，这是一种转为色彩设计开发配色用色卡，如油漆、涂料调色配色领域，就常用RAL色卡。
3.瑞典的NCS色卡
NCS色卡是来自瑞典的色彩设计工具，是欧洲常用的标准色卡之一，全部颜色按照色相及黑度、百度和彩度规律有序排列，颜色查找会比较方便。
4.日本DIC色卡
DIE色卡是日本生产的配色工具，多用于工业、平面设计、包装、纸张印刷等领域的配色管理。
5.ISO灰卡
这是用于评估色拉度测试的专用色卡，例如纺织行业的色牢度评定，一般就会使用ISO灰卡来测试。
6.中国建筑色卡
这是中国比较权威的国家级建筑色彩标准，也是唯一用于建筑颜色的专用色卡，建筑领域的色彩设计、比对、沟通都会应用这款色卡。
学习内容：
- 色卡分享（本次运用到的颜色）
- 时钟（html）
- 时钟（JavaScript）
色卡分享（本次运用到的颜色）:
学习产出：
1.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>M_fffz</title>
</head>
<body style="height:100%">
<canvas id="canvas" style="height:100%;width: 100%;background:black;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script src="js/digit.js"></script>
<script src="js/countdown6.6.js"></script>
</body>
</html>2.JavaScript
2.1 countdown6.6.js
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;//var endTime = new Date();
//endTime.setTime( endTime.getTime() + 3600*1000 )
var curShowTimeSeconds = 0var balls = [];
const colors = ["rgb(161,212,189)","rgb(117,142,97)","rgb(98,190,157)","rgb(71,184,151)","rgb(23,128,105)","rgb(168,205,52)","rgb(23,111,88)","rgb(190,224,208)","rgb(33,166,117)","rgb(78,96,108)","rgb(30,127,168)"]window.onload = function(){WINDOW_WIDTH = document.body.clientWidthWINDOW_HEIGHT = document.body.clientHeightMARGIN_LEFT = Math.round(WINDOW_WIDTH /10);RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108)-1MARGIN_TOP = Math.round(WINDOW_HEIGHT /5);var canvas = document.getElementById('canvas');var context = canvas.getContext("2d");canvas.width = WINDOW_WIDTH;canvas.height = WINDOW_HEIGHT;curShowTimeSeconds = getCurrentShowTimeSeconds()setInterval(function(){render( context );update();},50);
}function getCurrentShowTimeSeconds() {var curTime = new Date();var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();return ret;
}function update(){var nextShowTimeSeconds = getCurrentShowTimeSeconds();var nextHours = parseInt( nextShowTimeSeconds / 3600);var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 )var nextSeconds = nextShowTimeSeconds % 60var curHours = parseInt( curShowTimeSeconds / 3600);var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 )var curSeconds = curShowTimeSeconds % 60if( nextSeconds != curSeconds ){if( parseInt(curHours/10) != parseInt(nextHours/10) ){addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHours/10) );}if( parseInt(curHours%10) != parseInt(nextHours%10) ){addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );}if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );}if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );}if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );}if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%10) );}curShowTimeSeconds = nextShowTimeSeconds;}updateBalls();console.log( balls.length)
}function updateBalls(){for( var i = 0 ; i < balls.length ; i ++ ){balls[i].x += balls[i].vx;var c = 1.0;if( balls[i].y + RADIUS + balls[i].vy >= WINDOW_HEIGHT ){c = ( WINDOW_HEIGHT - (balls[i].y+ RADIUS) ) / balls[i].vy;console.log( c );}balls[i].y += balls[i].vy;balls[i].vy += c * balls[i].g;;if( balls[i].y >= WINDOW_HEIGHT-RADIUS ){balls[i].y = WINDOW_HEIGHT-RADIUS;balls[i].vy = - Math.abs(balls[i].vy)*0.75;}}var cnt = 0for( var i = 0 ; i < balls.length ; i ++ )if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < WINDOW_WIDTH )balls[cnt++] = balls[i]while( balls.length > cnt ){balls.pop();}
}function addBalls( x , y , num ){for( var i = 0 ; i < digit[num].length ; i ++ )for( var j = 0 ; j < digit[num][i].length ; j ++ )if( digit[num][i][j] == 1 ){var aBall = {x:x+j*2*(RADIUS+1)+(RADIUS+1),y:y+i*2*(RADIUS+1)+(RADIUS+1),g:1.5+Math.random(),vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,vy:-5,color: colors[ Math.floor( Math.random()*colors.length ) ]}balls.push( aBall )}
}function render( cxt ){cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);var hours = parseInt( curShowTimeSeconds / 3600);var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )var seconds = curShowTimeSeconds % 60renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt )renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);for( var i = 0 ; i < balls.length ; i ++ ){cxt.fillStyle=balls[i].color;cxt.beginPath();cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );cxt.closePath();cxt.fill();}
}function renderDigit( x , y , num , cxt ){for( var i = 0 ; i < digit[num].length ; i ++ )for(var j = 0 ; j < digit[num][i].length ; j ++ )if( digit[num][i][j] == 1 ){cxt.beginPath();var radiaCrad=cxt.createRadialGradient(x+j*2*(RADIUS+1)+(RADIUS+1) ,y+i*2*(RADIUS+1)+(RADIUS+1) ,2, x+j*2*(RADIUS+1)+(RADIUS+1) ,y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS);radiaCrad.addColorStop(0.0,"#ffffff");radiaCrad.addColorStop(0.25,"#fff8a9");radiaCrad.addColorStop(0.5,"rgb(232,241,46)");radiaCrad.addColorStop(0.75,"rgb(255,238,66)");radiaCrad.addColorStop(1.0,"rgb(250,239,40)");cxt.fillStyle = radiaCrad;cxt.lineWidth=3;cxt.strokeStyle="#fff302";cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI )cxt.closePath()cxt.fill()cxt.stroke()}
}2.2 digit.js
digit =[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],//0[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],//1[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],//2[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//3[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],//4[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//5[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//6[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],//7[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],//8[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],//9[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]//:];效果图：
JavaScript+屏幕自适应：时钟（色卡分享+canvas+js）相关推荐
- 2017面试分享（js面试题记录）
2017面试分享(js面试题记录) 1. 最简单的一道题 '11' * 2'a8' * 3 2. 一道this的问题 var num = 10;var obj = {num:8,inner: {num ...
- html时钟翻牌效果,干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)
双十一剁手节过去了,大家应该在很多网页中看到了数字翻牌的效果吧,比如倒计时. 数字增长等.相信很多人都已经自己独立实现过了,我也在网上看了一些demo,发现HTML结构大多比较复杂,用了4个并列的标签 ...
- pyqt界面屏幕分辨率自适应_在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法 PyQt5: 程序入口添加 QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHi ...
- 【Unity3D-UGUI应用篇】（六）屏幕自适应(多分配率适配)
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
- JavaScript制作的时钟
JavaScript制作的时钟 分享一个自己制作的时钟.算是低级版的吧,秒钟分钟时钟都是可以获取到时间,根据时间来动的.是动态的. 效果图如下: 制作之前肯定要先把钟的各个部件画出来,然后加上样式,最 ...
- html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
- Unity安卓手机屏幕自适应完美解决方案
本人正在努力建设自己的公众号,大家可以关注公众号,公众号将免费提供大量教学Unity相关内容,除了从Unity入门到数据结构设计模式外,我还会免费分享我再游戏开发中使用的素材,书籍,插件,希望大家可以 ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 原文:https://www.cnblogs.com/guozefeng/p/3719915.html 1. 项目要求需要用js实现photoshop中 ...
- JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)，JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
最新文章
- AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
- python的自带数据集_解决Keras自带数据集与预训练model下载太慢问题
- Centos入门-3
- 接口是否可继承接口? 抽像类是否可实现(implements)接口? 抽像类是否可继承实体类(concrete class)?...
- win7 64位，vs2010（visual studio2010）环境下配置openCV2.4.8版本，以及可能遇到的问题
- python appium自动化测试平台开发,Python+Appium实现自动化测试
- svn服务器会用到哪些端口_“模切压痕”会用到哪些材料？
- java中的diss可以做标识符吗_因为命名被diss无数次。简单聊聊编程最头疼的事情之一:命名...
- Swarm基于多主机容器网络-overlay networks 梳理
- selenium+java自动化测试环境搭建mac
- oracle12c 查看库,12c 检查pdb数据库状态
- 亚马逊又挂了，只是因为半价清仓活动？
- 6827台！中移动数据中心交换机采购结果公示 华为、中兴遭滑铁卢
- ocv特性_锂离子电池的三大特性分析
- 结构体内容引用自非结构体数组对象axes(handles.axes1)
- 【JavaScript 笔记】基础内容
- win10下安装MySQL8
- 交错数组 c语言,C#交错数组打印杨辉三角 | C/C++程序员之家
- Go问题/知识收集 - 1
- 算法分析与设计|主要内容整理