兼容主流浏览器的网页闹钟
博客专区 > JB晨 的博客 > 博客详情
兼容主流浏览器的网页闹钟
JB晨 发表于3年前
兼容主流浏览器的网页闹钟
  • 发表于 3年前
  • 阅读 44
  • 收藏 0
  • 点赞 0
  • 评论 2

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: 这个网页闹钟是基于JS,CSS完成的,主要使用HTML5,为了兼容IE的老版本,使用了其特有的特性。 贴出了JS部分的主要实现。
//下面是要用到的全局变量
var songSrc="";     //铃声路径
var clickTime=null; //按键时的即时时间
//判断是否为数字
function nanFilter(event){
    var eve=window.event||event;
    var code=eve.keyCode||eve.which;
    if(code<48&&code!=8||code>57){
        return false;
    }
    return true;
}
/*
    大家可以看到,此处做了两种兼容性的处理:
    1对于事件对象的IE和标准浏览器
    2对于按键值的兼容
    有一点需要注意,Backspace回退键不需要过滤
*/
 
function isOldIE(){
    var mode=document.documentMode;
    var activeX=window.ActiveXObject;
    //是否为IE
    if(activeX){
        //为IE 8或渲染模式为IE 8或不支持mode(IE 6,7)
        if(!mode||mode<9){
            return true;
        }
    }
    return false;
}
/*
   此处用到了mode,这是IE独有的玩意儿,可用于判断IE的版本或者内核的渲染
*/

function getBgSoundElement(){
    var bgsoundElement=null;
    //IE 6,7,8
    if(window.isOldIE()){
        bgsoundElement=document.createElement("bgsound");
    }
    else{
        bgsoundElement=document.createElement("audio");
    }
    return bgsoundElement;
}
/*
   关键性的代码,用于动态创建音频元素,此处做了兼容性处理


*/

function bindAttribute(bgSoundElement){
    bgSoundElement.setAttribute("src",songSrc);
    if(bgSoundElement.nodeName=="AUDIO"){
        bgSoundElement.setAttribute("autoplay","autoplay");
    }
}
/*
   绑定自动播放属性及路径到元素
*/

function getMilliseconds(hours,minutes,seconds){
    var date=new Date();
    if(hours&&hours>=0&&hours<=23){
        date.setHours(hours);
    }
    if(minutes&&minutes>=0&&minutes<=59){
        date.setMinutes(minutes);
    }
    if(seconds&&seconds>=0&&seconds<=59){
        date.setSeconds(seconds);
    }
    return date.getTime();
}
/*
   根据时分秒获取毫秒数
*/

function disableAllInput(){
    var inputs=document.getElementsByTagName("input");
    for(var i in inputs){
        inputs[i].disabled=true;
    }
}
/*
   将页面上所有控件禁用主要的工作已经完成了,剩下的就靠组装了~~
*/
共有 人打赏支持
粉丝 0
博文 3
码字总数 919
评论 (2)
kofack
膜拜
kofack
79
×
JB晨
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: