We can use this code when we need a counter on the website. In addition to counting, the counter also plays a ringtone, which means that each time a ringtone is counted, it can be a warning to the user. There is also a ringtone icon next to this counter. This number counts up to twenty, but you can increase or decrease it and count it to your desired number.
HTML
<!-- This script got from www.devanswer.com -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<h4 id="noti" style="font-size: 16px">
click here.
</h4>
<div class="cp-notification-wrap">
<div id="cp-notification" class="cp-notification">
<img src="https://devanswer.com/img/bell.png" alt="" />
<div class="cp-notification-alert">0</div>
</div>
</div>
<audio id="cp-alert" src="https://devanswer.com/codes/files/audio_small-bell-ring-01a.mp3" hidden></audio>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
html,body{
height: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.cp-notification-wrap{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
h4#noti.des {
color: gainsboro;
background-color: gray;
box-shadow: unset;
}
@keyframes shake{
50%{
transform: translate(15px) rotate(14deg)
}
60%{
transform: translate(-15px) rotate(-14deg)
}
}
.cp-notification{
position: relative;
}
.cp-notification img{
transform-origin: center top;
}
.container {
width: 90%;
margin: 0 auto;
padding: 15px;
}
h4#noti {
text-align: center;
width: 250px;
transition: 0.5s;
margin: 88px auto;
background-color: hotpink;
padding: 33px 0;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 5px 4px #00000038;
}
h4#noti:hover {
box-shadow: 0 0 0 0 black;
}
.cp-notification img, .cp-notification-alert{
transition: transform 150ms;
}
.cp-notification-alert{
position: absolute;
width: 36px;
height: 36px;
line-height: 36px;
color: white;
border-radius: 50%;
background: red;
text-align: center;
top: 0;
right: 0;
transform: scale(0) rotateY(180deg);
backface-visibility: hidden
}
.active img{
animation: shake 250ms
}
.active .cp-notification-alert{
transform: scale(1) rotateY(0deg)
}
Javascript
function cpAlert(){
var bell = document.getElementById('cp-notification');
var alert = document.getElementById('cp-alert');
var alertText = document.getElementsByClassName('cp-notification-alert');
var text = $(alertText).text();
$(bell).removeClass('active');
if (text < 20) {
setTimeout(function(){
var i = parseInt(++text) ;
bell.className += ' ' + 'active';
alert.play();
$(alertText).html(i);
},100)
}
}
$('#noti').one('click', function (){
cpAlert();
$(this).addClass('des');
window.setInterval(function(){
cpAlert();
}, 4000);
});