汉字占两个字节，字符占一个字节，不设定宽度限制文本的长度
2017-04-07 15:37
501 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/indianarecords.css"/>
</head>
<body>
<!--
作者：offline
时间：2017-03-29
描述：固定的部分
-->
<h1>汉字占2个字符，字母占1个字符</h1>
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar">
<label class="label" >
<span class="mui-pull-left">
总须
<span class="count">920</span>
</span>
<span class="mui-pull-right">
剩余
<a href="javascript:;" class="lastcount">754</a>
</span>
</label>
<div class="progress">
<div class="progress-bar">
</div>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">必中黄金汽车等等等dd</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">luckdoggggg</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">哈哈哈</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">哈哈哈哈哈哈</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">1234567890</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--
作者：offline
时间：2017-03-29
描述：购买的列表
-->
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/indianarecords.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" charset="UTF-8">
mui.init();
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px';
$(function(){
//progress的长度
var progresslength = 1- ($('.lastcount').text()/$('.count').text());
progresslength = progresslength * 100;
$('.progress-bar').css('width',progresslength+'%');
//限制获得者名字的长度
var uncover = $('.progress_bar_other').length;
for(var i=0;i<uncover;i++){
var winner = $('.progress_bar_other:eq('+i+') a').text();
var totallength = 0;
for(var j=0;j<winner.length;j++){
var intcode = winner.charCodeAt(j);
if(intcode>=0&&intcode<=128){
totallength =totallength+1;
}else{
totallength = totallength+2;
}
}
if(totallength<9){
$('.progress_bar_other:eq('+i+') a').text(winner);
}else{
var totallengthcopy=0;
var newname = new Array();
for(var m=0;m<winner.length;m++){
var intcodecopy = winner.charCodeAt(m);
if(intcodecopy>=0&&intcodecopy<=128&&totallengthcopy<9){
totallengthcopy =totallengthcopy+1;
newname = newname + winner[m];
}else if(totallengthcopy<9){
newname = newname + winner[m];
totallengthcopy = totallengthcopy+2;
}
}
$('.progress_bar_other:eq('+i+') a').text(newname+'...');
}
}
})
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/indianarecords.css"/>
</head>
<body>
<!--
作者：offline
时间：2017-03-29
描述：固定的部分
-->
<h1>汉字占2个字符，字母占1个字符</h1>
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar">
<label class="label" >
<span class="mui-pull-left">
总须
<span class="count">920</span>
</span>
<span class="mui-pull-right">
剩余
<a href="javascript:;" class="lastcount">754</a>
</span>
</label>
<div class="progress">
<div class="progress-bar">
</div>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">必中黄金汽车等等等dd</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">luckdoggggg</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">哈哈哈</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">哈哈哈哈哈哈</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="goodsfoot">
<div class="progress_bar progress_bar_other">
<span>获得者：</span>
<a href="javascript:;">1234567890</a>
<span class="font-red">30</span>
<span>人次</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--
作者：offline
时间：2017-03-29
描述：购买的列表
-->
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/indianarecords.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" charset="UTF-8">
mui.init();
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px';
$(function(){
//progress的长度
var progresslength = 1- ($('.lastcount').text()/$('.count').text());
progresslength = progresslength * 100;
$('.progress-bar').css('width',progresslength+'%');
//限制获得者名字的长度
var uncover = $('.progress_bar_other').length;
for(var i=0;i<uncover;i++){
var winner = $('.progress_bar_other:eq('+i+') a').text();
var totallength = 0;
for(var j=0;j<winner.length;j++){
var intcode = winner.charCodeAt(j);
if(intcode>=0&&intcode<=128){
totallength =totallength+1;
}else{
totallength = totallength+2;
}
}
if(totallength<9){
$('.progress_bar_other:eq('+i+') a').text(winner);
}else{
var totallengthcopy=0;
var newname = new Array();
for(var m=0;m<winner.length;m++){
var intcodecopy = winner.charCodeAt(m);
if(intcodecopy>=0&&intcodecopy<=128&&totallengthcopy<9){
totallengthcopy =totallengthcopy+1;
newname = newname + winner[m];
}else if(totallengthcopy<9){
newname = newname + winner[m];
totallengthcopy = totallengthcopy+2;
}
}
$('.progress_bar_other:eq('+i+') a').text(newname+'...');
}
}
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android EditText 文本长度限制（按照一个汉字占俩长度 类似字节）
- 汉字算一个字符（实际上占两个字节），英文字母也算是一个字符（实际上占一个字节）
- javascript 返回字符长度，中文为两个字节，英文为一个字节
- JS判断输入字符串长度（汉字算两个字符，字母数字算一个）
- js判断输入字符串长度(汉字算两个字符,字母数字算一个)
- js脚本系列(1) JS判断输入字符串长度（汉字算两个字符，字母数字算一个）
- 读取字符串的长度,一个汉字,为两个字节
- 读取字符串的长度,一个汉字,为两个字节
- 计算文本长度，区分中英文字符，中文算两个长度，英文算一个长度
- C# 获取字符串长度，一个汉字算两个字节
- 取得长度为length的字符串，一个汉字算两个字符
- js判断输入字符串长度（汉字算两个字符，字母数字算一个）
- javascript正则表达式取汉字的长度，一个汉字占两个字节长度
- js判断输入字符串长度（汉字算两个字符，字母数字算一个）
- JS判断输入字符串长度（汉字算两个字符，字母数字算一个）
- 解决文本框中输入字符限制---精确控制中文占两个字节，英文占一个字节~
- js 限制表单输入长度 汉字为两个字符
- js 限制表单输入长度 汉字为两个字符
- java 的 数字、汉字 和 字母 的所占字节长度 与 字符长度 （邮件限制50个汉字）
- js字符限制(字符截取) 一个中文汉字算两个字符