java，jsp页面添加提示图以及提示音乐

来源：互联网发布：淘宝聚划算抢拍器编辑：程序博客网时间：2024/05/21 17:33

效果如下：
这里写图片描述

前台代码<!-- 使用h5写的提醒图片--> <style>.tx{ width:38px;height:30px;display:inline- block;background:url("../../../images/sos.gif") no-repeat;position:relative;top:5px;left:3px;<!-- 使用h5写的提醒图片-->}</style>     <!--下载的音乐 --> <a href="#" id="MsgNum"><i onclick="remind()"><i class="hasxx"></i></i></a> <audio autoplay="autoplay" loop="loop" id="remindSound"></audio><!--下载的音乐 --> <!--当进入时候就会执行方法-->$(document).ready(function (){    remindTasking(); }); <!--执行完以下代码之后为重点：添加提示图片以及音乐-->function remindTasking(){$.ajax({    url: "/remind/remindList.html",    type: "post",    dataType:"json",    cache: false,    async: false,    success: function(data){//请求成功之后        if(data.length>0){//如果有数据                               $('#MsgNum').attr("title","你有"+data.length+"条未读消息");            $('#recolor').attr("color","red");            $("#remindSound").attr("src","../../../music/7821.mp3");//添加音乐            $('#MsgNum .hasxx').addClass('tx');//添加显示的图片        }else{  //如果没有数据            $("#remindSound").attr("src","");//将音乐清空            $('#recolor').attr("color","white");            $('#MsgNum .hasxx').removeClass('tx');//将显示的提示图片去掉        }    } })}

如果有数据此时会有图片音乐，如上图所示：
注：（1）后台代码我就不写了；
（2）添加音乐使用的标签：

(3)图片就不多说了；
希望对你有用

1 0