Combination Lock
How do I make an combination lock?
A 4-digit combination lock implementation.. What is a combination lock? How do you make a combination lock? This script and codes were developed by A S P on 15 January 2023, Sunday.
Combination Lock Previews
Combination Lock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Combination Lock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Share+Tech|Orbitron:500' rel='stylesheet' type='text/css'>
<div class="lockContainer"> <div class="lockDigitContainer digit0"> <div class="lockDigit lockDigitPrev">9</div> <div class="lockDigit lockDigitCur">0</div> <div class="lockDigit lockDigitNext">1</div> </div> <div class="lockDigitContainer digit1"> <div class="lockDigit lockDigitPrev">9</div> <div class="lockDigit lockDigitCur">0</div> <div class="lockDigit lockDigitNext">1</div> </div> <div class="lockDigitContainer digit2"> <div class="lockDigit lockDigitPrev">9</div> <div class="lockDigit lockDigitCur">0</div> <div class="lockDigit lockDigitNext">1</div> </div> <div class="lockDigitContainer digit3"> <div class="lockDigit lockDigitPrev">9</div> <div class="lockDigit lockDigitCur">0</div> <div class="lockDigit lockDigitNext">1</div> </div>
</div>
<div class="btnContainer"> <button id="getBtn">Get Combination</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Combination Lock - Script Codes CSS Codes
body
{ background-color: #000; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.btnContainer
{ text-align: center; margin-top: 10px;
}
.btnContainer button
{ color: #fff; border: 1px #333 solid; padding: 10px; border-radius: 5px; cursor: pointer; background: rgb(51,51,51);
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(17,17,17,1) 51%, rgba(51,51,51,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(51%,rgba(17,17,17,1)), color-stop(100%,rgba(51,51,51,1)));
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
background: -o-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}
.btnContainer button:hover
{ color: #aaa;
}
.lockContainer
{ width: 400px; height: 228px; margin: 0 auto; padding: 10px; background-color: #333; border: 2px #000 solid; border-radius: 5px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: rgb(51,51,51);
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(17,17,17,1) 51%, rgba(51,51,51,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(51%,rgba(17,17,17,1)), color-stop(100%,rgba(51,51,51,1)));
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
background: -o-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
background: -ms-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,1) 0%,rgba(17,17,17,1) 51%,rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#333333',GradientType=0 );
}
.lockDigitContainer
{ float: left; width: 70px; height: 198px; margin: 10px; border: 5px #000 solid; text-align: center; border-radius: 5px; background-color: #000; box-shadow: 10px 4px 8px #111; color: #000; cursor: pointer;
}
.lockDigit
{ height: 60px; line-height: 60px; font-size: 40px; font-weight: bold; font-family: 'Orbitron', Verdana, sans-serif; border-radius: 2px;
}
.lockDigitPrev
{ margin-bottom: 4px; background: rgb(17,17,17);
background: -moz-linear-gradient(top, rgba(17,17,17,1) 0%, rgba(238,238,238,1) 90%, rgba(102,102,102,1) 90%, rgba(102,102,102,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(17,17,17,1)), color-stop(90%,rgba(238,238,238,1)), color-stop(90%,rgba(102,102,102,1)), color-stop(100%,rgba(102,102,102,1)));
background: -webkit-linear-gradient(top, rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
background: -o-linear-gradient(top, rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
background: -ms-linear-gradient(top, rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
background: linear-gradient(to bottom, rgba(17,17,17,1) 0%,rgba(238,238,238,1) 90%,rgba(102,102,102,1) 90%,rgba(102,102,102,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#666666',GradientType=0 );
}
.lockDigitNext
{ margin-top: 4px;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 9%, rgba(204,204,204,1) 9%, rgba(17,17,17,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(9%,rgba(238,238,238,1)), color-stop(9%,rgba(204,204,204,1)), color-stop(100%,rgba(17,17,17,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(17,17,17,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#111111',GradientType=0 );
}
.lockDigitCur
{ height: 70px; line-height: 70px; background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 9%, rgba(204,204,204,1) 9%, rgba(238,238,238,1) 50%, rgba(204,204,204,1) 72%, rgba(17,17,17,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(9%,rgba(238,238,238,1)), color-stop(9%,rgba(204,204,204,1)), color-stop(50%,rgba(238,238,238,1)), color-stop(72%,rgba(204,204,204,1)), color-stop(100%,rgba(17,17,17,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(238,238,238,1) 50%,rgba(204,204,204,1) 72%,rgba(17,17,17,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(238,238,238,1) 50%,rgba(204,204,204,1) 72%,rgba(17,17,17,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(238,238,238,1) 50%,rgba(204,204,204,1) 72%,rgba(17,17,17,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 9%,rgba(204,204,204,1) 9%,rgba(238,238,238,1) 50%,rgba(204,204,204,1) 72%,rgba(17,17,17,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#111111',GradientType=0 );
}
.lockDigitContainer.depressed .lockDigitPrev
{ background: rgb(0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 90%, rgba(51,51,51,1) 90%, rgba(51,51,51,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(90%,rgba(204,204,204,1)), color-stop(90%,rgba(51,51,51,1)), color-stop(100%,rgba(51,51,51,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 90%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 90%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 90%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 90%,rgba(51,51,51,1) 90%,rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 );
}
.lockDigitContainer.depressed .lockDigitNext
{
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 9%, rgba(170,170,170,1) 9%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(9%,rgba(204,204,204,1)), color-stop(9%,rgba(170,170,170,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}
.lockDigitContainer.depressed .lockDigitCur
{ background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 9%, rgba(170,170,170,1) 9%, rgba(204,204,204,1) 50%, rgba(170,170,170,1) 72%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(9%,rgba(204,204,204,1)), color-stop(9%,rgba(170,170,170,1)), color-stop(50%,rgba(204,204,204,1)), color-stop(72%,rgba(170,170,170,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(204,204,204,1) 9%,rgba(170,170,170,1) 9%,rgba(204,204,204,1) 50%,rgba(170,170,170,1) 72%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#000000',GradientType=0 );
}Combination Lock - Script Codes JS Codes
$("#getBtn").click(function(evt) { alert(combo.getCombination());
});
function ComboLock()
{ this.mouseDownY = null; this.mouseDownItem = null;
};
ComboLock.prototype.init = function()
{ var self = this; $(".lockDigitContainer").mousedown(function(evt) { self.mouseDownItem = $(this); self.mouseDownItem.addClass('depressed'); self.mouseDownY = evt.clientY; }); $(document).mouseup(function(evt) { if (self.mouseDownY) { var dir = 'down' if (self.mouseDownY > evt.clientY) var dir = 'up'; self.rotateDirection(dir, self.mouseDownItem); self.mouseDownItem.removeClass('depressed'); self.mouseDownY = null; self.mouseDownItem = null; } });
};
/** * direction: up | down * item: jquery object */
ComboLock.prototype.rotateDirection = function(direction, item)
{ //console.log('rotate: ', direction, item); var checkdigit = 0; var newdigit = 9; var additiondigit = -1; if ('up' == direction) { checkdigit = 9; newdigit = 0; additiondigit = 1; } var p = parseInt(item.find('.lockDigitPrev').html()); var c = parseInt(item.find('.lockDigitCur').html()); var n = parseInt(item.find('.lockDigitNext').html()); p = (p == checkdigit) ? newdigit : p + additiondigit; c = (c == checkdigit) ? newdigit : c + additiondigit; n = (n == checkdigit) ? newdigit : n + additiondigit; item.find('.lockDigitPrev').html(p); item.find('.lockDigitCur').html(c); item.find('.lockDigitNext').html(n);
};
ComboLock.prototype.getCombination = function()
{ var res = []; for (var i = 0; i < 4; i++) res.push(parseInt($(".digit"+i+" .lockDigitCur").html())); return res;
};
var combo = new ComboLock();
combo.init();
| Developer | A S P |
| Username | asp |
| Uploaded | January 15, 2023 |
| Rating | 4 |
| Size | 3,427 Kb |
| Views | 4,048 |
Do you need developer help for Combination Lock?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
A S P (asp) Script Codes
| Name | Size |
| Typing Text | 1,677 Kb |
| SVG Alien | 2,107 Kb |
| Monster Name Generator | 2,582 Kb |
| Handlebars Script Tag | 1,694 Kb |
| Paper Book with Folded Corner | 3,129 Kb |
| Scan Lines | 3,012 Kb |
| Laser Underline Hover Menu | 2,524 Kb |
| Grid with Fixed and Resizable Columns | 2,857 Kb |
| Starfield using KineticJS | 3,512 Kb |
| Laser Cat | 2,035 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Testing Code Pen | Jduprey | 1,468 Kb |
| CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
| Login-ng-modal | Heedoo | 3,566 Kb |
| Css3 only dropdown menu | Riogrande | 2,519 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| Pure CSS Tooltip | APinix | 2,815 Kb |
| Print element on a page | Mrs_snow | 2,081 Kb |
| Review test | Otro_user_gil | 4,054 Kb |
| Magnus 3 | ARocketfish | 7,944 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!