离线宝js使用代码（图文教程）

19 9月 2014   | 前端

大部分做百度竞价的用户都使用了离线宝，但是，如何在网页中加入离线宝的代码呢？这个离线宝要加入3个代码就可以了。

1、调用部分，这个代码一般在页面最上面，下面的代码为例：

<script>

document.write(‘<script type=”text/javascript” data-lxb-uid=”6427326″ data-lxb-gid=”72461″ src=”http://lxbjs.baidu.com/api/asset/api.js?t=’ + new Date().getTime() + ‘” charset=”utf-8″></scr’ + ‘ipt>’ );
</script>

2、页面加入输入号码以及点击拨打代码

<input type=”text” id=”tell_num” onblur=”if(!value)value=defaultValue” onfocus=”value=”” value=”输入您的电话号码”/>
<input id=”sub_btn” type=”button” value=”拨打电话”>

3、js代码表示，点击执行lxb.call函数。
<script>
document.getElementById(“sub_btn”).onclick = function () {
lxb.call(document.getElementById(“tell_num”));
};
</script>

当然，很多人想要把页面做得更好看，可以使用以下的图片和拨打。

离线宝拨打电话

离线宝拨打电话

那么，代码咋写呢，网址如下（http://www.xfyyjsk.com/mytel/tel.html）提供第二和第三步骤的代码：

<!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” />
<title>mytel</title>
<script>
document.write(‘<script type=”text/javascript” data-lxb-uid=”6427326″ data-lxb-gid=”72461″ src=”http://lxbjs.baidu.com/api/asset/api.js?t=’ + new Date().getTime() + ‘” charset=”utf-8″></scr’ + ‘ipt>’ );
</script>
</head>
<body>
<script>
//免费电话部分
document.writeln(“<style>”);
document.writeln(” .call{ width:170px; height:360px; background:url(/mytel/call.gif); position:fixed; left:0; top:0;_position:absolute; _top:expression(documentElement.scrollTop + 100);}”);
document.writeln(” .call_1{ width:132px; height:25px; margin-top:94px; margin-left:18px; *margin-left:6px;}”);
document.writeln(” .call_1 input{width: 132px;height: 25px;font-size: 14px; border:1px solid #CCC; background-color:#f7f7f7;}”);
document.writeln(” .call2{ width:135px; height:135px; margin:8px 0 0 17px;}”);
document.writeln(” .call2_1{ width:135px; height:33px; overflow:hidden}”);
document.writeln(” .call2 input{ float:left; width:44px; height:33px; border:none; background:none; font-size:24px;}”);
document.writeln(” .call3{ width:107px; height:34px; margin:7px auto 0; cursor:pointer}”);
document.writeln(“</style>”)
document.writeln(“<style type=\”text/css\”>”);
//document.writeln(“input{ height: 16px; padding: 4px 0px;}”);
document.writeln(“body{font-size:12px;}”);
document.writeln(“#call{position:relative;}”);
document.writeln(“#JFimg{width:222px;height:82px;position:absolute;top:-80px;background:url(http://login.laidianduo.com/BirthCode/images/cShowTip2.gif) no-repeat;font-size:12px; color:red;text-indent:17px;}”);
document.writeln(“.input{height:20px;line-height:20px;color:#3B3B3B;text-indent:5px;border:1px solid #cccccc;”);
document.writeln(“</style>”);
document.writeln(“<body>”);
document.writeln(“<DIV id=\”call\” > “);
document.writeln(“<div id=\”padding\”></div>”);
document.writeln(“<div class=\”call\”>”);
document.writeln(” <div class=\”call_1\”><input name=\”cb_num\” id=\”cb_num\” type=\”text\” maxlength = \”12\” onKeyUp=\”JFisTel()\” value=\”\” class=\”input\” onkeyup=\”JFisTel()\” /></div> “);
document.writeln(” <div class=\”call2\”>”);
document.writeln(” <div class=\”call2_1\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”1\” onclick=\”getNum(1)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”2\” onclick=\”getNum(2)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”3\” onclick=\”getNum(3)\”>”);
document.writeln(” </div>”);
document.writeln(” <div class=\”call2_1\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”4\” onClick=\”getNum(4)\” >”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”5\” onClick=\”getNum(5)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”6\” onClick=\”getNum(6)\”>”);
document.writeln(” </div>”);
document.writeln(” <div class=\”call2_1\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”7\” onClick=\”getNum(7)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”8\” onClick=\”getNum(8)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”9\” onClick=\”getNum(9)\”>”);
document.writeln(” </div>”);
document.writeln(” <div class=\”call2_1\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”*\” onClick=\”getNum(\’*\’)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” value=\”0\” onClick=\”getNum(0)\”>”);
document.writeln(” <input class=\”cc\” type=\”button\” onClick=\”clears()\” id=\”Button11\” value=\” \” />”);
document.writeln(” </div>”);
document.writeln(” </div>”);
document.writeln(“<div class=\”call3\”><img id=\”cb_sub\” src=\”/mytel/call1.png\” style=\” float: left;margin-left: 3px;cursor: pointer;\”/></div>”);
document.writeln(“</div>”);
document.writeln(“</div>”);
document.writeln(“<IFRAME width=0 height=0 frameborder=0 scrolling=no name=\”sf\” src=\”about:blank\”></IFRAME>”);
document.writeln(“</body></html>”);
var array;
//判断是否清空
var clearContent=false;
//获得数字
function getNum(num){
var tarea=document.getElementById(‘cb_num’).value;
var tareadefault=”请输入您的电话号码”;
if(tarea==tareadefault){
document.getElementById(‘cb_num’).value=”;
}
if(clearContent){
//如果已经有结果存在则将其清空
document.getElementById(“cb_num”).value=””;
clearContent=false;
}
//获取结果对象
var objresult=document.getElementById(“cb_num”);
//实现数字连接
array=objresult.value+=num;
return array;
}
function clears(){
var len = array.length
if(len>0){
var arr=array.substring(0, len-1);
document.getElementById(‘cb_num’).value=arr;
}
array=arr;
return array;
}
document.getElementById(“cb_sub”).onclick = function () {
lxb.call(document.getElementById(“cb_num”));
};
</script>
</body>
</html>

Leave a Reply