processing实现27款精美时钟集合显示时间代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：processing实现27款精美时钟集合显示时间代码，每个时钟都是一个对象，可以修改属性。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
* {
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

body {
  background: #16756f;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body #circle {
  width: 650px;
  height: 650px;
  background-color: transparent;
  position: absolute;
  border: solid 30px #3fb2ab;
  border-radius: 50%;
  z-index: -1;
}
body canvas {
  box-shadow: 0.2em 0.2em 2em #0008;
  border: none;
  outline: none;
}
</style>

</head>

<body translate="no">
  <div id="circle"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script>
  
      <script  >
var sketchProc = function(processingInstance) {
  with (processingInstance) {
    size(600, 600); 
    frameRate(60);    
    smooth();
    
    var scenes, scene = 0;

    var clicked = false, hover = false;
    mouseClicked = function () {
        clicked = true;
    };

    //buttons
    var Button = (function() {
        var Button = function(args) {
            this.x = args.x;
            this.y = args.y;
            this.w = args.w || 100;
            this.h = args.h || 50;
            this.content = args.content;
            this.textSize = args.textSize || 24;
            this.func = args.func;
            this.backColor = args.backColor || color(240);
            this.textColor = color(25);
        };
        Button.prototype = {
            over: function() {
                return (mouseX > this.x && 
                        mouseX < this.x + this.w && 
                        mouseY > this.y && 
                        mouseY < this.y + this.h);
            },
            draw: function() {
                noStroke();

                if(this.over()) {
                    hover = true;
                }

                fill(this.backColor, this.over() ? 150 : 220);
                rect(this.x, this.y, this.w, this.h);

                pushStyle();
                    textAlign(CENTER, CENTER);
                    textSize(this.textSize);
                    fill(this.textColor);
                    text(this.content, this.x + this.w / 2, this.y + this.h / 2);
                popStyle();

                if(clicked && this.over()) {
                    this.func();
                    document.getElementById("circle").style.display = (scene === 0 ? "block" : "none");
                }
            }
        };
        return Button;
    })();
    var buttons = {
        start: new Button({
            content: "Start",
            x: 250,
            y: 500,
            func: function() {
                scene = 1;
            }
        }),
        next: new Button({
            content: ">",
            x: 540,
            y: 275,
            w: 50,
            textSize: 30,
            func: function() {
                scene = (scene + 1) % scenes.length;
            }
        }),
        previous: new Button({
            content: "<",
            x: 10,
            y: 275,
            w: 50,
            textSize: 30,
            func: function() {
                scene = (scene - 1) % scenes.length;
            }
        })
    };

    //Clock objects
    var BasicAnalogClock = (function() {
        BasicAnalogClock = function(args) {
            this.x = args.x;
            this.y = args.y;
            this.diameter = args.diameter || 200;
            this.radius = this.diameter / 2;
            this.ticks = args.ticks || 0; //options are 0, 4, or 12
            this.showText = args.showText || false;
            this.textSize = this.radius * 0.12;
            this.font = args.font || "Trebuchet MS";
            this.roman = args.roman || false;
            this.romans = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"];
            this.shadow = args.shadow || {
                from: -45,
                to: 135
            };
            this.hour = 0;
            this.minute = 0;
            this.second = 0;

            //colors
            this.outerColor = args.outerColor || color(128, 217, 212);
            this.innerColor = args.innerColor || color(240);
            this.centerColor = args.centerColor || color(40);
            this.tickColor = args.tickColor || color(40);
            this.hourColor = args.hourColor || color(40);
            this.minuteColor = args.minuteColor || color(40);
            this.secondColor = args.secondColor || color(240, 0, 0);
            this.textColor = args.textColor || color(40);
            this.shadowColor = args.shadowColor || color(40, 10);
        };
        BasicAnalogClock.prototype = {
            draw: function() {
                pushMatrix();
                    translate(this.x, this.y);

                    pushStyle();

                        //clock face
                        noStroke();
                        fill(this.outerColor);
                        ellipse(0, 0, this.diameter, this.diameter);
                        fill(this.innerColor);
                        ellipse(0, 0, this.diameter * 0.9, this.diameter * 0.9);

                        //tick marks
                        stroke(this.tickColor);
                        strokeWeight(this.radius * 0.01);
                        for (var i = 0; i < this.ticks; i++){
                            line(
                                sin(radians(i * (360/this.ticks))) * this.radius * 0.85, 
                                cos(radians(i * (360/this.ticks))) * this.radius * 0.85, 
                                sin(radians(i * (360/this.ticks))) * this.radius * 0.9, 
                                cos(radians(i * (360/this.ticks))) * this.radius * 0.9);
                        }

                        if(this.showText) {
                            textAlign(CENTER, CENTER);
                            fill(this.textColor);
                            textSize(this.textSize);

                            if(this.roman) { //if roman numbers...
                                pushMatrix();
                                    for(var i = 0; i < 12; i++) {
                                        rotate(radians(30));
                                        text(this.romans[i], 0, -this.radius * 0.75);
                                    }
                                popMatrix();
                            }
                            else { //if general numbers...
                                for(var i = 0; i < 12; i++){
                                    text(i+1, -sin(radians(210+i*30))*this.radius * 0.75, cos(radians(210+i*30))*this.radius * 0.75);
                                }
                            }
                        }

                        //hour hand
                        stroke(this.hourColor);
                        strokeWeight(this.radius * 0.04);
                        line(
                            0, 
                            0, 
                            sin(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.25, 
                            -cos(radians((this.hour * 30) + (this.minute / 2))) * this.diameter * 0.25);

                        //minute hand
                        stroke(this.minuteColor);
                        strokeWeight(this.radius * 0.02);
                        line(
                            0, 
                            0, 
                            sin(radians(this.minute * 6)) * this.diameter * 0.35, 
                            -cos(radians(this.minute * 6)) * this.diameter * 0.35);

                        //second hand
                        stroke(this.secondColor);
                        strokeWeight(this.radius * 0.01);
                        line(
                            0, 
                            0, 
                            sin(radians(this.second * 6)) * this.diameter * 0.42, 
                            -cos(radians(this.second * 6)) * this.diameter * 0.42);

                        //center circle
                        noStroke();
                        fill(this.centerColor);
                        ellipse(0, 0, this.radius * 0.07, this.radius * 0.07);

                        //shadow over clock
                        noStroke();
                        fill(this.shadowColor);
                        arc(0, 0, this.diameter, this.diameter, radians(this.shadow.from), radians(this.shadow.to));

                    popStyle();
                popMatrix();
            },
            update: function() {
                this.hour = hour();
                this.minute = minute();
                this.second = second();
            },
            tick: function() {
                this.draw();
                this.update();
            }
        };
        return BasicAnalogClock;
    })();
    var DetailedAnalogClock = (function() {
        DetailedAnalogClock = function(args) {
            this.x = args.x;
            this.y = args.y;
            this.diameter = args.diameter || 200;
            this.radius = this.diameter / 2;
            this.size = args.size || {
                date: this.radius * 0.12,
                hours: this.radius * 0.15
            };
            this.font = args.font || "Trebuchet MS";
            this.roman = args.roman || false;
            this.romans = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"];
            this.showShadow = args.showShadow || false;
            this.shadow = args.shadow || {
                from: -45,
                to: 135
            };
            this.timer = 0;
            this.hour = 0;
            this.minute = 0;
            this.second = 0;
            this.day = 0;

            //colors
            this.outerColor = args.outerColor || color(40);
            this.innerColor = args.innerColor || color(255);
            this.tickColor = args.tickColor || color(40);
            this.hourColor = args.hourColor || color(40);
            this.minuteColor = args.minuteColor || color(40);
        .........完整代码请登录后点击上方下载按钮下载查看