webapp混合开发问题备忘

最新推荐文章于 2025-08-07 17:49:07 发布

原创最新推荐文章于 2025-08-07 17:49:07 发布 · 833 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #Web App #-webkit-box #移动设备

css3 同时被 2 个专栏收录

6 篇文章

订阅专栏

webapp

5 篇文章

订阅专栏

本文详细介绍了前端开发中常见的问题及解决办法，包括事件绑定、输入内容编码、checkbox操作、日期格式转换、文本强制换行、微信样式对话框实现、select元素使用、文字图片居中、文字溢出处理、textarea换行、table合并边框、fastclick.js应用、base64图片显示、jQuery元素插入等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目说明：

1.header和footer区域用的原生开发，中间部分webview(html5开发)；

2.开发的js库用的jquery，但没用jquery的ui（改起来太费劲！！）

问题：

1.用jquery绑定点击事件后，有时候点击正常，有时候执行两次，接着会执行次数成倍增加，解决办法：先取消事件绑定，再重新绑定事件：如下：

 $("#ID").unbind('touchend');
 $("#ID").bind('touchend',function(){ ... });

2.回复框需要对输入的内容进行编码，（比如双引号要进行转义等），前端输出内容时再解码：

encodeURIComponent（reply_content）;

decodeURIComponent（reply_content）;

3.关于checkbox：

判断是否选中checkbox：

if($(this).is(":checked")){ ... }；

设置选中和未选中：

$("#checkbox").attr("checked",true);
$("#checkbox").attr("checked",false);

循环读取选中checkbox的值：

var str='';
$("input[type=checkbox][checked]").each(function(){ 
	//复选框一般选中的是多个,所以可以循环输出 
	str += $(this).val(); 
});

4.日期格式转换：

1).toLocalString() 转换成北京时间格式：

var time = 1370510331525；    //13位数（毫秒）
function formatDate(time){
	var newTime = new Date(parseInt(time)).toLocaleString(); 
	return str;
}
formatDate(time);  //执行结果:  2013年6月6日 下午5:18:51

2).只获取年月日：

var time = 1370510331525   //13位数时间戳
function formatDate(time){
         varnewTime = new Date(parseInt(time));
         vary = newTime.getFullYear(); //年
         varm = newTime.getMonth()+1;//月
         vard = newTime.getDate();//日
         varstr = y+'-'+m+'-'+d;
         returnstr;
}
formatDate(time);   //2013-06-06

备注：如果时间戳为10位数，则：var newTime = new Date(parseInt(time*1000));

3).获取现在时间的时间戳：

Math.round(new Date().getTime()/1000); //getTime()返回数值的单位是毫秒;

4).转换成几小时前，几分钟前..

function getDateDiff(dt1,dt2){
       var msg = '';
       var diff  = new Date();
       diff.setTime(Math.abs(dt1 - dt2));  
       timediff = diff.getTime();
   
       weeks = Math.floor(timediff / (1000 * 60 * 60 * 24 *7));
       timediff -= weeks * (1000 * 60 * 60 * 24 * 7);
 
days = Math.floor(timediff / (1000 * 60 * 60 * 24)); 
timediff -= days * (1000 * 60 * 60 * 24);
 
hours = Math.floor(timediff / (1000 * 60 * 60)); 
timediff -= hours * (1000 * 60 * 60);
 
mins = Math.floor(timediff / (1000 * 60)); 
timediff -= mins * (1000 * 60);
 
secs = Math.floor(timediff / 1000); 
timediff -= secs * 1000;

if(weeks){
msg = weeks+"星期前";
}else{
if(days){
msg = days+"天前";
}else{
if(hours){
msg = hours+"小时前";
}else{
if(mins){
msg = mins+"分钟前";
}else{
if(secs){
msg = "刚刚";
}
}
}
}
};
return msg;
}

//前提：参数dt1与dt2都是13位数字的unix时间戳，如果不是需要先转换下或者稍微修改写下函数；

getDateDiff('1370590331525','1370500331525'); // 1天前

5.关于长串英文或者数字强制换行：

word-wrap: break-word;table-layout:fixed;word-break:break-all;

6.类似微信的css3对话框：

html：

<ul class="msgbox">
         <li class="msg_time"><span>2013-07-03</span></li>
         <li class="msg_l"><img src="image/icons/user.png"/><p><span class="arrow_box_l">测试本条消息测试本条消息测试本条消息测试本条消息测试本条消息</span></p></li>
         <li class="msg_r"><p><span class="arrow_box_r">删除本条消息删除本条消息消息删除本条消息删除本条消息消息删除本条消息删除本条消息消息</span></p><img src="image/icons/user.png"width="33" height="33"/></li>
         <li class="msg_l"><img src="image/icons/user.png"width="33" height="33"/><p><spanclass="arrow_box_l">好的~~~</span></p></li>
         <li class="msg_r"><p><span class="arrow_box_r">是否同意？？？</span></p><imgsrc="image/icons/user.png" width="33"height="33"/></li>
         <li class="msg_l btns">
                   <span>
                         <a href="#"class="inlineBtn">拒绝</a>
                         <a href="#"class="inlineBtn">同意</a>
                </span>
           </li>
</ul>

摘主要的css:

.msgbox li{display:-webkit-box;-webkit-box-orient:horizontal;}
.msgbox li p{-webkit-box-flex:1;}   //让p占满整行
/*左侧*/
.arrow_box_l {position:relative;background: #396B9E;border: 1px solid#396B9E;padding:7px;border-radius:7px;-webkit-box-shadow:1px 1px 3px #999,-1px-1px 3px #ddd;color:#fff;line-height:1.5em;font-size:1.4em;float:left;}
.arrow_box_l:after, .arrow_box:before{right: 100%;border: solid transparent;content: " ";height: 0;width:0;position: absolute;pointer-events: none;}
.arrow_box_l:after {border-color: rgba(57,107, 158, 0);border-right-color: #396B9E;border-width: 7px;top:1.2em;margin-top: -7px;}
.arrow_box_l:before {border-color: rgba(57,107, 158, 0);border-right-color: #396b9e;border-width: 8px;top:1.2em;margin-top: -8px;}
/*右侧*/
.arrow_box_r {position:relative;background: #F0F0F0;border: 1px solid#F2F2F2;padding:7px;border-radius:7px;-webkit-box-shadow:1px 1px 3px #999,-1px-1px 3px #ddd;color:#484848;line-height:1.5em;font-size:1.4em;float:right;}
.arrow_box_r:after, .arrow_box_r:before{left: 100%;border: solid transparent;content: " ";height: 0;width:0;position: absolute;pointer-events: none;}
.arrow_box_r:after {border-color: rgba(214,214, 214, 0);border-left-color: #F0F0F0;border-width: 7px;top:1.2em;margin-top: -7px;}
.arrow_box_r:before {border-color:rgba(214, 214, 214, 0);border-left-color: #F0F0F0;border-width: 8px;top:1.2em;margin-top: -8px;}

上图：

注解：在lenovo A300的pad上遇到左对话框没有圆角的效果，解决办法把border: 1px solid #396B9E;去掉；（很奇怪？？）

7.关于select

$("#select1").val(); // 获取选中的值，
$("#select1  option:selected").text(); //获取选中的文本

8.关于文字图片的居中：

如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，

添加CSS属性：vertical-align:middle;

这样，它们在同一行就会垂直居中对齐了。

9.文字溢出省略号表示：

.txt{width:10em; white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

10.

textarea换行：&#13 
table合并边框：border-collapse: collapse;

11.fastclick.js的使用:

<script src="js/fastclick.js"></script> 
<script>
  FastClick.attach(document.body);
</script>
或者
<script type="application/javascript">
  window.addEventListener('load', function() {
	new FastClick(document.body);
  }, false);
</script>

12.base64图片显示：

'<img src="data:image/png;base64,'+后台传入的base64编码+ ' " width="20" height="20" />'

13.jquery元素插入：

$(“p”).before( $(“b”);表示p的前面是b，也就是b要插到p的前面。
$(“p”).insertBefore(“b”);表示将p插入到b的前面。

14.