一些前端常用知识点的总结

一.文本长度的控制

 1.页面中样式的控制

可以使用文本溢出的css属性:text-overflow,ellipsis显示省略号来代表被修剪的文本内容,string使用给定的字符串来代表被修剪的文本.

white-space 属性设置如何处理元素内的空白,nowrap不进行换行的处理;

实例:float:left;width:140px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;

  2.使用标签

先在jsp页面声明:

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

然后再需要控制的文本中${fn:substring(字符串,长度1, 长度2)}

• 输入框内容的限制

'S 控制文本框只能输入数字
<input οnkeyup="value=value.replace(/[^0-9]/g,'')" οnpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')">

JS 控制文本框只能输入数字、小数点
<input οnkeyup="value=value.replace(/[^\0-9\.]/g,'')" οnpaste="value=value.replace(/[^\0-9\.]/g,'')" oncontextmenu = "value=value.replace(/[^\0-9\.]/g,'')">

JS 控制文本框只能输入英文
<input οnkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" οnpaste="value=value.replace(/[^\a-\z\A-\Z]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z]/g,'')">

JS 控制文本框只能输入英文、数字
<input οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" οnpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">

JS 控制文本框只能输入中文
<input οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" οnpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

JS 控制文本框只能输入中文、英文、数字
<input οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" οnpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">

JS 控制文本框只能输入中文、英文、数字、空格
<input οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" οnpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">

JS 控制文本框只能输入中文、英文、数字、小数点
<input οnkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" οnpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">

初始加载js方法

1. <script type="text/javascript">//init method one 

$(document).ready(function(){ 
trace("初始化方法进入"); 
}); 
function trace(obj){ 
console.log(obj); } </script> <script type="text/javascript"> 
//init method one 
$(function(){ 
trace("初始化方法进入二"); 
}); 
function trace(obj){ 
console.log(obj); 
} 
</script> 

 

js判断时间

var time_range = function (beginTime, endTime) {

  var strb = beginTime.split (":");

  if (strb.length != 2) {

    return false;

  }

 

  var stre = endTime.split (":");

  if (stre.length != 2) {

    return false;

  }

 

  var b = new Date ();

  var e = new Date ();

  var n = new Date ();

 

  b.setHours (strb[0]);

  b.setMinutes (strb[1]);

  e.setHours (stre[0]);

  e.setMinutes (stre[1]);

 

  if (n.getTime () - b.getTime () > 0 && n.getTime () - e.getTime () < 0) {

    return true;

  } else {

    alert ("当前时间是：" + n.getHours () + ":" + n.getMinutes () + "，不在该时间范围内！");

    return false;

  }

}

time_range ("21:30", "23:30");

2.var time_range = function (beginTime, endTime, nowTime) {

  var strb = beginTime.split (":");

  if (strb.length != 2) {

    return false;

  }

 

  var stre = endTime.split (":");

  if (stre.length != 2) {

    return false;

  }

 

  var strn = nowTime.split (":");

  if (stre.length != 2) {

    return false;

  }

  var b = new Date ();

  var e = new Date ();

  var n = new Date ();

 

  b.setHours (strb[0]);

  b.setMinutes (strb[1]);

  e.setHours (stre[0]);

  e.setMinutes (stre[1]);

  n.setHours (strn[0]);

  n.setMinutes (strn[1]);

 

  if (n.getTime () - b.getTime () > 0 && n.getTime () - e.getTime () < 0) {

    return true;

  } else {

    alert ("当前时间是：" + n.getHours () + ":" + n.getMinutes () + "，不在该时间范围内！");

    return false;

  }

}

time_range ("21:30", "23:30", "3:22");