zoukankan      html  css  js  c++  java
  • 网页闹钟

    现在是北京时间:<span id='yanshi_time'></span><br/>
    <audio src='http://cctv3.qiniudn.com/tbhdqx.mp3' preload='auto' id='music'></audio>
    请设定你的闹铃时间:
    <input type='number' value='08' id='qiuye_shiz' size='1' min='0' max="23">
    <input type='number' value='30' id='qiuye_fenz' size='1' min='0' max="59">
    <input type='number' value='00' id='qiuye_miaoz' size='1' min='0' max="59">
    <input type='button' value='关闭闹钟' id='qiuye_gb' size=2>
    <script>
    window.onload=function(){//网页加载完成后才执行以下代码
    qiuye_shiz=document.getElementById('qiuye_shiz').value,//获取输入框的值
    qiuye_fenz=document.getElementById('qiuye_fenz').value,//获取输入框的值
    qiuye_miaoz=document.getElementById('qiuye_miaoz').value;//获取输入框的值
    var input=document.getElementsByTagName('input');//取得input数组
    var music=document.getElementById('music');//取得音乐所在标签
    var gb=document.getElementById('qiuye_gb');//获取关闭按钮
    for(i=0;i<input.length;i++){//for循环
    input[i].oninput=function(){//每个输入框输入文字后执行以下代码
    qiuye_shiz=document.getElementById('qiuye_shiz').value,//重新获取输入框的值
    qiuye_fenz=document.getElementById('qiuye_fenz').value,//重新获取输入框的值
    qiuye_miaoz=document.getElementById('qiuye_miaoz').value;//重新获取输入框的值
    }}
    function showtime(){//函数方法
    var time=new Date();//获取本地时间
    var minute=time.getMinutes();//获取分钟
    var hou=time.getHours();//获取小时
    var sec=time.getSeconds();//获取秒钟
    var content=document.getElementById('yanshi_time');//获取yanshi_time标签
    content.innerHTML=''+add_o(hou)+' : '+add_o(minute)+' : '+add_o(sec);//往标签里面插入内容,分别是小时+分钟+秒钟的字符串连接
    var d1=hou>=qiuye_shiz&&minute>=qiuye_fenz&&sec>=qiuye_miaoz;
    var d2=hou>=qiuye_shiz&&minute>qiuye_fenz;
    var d3=hou>qiuye_shiz; 
    if(d1||d2||d3){//判断输入框的时间
    if(!music.play()){music.play();}//响铃
    content.style.color='red';//改变字体颜色为红色
    }
    else{music.pause();content.style.color='black';}//同理
    }
    showtime();//先执行一遍showtime函数
    function add_o(m){//小时,分钟,秒钟数字小于10的往前补一个0,标准化时间格式
    if(m<10){return '0'+m;}
    else{return m;}
    }
    var timer=setInterval(showtime,1000);//设置定时器,每隔一秒执行一次showtime函数
    gb.onclick=function(){//关闭按钮被点击后关闭铃声
    qiuye_shiz=24;
    }}
    </script>
  • 相关阅读:
    微服务架构技术栈选型手册(万字长文)
    Visual Studio 2013 always switches source control plugin to Git and disconnect TFS
    Visual Studio 2013 always switches source control plugin to Git and disconnect TFS
    MFC对话框中使用CHtmlEditCtrl
    ATL开发 ActiveX控件的 inf文件模板
    ActiveX: 如何用.inf和.ocx文件生成cab文件
    Xslt 1.0中使用Array
    如何分隔两个base64字符串?
    An attempt was made to load a program with an incorrect format
    JQuery 公网 CDN
  • 原文地址:https://www.cnblogs.com/zdfbk/p/7015735.html
Copyright © 2011-2022 走看看