
lock.js is a JavaScript library for creating a customizable combination lock (digit lock) on the page.
It uses a series of a sequence of symbols (like letters, numbers, emojis) as a personalized code to lock/unlock something on your web app.
How to use it:
1. Include the stylesheet lock.css and JavaScript lock.min.js on the page.
<link rel="stylesheet" href="dist/lock.css" /> <script src="dist/lock.min.js"></script>
2. Generate a basic combination clock and specify the code to unlock it.
<div id="mylock"></div>
new Lock({
id: 'mylock',
code: 'LOCK',
});3. Customize the symbols. Default: 10 (10 digits).
new Lock({
id: 'mylock',
code: 'LOCK',
items: ['L', 'O', 'C', 'K', '🔒'],
});4. Set the number of digit wheels. Default: 5.
new Lock({
id: 'mylock',
code: 'LOCK',
wheels: 4,
});5. Set the diameter of the lock. Default: 80.
new Lock({
id: 'mylock',
code: 'LOCK',
diameter: 50,
});6. Set the amount of time before the code can be changed again. Default: 500.
new Lock({
id: 'mylock',
code: 'LOCK',
timeout: 1000,
});7. Event handlers.
new Lock({
onchange: (code, isOpen, moves) => {
console.log(code, isOpen, moves);
},
onopen: (attempts) => {
alert(`Open in ${attempts} attempts!`);
},
onclose : (attempts) => {
alert('Close!');
}
});8. API methods.
// shuffle the code
lock.shuffle([min], [max], [time]);
// get the current code
lock.getCode();
// set the code
lock.setCode('css');
// get attempts
lock.getAttempts();
// check if the lock is unlocked
lock.isOpen();Changelog:
06/24/2021
- Improved styles






