基本信息
源码名称：html5新消息提示声音
源码大小：0.09M
文件格式：.zip
开发语言：js
更新时间：2019-04-04
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!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=utf-8" /> 
        <title>HTML5手机声音提示</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <style>
            #chatBox{width:400px;border:1px solid #d3d3d3;margin:50px auto;}
            #chat {max-height:220px;overflow-y:auto;max-width:400px;}
            #chat > ul > li{padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto}
            #chatMessages{list-style:none}
            #chatMessages > li > img{width:35px;float:left}
            #chatMessages > li > span{width:300px;float:left;margin-left:5px}
            #chatData{padding:5px;margin:5px;border-radius:5px;border:1px solid #999;width:300px}
            #trig2 {padding: 4px;border: solid 1px #666;background-color: #133783;color:#fff;
                    font-weight:bold; cursor:pointer}
            #trig {border: 1px solid #390; color:#fff; background: #360;-webkit-border-radius: 3px;
                   -moz-border-radius:3px;padding:5px 8px; cursor:pointer}
            </style>
        </head>
        <body>
            <div class="container">
            <div class="demo">
                <h2 class="title"><a href="#">教程：HTML5声音提示</a></h2>
                <div id='chatBox'>
                    <div id='chat'>
                        <ul id='chatMessages'>
                            <li>
                                <img src="qq.gif"/><span>Hello Friends</span>
                            </li>
                            <li>
                                <img src="qq.gif"/><span>你好，朋友！手册网shouce.ren欢迎你.</span>
                            </li>
                        </ul>
                    </div>
                    <input type="text" id="chatData" placeholder="Message" />
                    <input type="button" value=" 发送 " id="trig" />
                </div>
            </div>
        </div>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
        <script type="text/javascript">
            $(function() {
                $("#chatData").focus();
                $('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
                $("#trig").click(function() {
                    var a = $("#chatData").val().trim();
                    if (a.length > 0) {
                        $("#chatData").val('');
                        $("#chatData").focus();
                        $("<li></li>").html('<img src="qq.gif"/><span>'   a   '</span>').appendTo("#chatMessages");
                        $("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
                        $('#chatAudio')[0].play();
                    }
                });
            });
        </script>
    <script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script></body>
</html>