How to make use of it:

1. Include the stylesheet lock.css and JavaScript lock.min.js on the web page.

<link rel="stylesheet" href="dist/lock.css" />
<script src="dist/lock.min.js"></script>

2. Generate a primary combination clock and specify the code to unlock it.

<div id="mylock"></div>

new Lock({
    id: 'mylock',
    code: 'LOCK',
});

3. Customize the symbols.

new Lock({
    id: 'mylock',
    code: 'LOCK',
    items: ['L', 'O', 'C', 'K', '🔒'],
});

4. Set the variety of digit wheels.

new Lock({
    id: 'mylock',
    code: 'LOCK',
    wheels: 4,
});

5. Set the diameter of the lock.

new Lock({
    id: 'mylock',
    code: 'LOCK',
    diameter: 50,
});

6. Set the period of time earlier than the code may be modified once more.

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 strategies.

// 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();

Customizable Combination Lock, lock.js Plugin/Github

See Demo And Download