Software Programming: Digital Clock

Clock Design and Development Using Html, CSS, javaScript

Introduction
Clock are useful elements for any UI if used in a proper way. Clock can be used in sites where time is the main concern like some booking sites or some app showing arriving time of train, buses, flights, etc. clock is basically of two type, analog and digital.

Earlier too, it was told about digital clock development which is on this link Digital Clock
We will be looking at making a analog clock development.

Approach: The approach is to use the date object to get time on every second and then re-rendering time on the browser using the new time that we got by calling the same function each second.

Example: we are going to Step by Step Development of Online Watch with the Help of HTML, CSS and JavaScript.
Step 1.You have to create watch.html Page after follow code.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.clock {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBY0OJiW6_m8bE51eRvs74LBsjH_nBSkHwkQPCU2HsMaC73FEjhpdWZr58J8JlMdBurLANBaDDmzn-KcMB2rJimIvHqzu0TAgMPYSysH4mktfacEnOlFxJXAtL_IF7Lm6SNW2gWjs4hwIIoKGMpMifd9plB8r6t4i0nJFEdEsL8Yml6ywG_4s9u6s0g/s1600/clock.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
    inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
    inset 0 15px 15px rgba(0, 0, 0, 0.3);
}

.clock::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1000;
}

.hour,
.min,
.sec {
  position: absolute;
}
.hr {
  width: 60px;
  height: 60px;
}
.mn {
  width: 75px;
  height: 75px;
}
.sc {
  width: 30px;
  height: 30px;
}
.hr,
.mn,
.sc {
  display: flex;
  justify-content: center;
}
.hr::before {
  content: "";
  width: 8px;
  height: 35px;
  background-color: #ff105e;
  z-index: 100;
  border-radius: 5px;
}

.mn::before {
  content: "";
  width: 7px;
  height: 35px;
  background-color: rgb(15, 105, 207);
  z-index: 11;
  border-radius: 5px;
}
.sc::before {
  content: "";
  width: 4px;
  height: 60px;
  background-color: #dccf;
  z-index: 10;
  border-radius: 5px;
}

</style>
</head>
<body>
  <div class="clock">
   <div class="hour">
     <div class="hr" id="hr"></div>
   </div>
   <div class="min">
     <div class="mn" id="mn"></div>
   </div>
   <div class="sec">
     <div class="sc" id="sc"></div>
   </div>
 </div>
<script>
 const deg = 6; //360deg / 60(min||sec) => 6
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");

setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30; //360deg / 12 hour => 30
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;

hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
});

</script>

</body>
</html>

OUTPUT:
The output of this program will be like the clock shown in the header above.

DIGITAL CLOCK

Digital Clock , java , java Netbeans , Tech-Projects 4 comments :

Digital Clock Application, Open NetBeans See The Menu Bar go to the file Menu Click on the New Project(Ctrl+Shift+N) and Select Left site categories JavaFX and Project categories to Right Site Project JavaFX Application .You have to give The Program Name "DigitalClock". if you wont to save Project Location you can Browse and File save on the direction place and Gone a default Place and Now uncheck/check the Main Class and then press the Finish button.you can see the project Status.

Code:

package digitalclock;

import java.util.Calendar;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.effect.Effect;
import javafx.scene.effect.Glow;
import javafx.scene.effect.InnerShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Polygon;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Shear;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 *
 * @author Manoj
 */
public class DigitalClock extends Application {

private Clock clock;
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Digital Clock");
        Group root = new Group();
        Scene scene = new Scene(root, 480, 400);
        // add background image
        ImageView background = new ImageView(new Image(getClass().getResourceAsStream("di_1.png")));
        // add digital clock
        clock = new Clock(Color.ORANGERED, Color.rgb(50,50,50));
        clock.setLayoutX(45);
        clock.setLayoutY(186);
        clock.getTransforms().add(new Scale(0.83f, 0.83f, 0, 0));
        // add background and clock to sample
        root.getChildren().addAll(background, clock);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

/**
     * Clock made of 6 of the Digit classes for hours, minutes and seconds.
     */
    public static class Clock extends Parent {
        private Calendar calendar = Calendar.getInstance();
        private Digit[] digits;
        private Timeline delayTimeline, secondTimeline;

public Clock(Color onColor, Color offColor) {
            // create effect for on LEDs
            Glow onEffect = new Glow(1.7f);
            onEffect.setInput(new InnerShadow());
            // create effect for on dot LEDs
            Glow onDotEffect = new Glow(1.7f);
            onDotEffect.setInput(new InnerShadow(5,Color.BLACK));
            // create effect for off LEDs
            InnerShadow offEffect = new InnerShadow();
            // create digits
            digits = new Digit[7];
            for (int i = 0; i < 6; i++) {
                Digit digit = new Digit(onColor, offColor, onEffect, offEffect);
                digit.setLayoutX(i * 80 + ((i + 1) % 2) * 20);
                digits[i] = digit;
                getChildren().add(digit);
            }
            // create dots
            Group dots = new Group(
                    new Circle(80 + 54 + 20, 44, 6, onColor),
                    new Circle(80 + 54 + 17, 64, 6, onColor),
                    new Circle((80 * 3) + 54 + 20, 44, 6, onColor),
                    new Circle((80 * 3) + 54 + 17, 64, 6, onColor));
            dots.setEffect(onDotEffect);
            getChildren().add(dots);
            // update digits to current time and start timer to update every second
            refreshClocks();
            play();
        }

private void refreshClocks() {
            calendar.setTimeInMillis(System.currentTimeMillis());
            int hours = calendar.get(Calendar.HOUR_OF_DAY);
            int minutes = calendar.get(Calendar.MINUTE);
            int seconds = calendar.get(Calendar.SECOND);
            digits[0].showNumber(hours / 10);
            digits[1].showNumber(hours % 10);
            digits[2].showNumber(minutes / 10);
            digits[3].showNumber(minutes % 10);
            digits[4].showNumber(seconds / 10);
            digits[5].showNumber(seconds % 10);
        }

public void play() {
            // wait till start of next second then start a timeline to call refreshClocks() every second
            delayTimeline = new Timeline();
            delayTimeline.getKeyFrames().add(
                    new KeyFrame(new Duration(1000 - (System.currentTimeMillis() % 1000)), new EventHandler<ActionEvent>() {
                        @Override public void handle(ActionEvent event) {
                            if (secondTimeline != null) {
                                secondTimeline.stop();
                            }
                            secondTimeline = new Timeline();
                            secondTimeline.setCycleCount(Timeline.INDEFINITE);
                            secondTimeline.getKeyFrames().add(
                                    new KeyFrame(Duration.seconds(1), new EventHandler<actionevent>() {
                                        @Override public void handle(ActionEvent event) {
                                            refreshClocks();
                                        }
                                    }));
                            secondTimeline.play();
                        }
                    })
            );
            delayTimeline.play();
        }

public void stop(){
            delayTimeline.stop();
            if (secondTimeline != null) {
                secondTimeline.stop();
            }
        }
    }

/**
     * Simple 7 segment LED style digit. It supports the numbers 0 through 9.
     */
    public static final class Digit extends Parent {
        private static final boolean[][] DIGIT_COMBINATIONS = new boolean[][]{
                new boolean[]{true, false, true, true, true, true, true},
                new boolean[]{false, false, false, false, true, false, true},
                new boolean[]{true, true, true, false, true, true, false},
                new boolean[]{true, true, true, false, true, false, true},
                new boolean[]{false, true, false, true, true, false, true},
                new boolean[]{true, true, true, true, false, false, true},
                new boolean[]{true, true, true, true, false, true, true},
                new boolean[]{true, false, false, false, true, false, true},
                new boolean[]{true, true, true, true, true, true, true},
                new boolean[]{true, true, true, true, true, false, true}};
        private final Polygon[] polygons = new Polygon[]{
                new Polygon(2, 0, 52, 0, 42, 10, 12, 10),
                new Polygon(12, 49, 42, 49, 52, 54, 42, 59, 12f, 59f, 2f, 54f),
                new Polygon(12, 98, 42, 98, 52, 108, 2, 108),
                new Polygon(0, 2, 10, 12, 10, 47, 0, 52),
                new Polygon(44, 12, 54, 2, 54, 52, 44, 47),
                new Polygon(0, 56, 10, 61, 10, 96, 0, 106),
                new Polygon(44, 61, 54, 56, 54, 106, 44, 96)};
        private final Color onColor;
        private final Color offColor;
        private final Effect onEffect;
        private final Effect offEffect;

public Digit(Color onColor, Color offColor, Effect onEffect, Effect offEffect) {
            this.onColor = onColor;
            this.offColor = offColor;
            this.onEffect = onEffect;
            this.offEffect = offEffect;
            getChildren().addAll(polygons);
            getTransforms().add(new Shear(-0.1,0));
            showNumber(0);
        }

public void showNumber(Integer num) {
            if (num < 0 || num > 9) num = 0; // default to 0 for non-valid numbers
            for (int i = 0; i < 7; i++) {
                polygons[i].setFill(DIGIT_COMBINATIONS[num][i] ? onColor : offColor);
                polygons[i].setEffect(DIGIT_COMBINATIONS[num][i] ? onEffect : offEffect);
            }
        }
    }

/**
     * The main() method is ignored in correctly deployed JavaFX 
     * application. main() serves only as fallback in case the 
     * application can not be launched through deployment artifacts,
     * e.g., in IDEs with limited FX support. NetBeans ignores main().
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Output:

Subscribe to: Posts ( Atom )

Clock Design and Development Using Html, CSS, javaScript

DIGITAL CLOCK

OUR TECH-PROJECTS

DOWNLOAD ANY ONLINE VIDEOS

LABELS

Development Accessories

POPULAR POSTS