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.

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

  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
h4#noti.des {
  color: gainsboro;
  background-color: gray;
  box-shadow: unset;
@keyframes shake{
    transform: translate(15px) rotate(14deg)
     transform: translate(-15px) rotate(-14deg)
  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;
  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)
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();
  	if (text < 20) {
	  		var i = parseInt(++text) ;
	    	bell.className += ' ' + 'active';
$('#noti').one('click', function (){
	}, 4000);