javascript常用小案例
常用javascript小案例
样式调节
//注: 这个可以控制td中的字段成行显示
#modelInfos td,th { white-space: nowrap; }
//文本输入框随着内容尺寸往下变大,在input框中加入这两个属性,然后就可以控制文本输入框的大小尺寸随着内容而变
onpropertychange="this.style.height=this.scrollHeight + 'px'"
oninput="this.style.height=this.scrollHeight + 'px'"
点击radio 选择一整行(这种写法不太靠谱，可以试试)
style="cursor: hand"
bgcolor="<%=(obj.getState() == 0 ? trColor : obj.getState() == 1 ? '#FFCC33' : '#FF8040')%>" onclick="selectRow(<%=i%>,this);"
// 注: 另一种写法 双击选中一行[单击不可以
$(function(){
var screenSize = window.screen.width-200;
var div1 = document.getElementById('pool');
div1.style.width = screenSize;
$('tr').dblclick(function(){
$td = $(this).find("td:eq(0)").find("input[type=radio]").attr("checked", true);
var varId = $(this).attr("id");
if($(this).attr("id").length>3){
var str = varId.substr(0,3);
if(str=='row'){
startDealTask();
}
}
return false;
});
})
当前条件所在的行的颜色为红色
$("tr",$("#gxzItems")).each(function(){
var itemFlag=$("input[name='flagTY']",$(this)).val();
if(itemFlag=='0'){
$("td", $(this)).css({"color":"red"});
}
});
格式化金额
<fmt:formatNumber pattern="#,##0.00#" value="${pto1.map.tradeAmt}" />
写弹窗(标题div中需要加入的样式)
style="display: none; z-index: 9997; border-width: 1px; border-style: solid; border-color: navy; position: absolute; left: 250px; top: 103px; background-color: #ffffff; width: 350px; height: 115px; filter: progid :DXImageTransform.Microsoft.Shadow(color =#999999, direction =135, strength = 5);"
支持拖拽
oTitle.onmousedown=function(event){
oTitle.style.cursor = "move";
var event = event || window.event;
var disX=event.clientX-oDrag.offsetLeft;
var disY=event.clientY-oDrag.offsetTop;
// 鼠标移动，窗口随之移动, onmousemove在有物体移动是才执行alert事件；
document.onmousemove=function(event){
var event = event || window.event;
maxW=document.documentElement.clientWidth-oDrag.offsetWidth;
maxH=document.documentElement.clientHeight-oDrag.offsetHeight;
posX=event.clientX-disX;
posY=event.clientY-disY;
if(posX<0){
posX=0;
}else if(posX>maxW){
posX=maxW;
}
if(posY<0){
posY=0;
}else if(posY>maxH){
posY=maxH;
}
oDrag.style.left=posX+'px';
oDrag.style.top=posY+'px';
}
//鼠标松开，窗口将不再移动 , document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
测试用户点击关闭浏览器,事件回到数据库中执行一条语句
<script type="text/javascript"
src="提交点击提交form表单值, 则可以将结果显示在当前页面的iframe内联框中, 实现页面局部刷新
<form id="organManageForm" name="organManageForm" style="width: 30%"
action="<%=com.northking.ssoClient.bussiness.impl.Parameters.pathPrefix%>servlet/SmOrganListServlet" method="post" target="frmdetail">
</form>
</div>
</td>
<td width="50%" style="vertical-align: top">
<div id="floater" style="position:absolute; height=300">
<iframe name="frmdetail" class="" frameborder=0 style="width: 100%;height:100%;background-color: #eeeeee;"></iframe>
</div>
图片响应流到页面展示, filepath = "“图片路径”;
response.setContentType("image/jpeg");
ServletOutputStream out=response.getOutputStream();
try {
File file = new File(filePath);
FileImageInputStream imageinput = new FileImageInputStream(file);
int data;
while((data=imageinput.read())!=-1)
{
out.write(data);
}
imageinput.close();
} catch (Exception e) {
logger.error(e);
}finally{
out.flush();
out.close();
}
使用js写COOKIE
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
<body onLoad="checkCookie()">
常知小技巧
-
对于任何类型的值采用双not ,可以得到其真正的boolean类型值 . 写法: if(!!cont){} [注: 有值就表示true , 没值或为false或为0就返回false]
-
null 与 undefined 是相等的 if(null == undefined) { 返回true } , [注: 非全等号由感叹号加两个等号（!==）表示，只有在无需类型转换运算数不相等的情况下，才返回 true。]
-
start : i = 5; 可以以这样的方式给语句加个标签, 方面下面调用.
-
js中文转码: encodeURI(encodeURI( //需要转码的内容 ))
-
要想实现点击下拉框, 选中内容在文本框中显示, 并且支持多选 , 请百度搜索 multiple-select
-
使用这种函数 var formData=$(“form”).serialize(); ,可以获取form表单中的参数和值, 以 name=2&pass=3的 形式连接到一块
arguments[0] .length 这些可以写在函数内部, arguments是系统命名的获取传进函数的变量的值的数组集合 , 可以不用声明,直接在函数内部使用,而只需要调用是传参数就行
<a href="javascript:void(0);" onclick="sayHi('',null,undefined)">点击这里,调用函数</a>
</body>
<script tyee="text/javascript">
function sayHi() {
var num=arguments.length;
if (num != 0) {//调用传参函数
if(num==1){//调用传一个参函数
alert("1个参数");
}else if(num==2){//调用传2个参函数
alert("2个参数");
}else if(num==3){//调用传3个参函数
alert("3个参数");
}else{//调用传其他参函数
alert("3个以上参数");
}
}else {//调用无参函数
alert("你没有往该函数里面传入任何值!!!");
}
}
// 注： 可以使用函数名.length, 来获取该函数传入参数的个数.
</script>
在函数中使用闭包 , 内部函数不能传参, 但可以使用外部的一切变量.
var iBaseNum = 10;
function addNum(iNum1, iNum2) {
function doAdd() {
return iNum1 + iNum2 + iBaseNum;
}
return doAdd();
}
图像操作. (详细请看附加图像文件) ( )
// 图像 旋转 的函数
var irotation = 1;
function rotation()
{
document.all.IFramePic1.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(rotation="+ irotation +")";
irotation++;
if(irotation>4)
{
irotation=1;
}
}
使用js获取上月最后一天日期
<script type="text/javascript">
$(function(){
var endAccountDate = document.getElementById("endAccountDate").value;
if(endAccountDate==null||endAccountDate==''){
var nowdays = new Date();
var year = nowdays.getFullYear();
var month = nowdays.getMonth();
if(month==0)
{
month=12;
year=year-1;
}
if (month < 10) {
month = "0" + month;
}
var firstDay = year + "-" + month + "-" + "01";//上个月的第一天
var myDate = new Date(year, month, 0);
var lastDay = year + "-" + month + "-" + myDate.getDate();//上个月的最后一天
}
});
function Appendzero(obj) {
if(obj<10) return "0" +""+ obj;
else return obj;
}
function resolveDayDate(begin_Date,end_Date){
var beginDate = new Date(begin_Date.substring(0,4),begin_Date.substring(4,6)-1,begin_Date.substring(6,8));
var endDate = new Date(end_Date.substring(0,4),end_Date.substring(4,6)-1,end_Date.substring(6,8));
beginDate.setDate(beginDate.getDate()+31);
return beginDate.getTime() >= endDate.getTime();
}
function resolveMonthDate(begin_Date,end_Date){
var beginDate = new Date(begin_Date.substring(0,4),begin_Date.substring(4,6)-1,begin_Date.substring(6,8));
var endDate = new Date(end_Date.substring(0,4),end_Date.substring(4,6)-1,end_Date.substring(6,8));
beginDate.setMonth(beginDate.getMonth()+12);
return beginDate.getTime() >= endDate.getTime();
}
</script>
获取当前日期上月最后一天
$(function(){
var fl=$("#fl").val();
if(fl=='0'){
var endDate=$("input[name='endAccountDate']").val();
var ss=ff(endDate);
$("input[name='startAccountDate']").val(ss);
}
});
function ff(endDate){
var month = endDate.substr(4,2);
var year = endDate.substr(0,4);
if(month=='01'){
month = 12;
year -=1;
}else{
month -=1;
}
var day = new Date(year, month, 0).getDate();
return year+""+Appendzero(month)+""+Appendzero(day);
}
function Appendzero(obj) {
if(obj<10) return "0" +""+ obj;
else return obj;
}
内容相对于滚动条位置不动
$(function(){
var screenSize = window.screen.width-200;
var div1 = document.getElementById('pool');
div1.style.width = screenSize;
});
<div id="pool" style="overflow: auto;">
//要优化的内容
</div>
悬浮动态走马灯
<marquee style="WIDTH: 100%; HEIGHT: 400px" scrollamount="3"
direction="up"> <span style="color: red; font-size: 20px;"><strong>页面维护中..</strong></span>
</marquee>
下拉框多选[select] , 在下拉框中添加 multiple=“multiple” 属性
// js代码
function subbmit(){
var all = "";
$("select[name='orgId'] option").each(function() {
all += $(this).attr("value")+" ";
});
var sel = $("select[name='orgId']").val();
alert("多选列表所有的值是: " + all + "其中被选中的是"+sel+"。);
}
使用javascript操作excel
<!DOCTYPE HTML>
<html>
<head>
<title>
New Document
</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
var array1 = [];
var arr;
function WriteExcel() {
var tempStr = "";
//得到文件路径的值
var filePath = document.getElementById("upfile").value;
//创建操作EXCEL应用程序的实例
try {
var oXL = new ActiveXObject("Excel.application");
} catch(e) {
alert("请启用ActiveX控件设置！");
return;
}
//打开指定路径的excel文件
var oWB = oXL.Workbooks.open(filePath);
//操作第一个sheet(从一开始，而非零)
oWB.worksheets(1).select();
var oSheet = oWB.ActiveSheet;
//使用的行数
var rows = oSheet.usedrange.rows.count;
try {
for (var i = 1; i <= rows; i++) {
var obj = new Object();
obj.seq = oSheet.Cells(i,1).value;
obj.jgmc= oSheet.Cells(i,2).value;
obj.wdmc= oSheet.Cells(i,3).value;
obj.wddm= oSheet.Cells(i,4).value;
obj.ywpz= oSheet.Cells(i,5).value;
obj.hdmx= oSheet.Cells(i,6).value;
obj.cccy= oSheet.Cells(i,7).value;
obj.cccyfb= oSheet.Cells(i,8).value;
obj.sjkm= oSheet.Cells(i,9).value;
obj.cclx= oSheet.Cells(i,10).value;
obj.cccjrq= oSheet.Cells(i,11).value;
obj.ywrq= oSheet.Cells(i,12).value;
obj.ccy= oSheet.Cells(i,13).value;
obj.sjje= oSheet.Cells(i,14).value;
array1.push(obj);
obj=null;
}
arr = JSON.stringify(array1);
} catch(e) {
document.getElementById("txtArea").value = "出错了";
}
document.getElementById("txtArea").value = arr;
//退出操作excel的实例对象
oXL.Application.Quit();
//手动调用垃圾收集器
CollectGarbage();
}
function ReadExcel(){
alert(array1[1].jgmc);
}
</script>
</head>
<body>
<input type="file" id="upfile" />
<input type="button" onclick="WriteExcel();" value="write">
<input type="button" onclick="ReadExcel();" value="read">
<br>
<textarea id="txtArea" cols=200 rows=400>
</textarea>
</body>
</html>
未完待续， 后续补充中。。。。。