模仿图标提示红气泡

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="jquery.min.js" type="text/javascript"></script>
 6     <script language="javascript" type="text/javascript">
 7         $(document).ready(function () {
 8             aa("", 1);
 9         });
10 
11         function aa(a, s) {
12             var lb_va = "";
13             if (s == 1) {
14                 lb_va = document.getElementById("lb").innerText;
15             }
16             else { lb_va = a; }
17             lb_va = $.trim(lb_va);
18             var div1 = document.getElementById("diva");
19             if (lb_va.length == 1) {
20                 div1.style.width = "15px";
21                 div1.style.right = "-15px";
22                 div1.style.top = "-10px";
23             } else if (lb_va.length == 2) {
24                 div1.style.width = "20px";
25                 div1.style.right = "-15px";
26                 div1.style.top = "-10px";
27             }
28             else if (lb_va.length == 3) {
29                 div1.style.width = "30px";
30                 div1.style.right = "-15px";
31                 div1.style.top = "-10px";
32             }
33             else if (lb_va.length == 4) {
34                 div1.style.width = "40px";
35                 div1.style.right = "-15px";
36                 div1.style.top = "-10px";
37             }
38         }
39 
40         function Trim(str, is_global) {
41             var result;
42             result = str.replace(/(^s+)|(s+$)/g, "");
43             if (is_global.toLowerCase() == "g") {
44                 result = result.replace(/s/g, "");
45             }
46             return result;
47         }
48 
49         function ti() {
50             var a = $("#tx").val();
51             $("#lb").html(a);
52             aa(a, 0);
53         }
54     </script>
55     <style type="text/css">
56         .divv
57         {
58             height: 20px; /*  20px;
59             right: -25px;
60             top: -10px;*/
61             float: right;
62             position: relative;
63             background-color: #FF3B30;
64             text-align: center;
65             color: Black;
66             border-radius: 10px;
67             border: solid rgb(100,100,100) 1px;
68         }
69         .divvv
70         {
71             border: 1px solid #ccc;
72              40px;
73             height: 40px;
74             margin-top: 100px;
75             background-image: url('Style/image/setting.png');
76             background-repeat: no-repeat;
77         }
78         a
79         {
80             text-decoration: none;
81         }
82     </style>
83 </head>
84 <body>
85 <input type="text" id="tx" />
86     <input type="button" id="btn_tijiao" value="提交" onclick="ti()" />
87     <div class=" divvv">
88         <div id="diva" class="divv">
89             <label id="lb">
90                 1111</label>
91         </div>
92     </div>
93 </body>
94 </html>
效果：