Archive for 7月 2008

« Previous Entries

点击增加输入框

24th 12月 2007, 05:46 下午

今天一个同事提出来的要点击增加输入框的效果，本来是很简单的一件事，代码

  1. <script>
  2. function addtxt(str){
  3. var l='<input type="text">';
  4. document.all(str).innerHTML+=l;
  5. }
  6. </script>
  7. <input type="button" value="增加文本框" onclick="addtxt('test');">
  8. <span id="test"></span>

但是问题出来了，这样增加出来的输入框的name值都是一样的，如果要提交后台的话就麻烦了，现在要做的就是让增加的输入框的name值不同，本来想用循环来做，但是用documen.getElementsByTagName(”input”)却得不到JS增加的文本框，怎么办呢？办法如下，把增加的值赋给另一个input的value,再把这个input隐藏掉，每点击一次这个value值就会改变一次，这样就好办多了，代码：

  1. <form name="form1">  
  2.   <div id="tb1" border=0>  
  3.         <a href="#" onclick="return addFj()">增加</a>  
  4.   </div>  
  5.   <input   type="hidden"   name="fjCnt"   value="1"   />  
  6.   </form>  
  7.   <script   language="javascript">  
  8.       function   addFj()  
  9.       {  
  10.               var   oTb   =   document.getElementById("tb1");  
  11.               var   name   =   "thefilename"+document.form1.fjCnt.value;              
  12.               document.form1.fjCnt.value=parseInt(document.form1.fjCnt.value)+1;  
  13.               oTb.innerHTML  =   "<input name='"+name+"' type='text' />"  + oTb.innerHTML;
  14.               return   false;  
  15.       }  
  16.   </script>

查看演示

分类： js笔记  |  评论

firefox下的英文强制断行

21st 12月 2007, 01:41 下午

做网页的人或多火烧都知道firefox很恶心的一个地方就是当连续一段英文字母出现的时候没有办法让他强制断行，而IE，safari等浏览器却可以，试了下firefox3还是没有改进。那有没有办法让FF里连续英文字母也强行断行呢？答案是肯定的，而且方法很多，在蓝色经典上有这样一个办法：

  1. <style type="text/css">
  2. /*<![CDATA[*/
  3. div {
  4.     width:300px;
  5.     word-wrap:break-word;
  6.     border:1px solid red;
  7.     }
  8. /*]]>*/
  9. </style>
  10. <div id="ff">aaaaaaaaaaaaaaaaaaa...</div>
  11. <script type="text/javascript">
  12. // <![CDATA[
  13. function toBreakWord(intLen){
  14. var obj=document.getElementById("ff");
  15. var strContent=obj.innerHTML; 
  16. var strTemp="";
  17. while(strContent.length>intLen){
  18. strTemp+=strContent.substr(0,intLen)+"&#10;"; 
  19. strContent=strContent.substr(intLen,strContent.length); 
  20. }
  21. strTemp+="&#10;"+strContent;
  22. obj.innerHTML=strTemp;
  23. }
  24. if(document.getElementById  &&  !document.all)  toBreakWord(37)
  25. // ]]>
  26. </script>

这段代码可以让id为ff的标签里的英文自动断行，原理是在指定位置插入空格来实现的，但是这种方法有很多弊端，第一，他只能用在唯一的地方；第二，要预先算出需要断行的位置。不是很方便，那么遇到下面这种情况他就没办法处理了。

  1. <table width="100%">
  2. <tr>
  3. <th width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaa..</th>
  4. <th width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaa..</th>
  5. <th width="30%">aaaaaaaaaaaaaaaaaaaaaaaaaaaa..</th>
  6. <th width="60%">dffffffffffffffffffffffffffffffffff...</th>
  7. </tr>
  8. </table>

可以看到这段代码里面没有任何ID，唯一能识别身份的就是标签本身了，我们将上面的代码稍作改进，再借助jquery就能实现FF下的强行断行了。

  1. <style type="text/css">
  2. th {
  3.    
  4.     word-break:break-all;
  5.     border:1px solid red;
  6.     }
  7. </style>
  8. <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
  9. <script type="text/javascript">
  10.                 $(document).ready(function (){if(document.getElementById  &&  !document.all){
  11.                 var intLen = 1;
  12.                 var tagName = document.getElementsByTagName("th");
  13.                 for(var i = 0;i < tagName.length;i ++){
  14.                     var strContent = tagName[i].innerHTML;
  15.                     var strTemp = "";
  16.                     while(strContent.length > intLen){
  17.                         strTemp += strContent.substr(0,intLen)+"&#8203;"; 
  18.                         strContent = strContent.substr(intLen,strContent.length);
  19.                         }
  20.                     strTemp += "&#8203;"  +strContent;
  21.                     tagName[i].innerHTML = strTemp;
  22.                     }
  23.                 }
  24.                 });
  25. </script>

实现原理还是一样，不过这里采用的不是在指定位置插入空格，而是采用了​，这是一个不被浏览器显示的字符但是却有空格的功效，将其插入到每个字母后面，这样相当于在每个字符后面加了个空格但是却显示不出来，就可以实现在任意位置断行了。但是在IE下却会出现莫名其妙的错误，它对​的处理和其他浏览器不一样，所以加一句if(document.getElementById && !document.all)不让IE执行这段JS，让他用CSS去断行吧。
查看演示

分类： js笔记  |  评论

修了按时间显示不同内容的效果的代码

6th 12月 2007, 07:36 下午

今天下午写的那个代码太繁琐了，刚才又试验了一下循环，暂时没发现什么问题，可控性更高了！
html代码部分没变，JS代码修改如下，效果还是一样。

  1. //预先设置要显示的内容
  2. var s1 = '<div style="color:#f00">第一个</div>';
  3. var dd = new Array(s1,"第二个","第三个","第四个","第五个");
  4.  
  5. var t1 = document.getElementById("cd");
  6.  
  7. //获取当前时间
  8. var day="";
  9. var month="";
  10. var ampm="";
  11. var ampmhour="";
  12. var myweekday="";
  13. var year="";
  14. mydate=new Date();
  15. myweekday=mydate.getDay();
  16. mymonth=mydate.getMonth()+1;
  17. myday= mydate.getDate()+"";
  18. //日期不足两位的以0补足
  19. if(myday.length <= 1){
  20.     myday = "0"+myday;
  21. }
  22. myyear= mydate.getYear();
  23. //小时不足两位的以0补足
  24. myhours = mydate.getHours()+"";
  25. if(myhours.length <= 1){
  26.     myhours = "0"+myhours;
  27. }
  28. year=(myyear > 200) ? myyear : 1900 + myyear;
  29. //当前时间
  30. var time = year+""+mymonth+""+myday+""+myhours;
  31. //按条件显示
  32. var n = dd.length;
  33. var frtime = 2007120617;//设置初始日期 格式yyyymmddhh
  34. for(i = 0;i <= n;i++)
  35. {
  36.     if(time>=frtime){
  37.         t1.innerHTML = dd[i];
  38.     }
  39.     frtime = frtime + 100;
  40. }
分类： js笔记  |  评论
« Previous Entries