2顶

漂亮实用网页定制闹钟提醒功能

稿源：互联网 2022-04-02 21:43:02 点击： 3591 撤稿纠错

网址导航网站常用的闹钟提醒功能，可添加多条提醒任务。

以下讨论的是和闹钟相关的漂亮实用网页定制闹钟提醒功能教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 实用漂亮的可订制闹钟提醒功能 站长特效网欢迎您。</title>
<style type="text/css">
body{line-height:180%;background:#FFF;font-size:14px;color:#333;}
*{margin:0;padding:0;font-family:"宋体",Arial;word-wrap:break-word;word-break:break-all;table-layout:fixed;word-break/**/:normal;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img{border:0;vertical-align:middle;}
li{list-style:none;}
a{color:#0E6DBC;text-decoration:none;}
div.border{border:1px solid #ace;background:#fff;}
body{line-height:180%;background:#fff;font-size:14px;color:#333;}
#clockT{width:320px;font-size:12px;line-height:180%;margin:0 auto;background:url(/img/bgcon.gif) center top no-repeat;margin-top:10px}
#clockT .close{width:100%;padding:6px 0 12px;}
#clockT .close img{float:right;margin-right:6px;display:inline;}
#clockT .conBox{width:100%;background:url(/img/bgcon.gif) center bottom no-repeat;margin-bottom:-10px;_margin-bottom:0px;clear:both;}
#clockT .cloBox{width:308px;margin:0 auto;}
#clockT .point{width:278px;color:#0E6DBC;padding-bottom:10px;margin:6px auto 0;}
#clockT .todays{background:#fff;padding:6px 0 3px;text-align:center;font-size:14px;border:1px solid #B4D6F4;}
#clockT .todays a{font-size:14px;}
#clockT .tools{background:#fff;border:1px solid #AFD2F0;padding:6px 18px;}
#clockT .tools td{vertical-align:top;padding:5px 0;}
#clockT .tools td *{vertical-align:text-bottom;}
#clockT .tools textarea{width:178px;height:60px;padding:6px;}
#clockT .tagBox{position:relative;width:100%;margin-top:5px;margin-bottom:-1px;clear:both;}
#clockT .tagBox li{width:88px;height:22px;margin-right:3px;display:inline;text-align:center;padding-top:4px;line-height:22px;background:url(/img/tagimg.gif) left top no-repeat;float:left;}
#clockT .tagBox li.at{background-position:right top;}
#clockT .listC{width:100%;clear:both;}
#clockT .listC li{background:#FFFCE6;padding:0 5px;margin-bottom:3px;border:1px solid #F7EEB1;}
#clockT .listC li img{float:right;margin-top:6px;margin-right:5px;}
#clockT .listC li span{color:#004DCC;}
#clockT .time{text-align:center;width:100%;background:url(/img/bg_orange.gif) center no-repeat;line-height:57px;color:#338500;font-size:36px;font-family:Arial, Helvetica, sans-serif;}
#clockT .btnA{width:100%;clear:both;}
#clockT .btnA li{width:81px;cursor:pointer;font-size:14px;color:#3366BB;font-weight:bold;margin:0 2px;display:inline;height:35px;text-align:center;line-height:35px;background:url(/img/btn09.gif) -100px 0 no-repeat;float:left;}
#clockT .btnA li.out{background-position:-100px -35px;color:#9CB7E1;}
#clockT .btnA li.at{background:url(/img/btn09.gif) -100px 0 no-repeat;}
#clockT .btnA li.out1{width:95px;background:url(/img/btn09.gif) 0 -35px no-repeat;color:#9CB7E1;}
#clockT .btnA li.at1{width:95px;background:url(/img/btn09.gif) 0 0 no-repeat;}
#clockT .tagBox:after,#clockT .close:after,#clockT .tools:after{display:block;clear:both;height:0;content:"";visibility:hidden;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="clockT">
    <div class="close"></div>
    <div class="conBox">
        <div class="cloBox">
            <div class="todays" id="today"></div>
            <ul class="tagBox"><li class="at">定时闹钟</li></ul>
            <div class="tools">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="28%">提醒时间：</td>
                    <td width="72%">
                      <label id="hour">
                      </label>时
                      <label id="minute">
                      </label>分
                    </td>
                  </tr>
                  <tr>
                    <td>闹钟铃声：</td>
                    <td>
                      <label>
                        <select name="select3" id="songs"><option value="/img/1.mid">爱如潮水</option><option value="/img/2.mid">春江花月夜</option><option value="/img/3.mid">二泉映月</option><option value="/img/4.mid">回家</option><option value="/img/5.mid">卡农</option><option value="/img/6.mid">梁祝</option><option value="/img/7.mid">浏阳河</option><option value="/img/8.mid">茉莉花</option><option value="/img/9.mid">南泥湾</option><option value="/img/10.mid">起床号</option><option value="/img/11.mid">千里之外</option><option value="/img/12.mid">上海滩</option><option value="/img/13.mid">水边的阿迪丽娜</option><option value="/img/14.mid">天仙配</option><option value="/img/15.mid">甜蜜蜜</option><option value="/img/16.mid">土耳其进行曲</option><option value="/img/17.mid">我只在乎你</option><option value="/img/18.mid">星语心愿</option><option value="/img/19.mid">致爱丽丝</option><option value="/img/20.mid">猪八戒背媳妇</option><option value="/img/21.mid">最浪漫的事</option></select>
                        <button id="alarm_music_button">试听</button>
                      </label>
                      <div id="ff"></div>
                      <BGSOUND id="player" autostart="true" loop="1" hidden="1" />
                    </td>
                  </tr>
                  <tr>
                    <td>提示文字：</td>
                    <td>
                       <input name="alarm_textarea" id="text" maxlength="40" value="休息，休息一下吧！">
                    </td>
                  </tr>
                  <tr>
                    <td>重复提醒：</td>
                    <td>
                      <label for="noRepeat"><input type="radio" id="noRepeat" name="alarm_is_single" checked />
                        不重复</label><label for="repeatDaily">
                        <input type="radio" name="alarm_is_single" id="repeatDaily" />
                        每天提醒</label>
                     </td>
                  </tr>
                  <tr>
                    <td> </td>
                    <td><span id="remind"><img src="/img/btn.gif" width="142" height="41" alt="确定添加闹钟" style="cursor:pointer;" /></span></td>
                  </tr>
                </table>
                <ul class="listC" id="remindList"></ul>
            </div>
            <div class="point">
                <h1>温馨提示：</h1>
                <p>·如果关闭这个页面，闹钟功能将失效。</p>
                <p>·需要打开音响或佩戴耳机，以便听到提示铃声。</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    -function(){
        var d = document,$ = function(id){return d.getElementById(id)},date = new Date,
            today = $('today'),songs = $('songs'),listen = $('alarm_music_button'),player=$('player'),remind = $('remind'),remindList = $('remindList'),
            norepeat = $('noRepeat'),text = $('text'),hour=$('hour'),minute=$('minute'),en =encodeURIComponent,de = decodeURIComponent,time={length:0},timer,ff= $('ff'),
            setCookie = function(n,v,e){
                d.cookie = n+"="+v+";path=/;expires=" + e.toGMTString();
            },
            start = function(){
                timer = setInterval(function(){
                    var date = new Date,p,tmp,h = date.getHours(),m = date.getMinutes();
                    for(p in time){
                        tmp = time[p];
                        if(typeof tmp != 'number'&&tmp.h==h&&tmp.m==m){
  //                          alert(tmp.t);
                            songs.value=tmp.s;
                            songs.onchange();
                            if(tmp.r=='0'){
                                var li = $('p'+p)
                                li.parentNode.removeChild(li);
                                for(var i=0,ci,lis=remindList.getElementsByTagName('li');ci=lis[i++];){
                                    ci.getElementsByTagName('strong')[0].innerHTML = i;
                                };
                                setCookie('p'+p,'',new Date);
                            }
                            delete time[p];
                            time.length--;
                        }
                    }
                },1000)
            }
        //设置select的小时分钟
        for(var i=0,date10 = new Date(date*1 + 600000),html=['<select name="select"  id="hour">'];i<23;i++){
            html[i+1]='<option value="'+i+'" '+(date10.getHours()==i?'selected':'')+'>'+(i<10?'0':'')+i+'</option>'
        }
        hour.innerHTML = html.join('')+'</select>';
        for(i=0,html=['<select name="select2"  id="minute">'];i<59;i++){
            html[i+1]='<option value="'+i+'" '+(date10.getMinutes()==i?'selected':'')+'>'+(i<10?'0':'')+i+'</option>'
        }
        minute.innerHTML = html.join('')+'</select>';
        //取cookie
        var reg = /pd+=([^;]+)/g,m,index=1,dc = d.cookie;
        while(m = reg.exec(dc)){
            m = m[1].split('|');
            time[m[3]+m[4]] ={
                'h' : m[3],
                'm'    : m[4],
                't'    : de(m[2]),
                's'    : de(m[1]),
                'r'    : m[0]
            }
            time.length++;
            remindList.innerHTML +='<li id="p'+m[3]+m[4]+'"><span><img style="cursor:pointer;" onclick="delRemind('+m[3]+m[4]+')" src="/img/clo_ico.gif" width="8" height="8" border="0" /></span><strong>'+index+'</strong> '+(m[0]=="0"?'单次提醒':'重复提醒')+'：'+m[3]+':'+m[4]+' <span  title="'+de(m[2])+'">'+de(m[2]).slice(0,9)+'</span></li>';
            index++;
        }
        start();
        //当前时间显示
        setInterval(function(){
            var date = new Date,h = date.getHours(),m = date.getMinutes(),s = date.getSeconds();
            today.innerHTML = '当前时间：<span>'+date.getFullYear()+'</span>年<span>'+(date.getMonth()+1)+'</span>月<span>'+date.getDate()+'</span>日  '+
            (h<10?'0'+h:h)+'时'+(m<10?'0'+m:m)+'分'+(s<10?'0'+s:s)+'秒'
        },1000)
        //音乐
        songs.onchange = function(){
            if(d.all)
                player.src = this.value;
            else
                ff.innerHTML = '<object height="1" width="1" type="application/x-oleobject" standby="Loading Microsoft Windows Media Player..." codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="player"><param value="'+this.value+'" name="FileName"><param value="true" name="autoStart"><embed height="1" width="1"  autostart="true" src="'+this.value+'" name="MediaPlayer" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2"></object>'
            listen.innerHTML = '停止'
        };
        listen.onclick = function(){
            if(d.all)
                player.src = this.innerHTML=='停止'?'':songs.value;
            else
                ff.innerHTML = this.innerHTML=='停止'?'':'<object height="1" width="1" type="application/x-oleobject" standby="Loading Microsoft Windows Media Player..." codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="player"><param value="'+songs.value+'" name="FileName"><param value="true" name="autoStart"><embed height="1" width="1"  autostart="true" src="'+songs.value+'" name="MediaPlayer" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2"></object>'
            this.innerHTML = this.innerHTML=='停止'?'试听':'停止'
        };
        //提醒添加
        remind.onclick = function(){
            var length = remindList.getElementsByTagName('li').length,h=hour.getElementsByTagName('select')[0].value,m=minute.getElementsByTagName('select')[0].value;
            if(length==8){
                alert('最多8个')
            }else{
                setCookie('p'+h+m,(norepeat.checked?0:1)+"|"+en(songs.value)+"|"+en(text.value)+"|"+h+"|"+m,new Date(+new Date +(norepeat.checked?1:365)*3600*1000*24));
                time[h+m] ={
                    'h' : h,
                    'm'    : m,
                    't'    : text.value,
                    's'    : songs.value,
                    'r'    : norepeat.checked?0:1
                }
                time.length++;
                remindList.innerHTML +='<li id="p'+h+m+'"><span><img style="cursor:pointer;" onclick="delRemind('+h+m+')" src="/img/clo_ico.gif" width="8" height="8" border="0" /></span><strong>'+(++length)+'</strong> '+(norepeat.checked?'单次提醒':'重复提醒')+'：'+(h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+' <span  title="'+text.value+'">'+text.value.slice(0,9)+'</span></li>';
                start();
            }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
        delRemind = function(i){
            setCookie('p'+i,'',new Date);
            delete time[i];
            time.length--;
            var li = $('p'+i),lis = remindList.getElementsByTagName('li');
            li.parentNode.removeChild(li);
            for(var i=0,ci;ci=lis[i++];){
                ci.getElementsByTagName('strong')[0].innerHTML = i;
            }
        }
    }()
</script>
</body>
</html>

关于漂亮实用网页定制闹钟提醒功能的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564728.shtml方便下次再访问哦。

·上一篇： 加入网摘悬浮左侧效果
·下一篇： 按回车键方块自由下落效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

漂亮实用网页定制闹钟提醒功能

文章分类LIST >>返回首页

最新游戏

最新新闻