Elektronik Devreler: html alarm clock javascript codes

Html, CSS, javascript kodlarından oluşturulmuş alarmlı saat
Alarmı ayarladıktan sonra sayfa yenileme olsa da ayarlar kaybolmaz.
Aşağıdaki alarmlı saat rar linkinden indirebilirsiniz.

<style>

body {
    margin: 20px;
}
input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    width: 300px;
    height: 50px;
  border-left :20px solid blue;
  border-right :20px solid blue;
    background: red; /*   background: #024069; */
    border-radius: 2px;
    margin-top: 25px;
  
    outline: none;
}

input[type="range"]::-webkit-slider-thumb{
    cursor:url('hand_2.cur'), default;
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:100px; 
    height:40px;
    -webkit-border-radius:20px; 
    -moz-border-radius:20px; 
    -ms-border-radius:20px; 
    -o-border-radius:20px; 
    border-radius:20px;
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
    border: 1px solid #787878;
}

input[type="range"]::-webkit-slider-thumb:active{
cursor:url('hand_drag_3.cur'), default;
}

</style>

//window.onload =  arka;//

function arka(){
document.body.style.backgroundColor = "#FFF1DE";
document.body.style.background = "url('fon_3Boyut2.jpg')";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = screen.width + "px" ;

//window.open("alarm_ek_acilis.html","_blank", "width=350, height=350");//
}

// ###############    storage hafıza ##########  //

function loadFunc(){
         //  document.getElementById("result").innerHTML = localStorage.getItem("aliName"); //
     document.getElementById("numb").value = localStorage.getItem("aliName");
document.getElementById("togID").value = localStorage.getItem("togName");  
           
}
  
   function yazFunc(){
                   var yz = document.getElementById("numb").value;
                  var localStore = window.localStorage;
                localStorage.setItem("aliName", yz);
              document.getElementById("result").innerHTML = localStorage.getItem("aliName");
}

function addZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    var x = document.getElementById("say");
    var h = addZero(d.getHours());
    var m = addZero(d.getMinutes());
    var s = addZero(d.getSeconds());
 var greeting;

var e = new Date();
   //  document.title = e.toLocaleDateString();
document.getElementById("tarih").innerHTML = e.toLocaleDateString();  //
    x.innerHTML = h + ":" + m ;

// takvim gün adı //

var tg = document.getElementById("togID").value;   
            if(1 == tg){document.getElementById("a_ayar").innerHTML = "Alarm AÇIK"; 
document.getElementById("k_ayar").innerHTML = "";
document.getElementById("numb").style.background = "url('alarm_red_100.png') no-repeat right ";
document.getElementById("iconYaz").href = "ring.png";
}
else
            if(0 == tg){document.getElementById("k_ayar").innerHTML = "Alarm KAPALI"; 
document.getElementById("a_ayar").innerHTML = "";
document.getElementById("numb").style.background = "";
document.getElementById("iconYaz").href = "ring_kara.png";
}
var j = tg;

var yz = document.getElementById("togID").innerHTML = tg; 
                 //var localStore = window.localStorage;//
                localStorage.setItem("togName", yz);
                             
// takvim gün adı //

{
    var dt = new Date();
    var weekday = new Array(7);
      weekday[0] = "PAZAR";
      weekday[1] = "PAZARTESİ";
      weekday[2] = "SALI";
      weekday[3] = "ÇARŞAMBA";
      weekday[4] = "PERŞEMBE";
      weekday[5] = "CUMA";
      weekday[6] = "CUMARTESİ";

var n = weekday[dt.getUTCDay()];
    document.getElementById("takvim").innerHTML = n;
   
}

var sn = document.getElementById('say').innerHTML = h + ":" + m + ":" + s;

var str = document.getElementById("numb").value;
             var saat = str.substr(0,2);
                 var daki = str.substr(3,2);
                     var sani = sn.substr(6,2);
document.title = sn + "  " + n + " "+ e.toLocaleDateString();

//document.title = "ALARM: "+ saat + ":" + daki;//
if(02 == sani && m == daki && h == saat  && j == 1 )

{

window.open("alarm_caliyor_e.html","_blank", "width=350, height=250");  
  //document.getElementById("sesCal").src = "ses/beep19.mp3";//
    //document.getElementById('sesCal').play();//
}

else  
{
        document.getElementById('sesCal').pause();
}
}

</script>

<br>

</div>
<style>
#say, #takvim{
color:#fff; background-color:; text-shadow:#ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px; z-index:9999;
font-size:79px;
}

b{color:red; font-size:47px;}
b1{color:gray; font-size:47px;}
input[type=time]{
width:300px;
font-size:57px;
color:red;
background:transparent;
text-align:center;
}

input[type=button]{
background:black;
color:linen;
width:300px;
}

audio{color:blue; background:red; border-radius:18px;}

img{
-webkit-filter: blur(0px);
-webkit-transition: 1.2s;
opacity: 0.4;
position: absolute;
top: 10px; left: 100px; 
z-index: -1;
width: 900px;
}

#result{
display :none; /* display :none; */
}
</style>

Alarmlı Saat indir

Elektronik Devreler

Ziyaretçi Sayısı

ARAMA YAPIN

1 Mayıs 2016 Pazar

Alarmlı Saat Html Kodları