谁会用css或者js将数字分节显示？？

郭大侠_ 2010-12-10 10:58:59
如
<table><tr><td>1234567.89</td></tr></table>
显示成
<table><tr><td>1,234,567.89</td></tr></table>

优先使用css搞定，如果css搞不定，考虑用js
谢谢！
...全文
236 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
郭大侠_ 2010-12-13
  • 打赏
  • 举报
 回复
结了吧，估计也没什么好方法了！
郭大侠_ 2010-12-10
  • 打赏
  • 举报
 回复
难道没人会吗？
yixianggao 2010-12-10
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 gsh945 的回复:]
ie怎么写都不行啊，就是慢!
[/Quote]
确实 5500 个 td 用了 9 秒，主要是 set innerHTML 时非常耗时，

循环和格式化的时间几乎可以忽略不计！
yhtapmys 2010-12-10
  • 打赏
  • 举报
 回复
[Quote=引用 14 楼 yixianggao 的回复:]
To #12, 这些内容还处于讨论中，未正式发布！

CSS Working Group Wiki » Ideas and Resolutions » Content Data Functions
[/Quote]

不好意思，那么LZ目前只能用js了...

或者在后台进行格式化后再送出。
good_dou 2010-12-10
  • 打赏
  • 举报
 回复
String inputUseRateAvgValue = new DecimalFormat("#,###.###").format(1234567.89));

对数字进行格式化不就行了吗？
郭大侠_ 2010-12-10
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 yixianggao 的回复:]
当前状况下，理论上还是 #8 的正则方法最快！

另，如果是 IE，可以考虑 css 中的 expression，可以省去查询时间。
[/Quote]
ie怎么写都不行啊，就是慢!
yixianggao 2010-12-10
  • 打赏
  • 举报
 回复
当前状况下，理论上还是 #8 的正则方法最快！

另，如果是 IE，可以考虑 css 中的 expression，可以省去查询时间。
yixianggao 2010-12-10
  • 打赏
  • 举报
 回复
To #12, 这些内容还处于讨论中，未正式发布！

CSS Working Group Wiki » Ideas and Resolutions » Content Data Functions
yhtapmys 2010-12-10
  • 打赏
  • 举报
 回复
第二个CSS样式 比较接近楼主的要求
yhtapmys 2010-12-10
  • 打赏
  • 举报
 回复
Example HTML


<span class="phone">123467</span>

Should be displayed and spoken as “12 34 56”



<td class="price">987654321</td>

Should be displayed as [987,654,321.00 USD] and spoken as “nine hundred and eighty seven million six hundred and fifty four thousand three hundred and twenty one point zero zero US dollars” 



<td class="sweprice">987654321</td>

Should be displayed as [987 654 321,00 SEK] and spoken as “nine hundred and eighty seven million six hundred and fifty four thousand three hundred and twenty one comma zero zero Swedish crowns” 



<span class="creditcard">1234567890123456</span>

Should be displayed as 1234 5678 9012 3456 and spoken as 12 34 56 78 90 12 34 56


Example CSS


@decimal-format phone {

  grouping-separator: " ";

}

@decimal-format price {

  grouping-separator: ",";

  decimal-separator : "."

}

@decimal-format sweprice {

  grouping-separator: " ";

  decimal-separator : ","

}

@decimal-format creditcard {

  grouping-separator: " ";

}

@media all {

  td.phone {

      number-format: "## ##", "phone";

  }

}

@media screen {

  td.price {

      number-format: "###,##0.00", "price";

      /* price is actually redundant as this format would be the default */

  }

  td.price::after {

      content: " USD";

  }

  td.sweprice {

      number-format: "### ##0,00", "sweprice";

  }

  .creditcard {

      number-format: "#### ####", "creditcard";

  }

  td.sweprice::after {

      content: " SEK";

  }

}

@media speech {

  /* 

      Grouping both unnecessary and unwanted, words like

     "billion", "million" and "thousand" should be spelled out

     Those words should only be spelled out by a screen reader when

     grouping is not specified.

  */ 

  td.price {

      number-format: "0.00", "price";

  }

  td.sweprice {

      number-format: "0,00", "sweprice";

  }

  td.price::after {

      content: " US dollars";

  }

  td.sweprice::after {

      content: " Swedish crowns";

  }

  .creditcard {

      /* Speak numbers in pairs, no nead to hear the word "thousand" */

      number-format: "## ## ## ##", "creditcard";

  }

}


From:http://wiki.csswg.org/ideas/content-formatting
郭大侠_ 2010-12-10
  • 打赏
  • 举报
 回复
M4A1007的简短，我自己也写了一个
function getval(v)

    {

        if (v.length < 4) return v;

        if (v.indexOf('.') >= 0 && v.length < 6) return v;

        var a=v.split(".");

        var p=v;

        if (a.length > 1) p = a[0];

        var ys = p.length % 3;

        var l = Math.floor(p.length / 3);

        var arr = new Array();

        if (ys !=0) arr.push(p.substring(0,ys));

        for (var i = 0; i < l; i++)

        { 

            arr.push(p.substring(ys+i*3,ys+(i+1)*3));

        }

        var f = a.length > 1 ? ("." + a[1]) : "";

        return arr.join(',') + f;

    }


思路都没问题，可惜的是我用一个500行，10列的数据表测试，也就是执行5000次，在ie8中要8秒左右，在firefox3.6只需要0.5秒，同样是浏览器，差距咋就那么大呢，看来我用js实现的计划要泡汤了，谢谢各位的参与！！
Microsoft怎么搞的！！
bennman 2010-12-10
  • 打赏
  • 举报
 回复
等待LZ的‘速度测试’反馈，up~~~~~~
86y 2010-12-10
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 m4a1007 的回复:]
function formatNumber(num){
if(!/^(\+|-)?(\d+)(\.\d+)?$/.test(num)){return num;}
var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
var re = new RegExp().compile("(\\d)(\\d{3})(,|$)");
……
[/Quote]
这个方法好。。


<html>

<body>

<table border="1" cellspacing="5" id="sp">

<tr><td>12345436267.89</td><td>3402.89</td><td>3402</td></tr></table>

<script>

 function formatNumber(num){   

  if(!/^(\+|-)?(\d+)(\.\d+)?$/.test(num)){return num;}   

  var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;   

  var re = new RegExp().compile("(\\d)(\\d{3})(,|$)");   

  while(re.test(b)) b = b.replace(re,"$1,$2$3");   

  return a +""+ b +""+ c;   

  } 

 function spl(){

  var tdvalue=document.getElementById('sp').getElementsByTagName('td');

  var std="";

  var rstr="";

  for(j=0;j<tdvalue.length;j++)

  { std="";

   std=tdvalue[j];

   rstr=formatNumber(std.innerHTML); 

   std.innerHTML=rstr

  }

 }

 spl();

</script>

</body>

</html>
M4A1007 2010-12-10
  • 打赏
  • 举报
 回复
function formatNumber(num){
if(!/^(\+|-)?(\d+)(\.\d+)?$/.test(num)){return num;}
var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
var re = new RegExp().compile("(\\d)(\\d{3})(,|$)");
while(re.test(b)) b = b.replace(re,"$1,$2$3");
return a +""+ b +""+ c;
}
wudiaoyoutianxiacs 2010-12-10
  • 打赏
  • 举报
 回复
CSS一般功能都能实现的，我没看明白你的意思，能解释解释吗？
86y 2010-12-10
  • 打赏
  • 举报
 回复 


<html>

<body>

<table border="1" cellspacing="5" id="sp">

<tr><td>12345436267.89</td><td>3402.89</td><td>3402</td></tr></table>

<script>

	function right(mainStr,lngLen) {

		// alert(mainStr.length)

		if (mainStr.length-lngLen>=0 && mainStr.length>=0 && mainStr.length-lngLen<=mainStr.length) {

		return mainStr.substring(mainStr.length-lngLen,mainStr.length)}

		else{return null}

	} 

	function left(mainStr,lngLen) {

		if (lngLen>0) {return mainStr.substring(0,lngLen)}

		else{return null}

	} 

	function len(s) { 

		var l = 0; 

		var a = s.split(""); 

		for (var i=0;i<a.length;i++) { 

			if (a[i].charCodeAt(0)<299) { 

				l++; 

			} else { 

				l+=2; 

			} 

		} 

		return l; 

	}

	function spl(){

		var tdvalue=document.getElementById('sp').getElementsByTagName('td');

		var std="";

		for(j=0;j<tdvalue.length;j++)

		{	std="";

			std=tdvalue[j];

			changemoeny(std,j);

		}

	}

	function changemoeny(strs,values){

		var getvaule=strs.innerHTML;

		var str=new Array();

		str=getvaule.split(".");

		if(str.length>1)

		var last=str[1];

		var first=str[0];

		var is=len(first)/3;

		var is2=parseInt(len(first)/3);

		var let=first;

		var les="";

		var lmt="";

		var prints="";

		if(is>is2)

		{

			is=is2+1;

		}

		for(i=0;i<is;i++)

		{

			lmt=left(let,len(let)-3);

			if(len(let)>3)

				let=right(let,3);

			else

				let=left(let,len(let));

			if(i<is-1)	

				prints=","+let+prints;

			else

				prints=let+prints;

			let=lmt;

		}

		if(str.length>1)

			strs.innerHTML=prints+"."+last;

		else

			strs.innerHTML=prints;

	}

	spl();

	

</script>

</body>

</html>
郭大侠_ 2010-12-10
  • 打赏
  • 举报
 回复
谢谢，功能没错，但效率还不行，我试了一个500行，10列的数据表得8秒钟才能执行完毕，
继续等！！
86y 2010-12-10
  • 打赏
  • 举报
 回复
还有。。把innerText改成innerHTML为了兼容FF
86y 2010-12-10
  • 打赏
  • 举报
 回复
如果你要显示的话把下面的
alert(first+"转换为:"+prints+"."+last);
改成
tdvalue[0].innerText=prints+"."+last;
86y 2010-12-10
  • 打赏
  • 举报
 回复
这个有点味道。。！不知道是不是你要的效果


<html>

<body>

<table id="sp"><tr><td>12345436267.89</td></tr></table>

<script>

	function right(mainStr,lngLen) {

		// alert(mainStr.length)

		if (mainStr.length-lngLen>=0 && mainStr.length>=0 && mainStr.length-lngLen<=mainStr.length) {

		return mainStr.substring(mainStr.length-lngLen,mainStr.length)}

		else{return null}

	} 

	function left(mainStr,lngLen) {

		if (lngLen>0) {return mainStr.substring(0,lngLen)}

		else{return null}

	} 

	function len(s) { 

		var l = 0; 

		var a = s.split(""); 

		for (var i=0;i<a.length;i++) { 

			if (a[i].charCodeAt(0)<299) { 

				l++; 

			} else { 

				l+=2; 

			} 

		} 

		return l; 

	}

	function spl(){

		var tdvalue=document.getElementById('sp').getElementsByTagName('td');

		//alert(tdvalue.length);		

		//alert(tdvalue[0].innerText);

		var std=tdvalue[0].innerText;

		var str=new Array();

		str=std.split(".");

		var last=str[1];

		var first=str[0];

		var splist=new Array();

		//alert(first);

		var is=len(first)/3;

		var is2=parseInt(len(first)/3);

		var let=first;

		var les="";

		var lmt="";

		var prints="";

		//alert(is);

		if(is>is2)

		{

			is=is2+1;

		}

		for(i=0;i<is;i++)

		{

			lmt=left(let,len(let)-3);

			//alert(len(lmt));

			if(len(let)>3)

				let=right(let,3);

			else

				let=left(let,len(let));

			if(i<is-1)	

				prints=","+let+prints;

			else

				prints=let+prints;

				

			let=lmt;

		}

		alert(first+"转换为:"+prints+"."+last);

	}

	spl();

	

</script>

</body>

</html>
使用 HTML、CSS 和 JS 的简单倒数计时器
JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。 在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。 正如您在上图中所看到的，我在这
HTML+CSS+JS总结
HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 二.HTML标签 标签的概念 一个html文件是由标签和元素组成的html的标签还有很多包括input,from等等html标签对照表CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。1:继承性:父元素的样
html,css,js重要点
目录垂直居中的实现css去除浮动行内元素、块级元素、空元素h5十大新特性CSS选择器类型选择器优先级伪类伪元素call()和apply()的区别 垂直居中的实现 1、table-cell方法 ​ Html结构： <div class="box"> <span>垂直居中</span> </div> css: .box{ display: table-cell; vertical-align: middle; text-a
HTML,CSS,JS学习总结
HTML,CSS和JS的个人学习总结笔记
HTML、CSS、JavaScript、jQuery
1 HTML、CSS HTML: 用于开发网页的一门技术 CSS: 用于修饰、渲染网页的一门技术 HTML+CSS可以开发一个非常美观、非常漂亮的网页 开发网页 盖房子 HTML标签搭建网页的结构 砖块(搭建房子的结构) CSS属性 石灰、油漆等涂料 1.1. HTML概述 1.1.1. HTML是什么 HTML(Hyper Text Markup Language): 超文本标记语言 超文本: 超级文本、超过文本（其中可以包含除了文本以 外的其他数据，例如图片、音频、视频等各种格式） 标记：也叫标签、元素
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章