Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
tickwatchjs
Advanced tools
tickwatchjs
TickWatch is a jQuery plugin that provides a customizable electronic clock with start, stop, and set functionalities. It can count up or down and display time in various formats.
TickWatch jQuery Plugin
Overview
TickWatch is a versatile jQuery plugin that enables you to create dynamic electronic clocks in your web applications. The plugin allows users to display clocks that can count up or down with customizable formats, and provides various control methods to manage the clock's behavior.
Table of Contents
Requirements
To use the TickWatch jQuery Plugin, you need the following dependencies:
- jQuery (minimum version 3.7.0)
You can include these dependencies in your HTML file via CDN or by downloading the files locally.
Features
- Count up or down clocks.
- Customizable time formats (hours, minutes, seconds, and days).
- Control methods to start, stop, and set the time.
- Event triggers for start, stop, update, and end actions.
- Easy integration with existing jQuery projects.
- Lightweight and minimal design.
Installation
To use the TickWatch jQuery Plugin in your project, you can include the necessary files via npm, CDN, or by downloading the files locally.
npm
You can install TickWatch via npm:
npm install tickwatch-js
CDN
You can also include TickWatch directly from a CDN by adding the following script tag to your HTML file:
<script src="https://cdn.jsdelivr.net/npm/tickwatch-js@latest/dist/TickWatch.min.js"></script>
Local Download
If you prefer to host the library locally, you can download the latest release from the source code and include it in your project:
<script src="path/to/TickWatch.min.js"></script>
Usage
To use the TickWatch jQuery Plugin, follow these steps:
- Include the necessary scripts and stylesheets as described in the installation section.
- Create a target element in your HTML to initialize the clock.
- Initialize TickWatch on the target element using jQuery:
<div id="myClock"></div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="setBtn">Set to 5 minutes</button>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="path/to/TickWatch.min.js"></script>
<script>
$(document).ready(function() {
const options = {
direction: 'up',
format: 'hh:mm:ss',
startTime: '00:00:00'
};
$('#myClock').TickWatch(options);
$('#startBtn').click(function() {
$('#myClock').TickWatch('start');
});
$('#stopBtn').click(function() {
$('#myClock').TickWatch('stop');
});
$('#setBtn').click(function() {
$('#myClock').TickWatch('set', '00:05:00');
});
});
</script>
Example
Time Clock
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TickWatch - Example</title>
</head>
<body>
<div id="myClock"></div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="setBtn">Set to 5 minutes</button>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="path/to/TickWatch.min.js"></script>
<script>
$(document).ready(function() {
$('#myClock').TickWatch({
direction: 'up',
format: 'hh:mm:ss',
startTime: '00:00:00'
});
$('#startBtn').click(function() {
$('#myClock').TickWatch('start');
});
$('#stopBtn').click(function() {
$('#myClock').TickWatch('stop');
});
$('#setBtn').click(function() {
$('#myClock').TickWatch('set', '00:05:00');
});
});
</script>
</body>
</html>
Number display
<h2 class="h2">Display</h2>
<div class="display d-flex justify-content-center"></div>
<div class="mb-3">
<label for="number" class="form-label">Number</label>
<input type="text" class="form-control" id="number" name="number" placeholder="Enter a number">
</div>
<button type="button" class="btn btn-primary" id="set">Set</button>
<script>
$(document).ready(function() {
const displayElement = $('.display');
displayElement.TickWatch({
displayOnly: true,
displaySize: 2,
});
$('#set').on('click', function () {
displayElement.TickWatch('set', $("#number").val());
});
});
</script>
Options
| Option | Type | Default | Description |
|---|---|---|---|
partsKeys | Array | ['seconds', 'minutes', {hours: 24}] | Defines each part of the clock and its maximum value. Example: ['seconds', 'minutes', {hours: 24}, {days: 31}, {month: 12}]. |
direction | String | 'up' | The direction of the clock ('up' for count up, 'down' for count down). |
startTime | String | null | The initial time of the clock. |
endTime | String | null | The end time of the clock. Used in countdown mode. |
activeCellClass | String | 'active-cell' | The class to add to the active segment of the electronic cell (e.g., red or high opacity). |
inactiveCellClass | String | 'inactive-cell' | The class to add to the inactive segment of the electronic cell (e.g., low opacity). |
displayOnly | Boolean | false | If true, displays static numbers instead of a clock. |
displaySize | Number | null | Number of digits to display when displayOnly is true. |
Methods
The TickWatch jQuery Plugin provides the following methods:
start(): Start the clock.stop(): Stop the clock.set(time): Set the clock to a specific time or set the display to a specific value.get(): Get current value of the clock or the display.clear(): Clear the current time and reset to the start time.option(key, value): Get or set an option dynamically.destroy(): Destroy the clock instance.
Events
TickWatch triggers the following events:
TickWatch.start: Triggered when the clock starts.TickWatch.stop: Triggered when the clock stops.TickWatch.update: Triggered when the clock updates.TickWatch.end: Triggered when the clock reaches the end time.TickWatch.clear: Triggered when the clock is cleared.TickWatch.destroy: Triggered when the clock instance is destroyed.
Demo
Here's a Demo example :
Contributing
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.
Author
License
FAQs
TickWatch is a jQuery plugin that provides a customizable electronic clock with start, stop, and set functionalities. It can count up or down and display time in various formats.
The npm package tickwatchjs receives a total of 11 weekly downloads. As such, tickwatchjs popularity was classified as not popular.
We found that tickwatchjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 28 Jun 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024