本文目录一览：
- 1、谁帮我写一段JS代码，3个人名每天显示一个！
- 2、用js写一个页面上有3个文本框,都输入数字,前两个表示最大值max和最小值min,第三个
- 3、js的实例化过程究竟是怎么样的
- 4、JS基于面向对象实现的拖拽库实例
- 5、javascript实例化对象
- 6、js小实例-改变文字大小
谁帮我写一段JS代码，3个人名每天显示一个！
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”
html xmlns=””
head
meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /
title无标题文档/title
script
// 字符串转成日期类型 格式 YYYY-MM-dd
function StringToDate(DateStr){
var converted = Date.parse(DateStr);
var myDate = new Date(converted);
if (isNaN(myDate))
{
var arys= DateStr.split(‘-‘);
myDate = new Date(arys[0],–arys[1],arys[2]);
}
return myDate;
}
function test(){
var sj =”2012-2-18″; //开始日期
var kssj =StringToDate(sj);
var nowDate = new Date();//现在日期
var i=DateDiff(kssj,nowDate)+1;//相差的天数
var j=(i%3); //通过余数来判断该输出那个人名
var s = document.getElementById(“div1”);
if(kssjnowDate || kssj==nowDate){
if(j==1){//第一
s.innerHTML =”张三 第一:相差”+i;
}else if(j==2){//第二
s.innerHTML =”李四 第二:相差”+i;
}else if(j==0){//第三
s.innerHTML =”王五 第三:相差”+i;
}else{//有误
s.innerHTML = ” 有误! “;
}
}else{
s.innerHTML = ” 开始日期不能大于现在日期 !”;
}
}
//计算天数差的函数
function DateDiff(sDate,nowDate){
var iDays = parseInt(Math.abs(sDate – nowDate) / 1000 / 60 / 60 /24); //把相差的毫秒数转换为天数
return iDays
}
/script
/head
body onload=”test()”
div id=”div1″/div
/body
/html
用js写一个页面上有3个文本框,都输入数字,前两个表示最大值max和最小值min,第三个
实现方法是:给第二个文本框绑定失焦事件,获取第一个和第二个输入框中输入的值,并将其转化成数字类型,相加后将结果插入到第三个文本框中:
input type=”text” id=”one” input type=”text” id=”two” input type=”text” id=”three”script type=”text/javascript” src=”jquery-1.8.3.min.js”/script script type=”text/javascript” $(‘#two’).blur(function(){ var one = Number($(‘#one’).val()); var two = Number($(‘#two’).val()); var num = one+two; $(‘#three’).html(num); })/script//一定要转化才能进行运算,否则会成为字符串连接运算.
js的实例化过程究竟是怎么样的
①首先需要在内存中创建一个空对象，{}这种语法被称为字面量表示法，通过这种语法，浏览器在内存中创建一个对象。
②然后将等价于new关键字（在功能上等价）的函数ObjectFactory第一个参数作为实例对象的构造函数，简历索引关系。
③通过__proto__建立实例对象与原型对象的联系。
④将构造函数的属性方法创建一份副本并挂载到实例对象上，最后返回实例化完成的对象。
JS基于面向对象实现的拖拽库实例
本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下：
这是一个面向对象的JS拖拽库，可设置水平锁定、垂直锁定、锁定位置、锁定范围等，设定这些范围后，只能在设定的模式下拖动，我觉得这是个挺不错的拖拽实例。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
“-//W3C//DTD
XHTML
1.0
Transitional//EN”
“”
html
xmlns=””
head
meta
http-equiv=”Content-Type”
content=”text/html;
charset=utf-8″
/
title拖拽库/title
style
type=”text/css”
div,h2,p{margin:0;padding:0;}
body{font:14px/1.5
arial;}
#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px
solid
#f60;}
#box
.title{height:25px;background:#f60;}
#tool{margin-bottom:10px;}
/style
script
type=”text/javascript”
function
Drag()
{
//初始化
this.initialize.apply(this,
arguments)
}
Drag.prototype
=
{
//初始化
initialize
:
function
(drag,
options)
{
this.drag
=
this.$(drag);
this._x
=
this._y
=
0;
this._moveDrag
=
this.bind(this,
this.moveDrag);
this._stopDrag
=
this.bind(this,
this.stopDrag);
this.setOptions(options);
this.handle
=
this.$(this.options.handle);
this.maxContainer
=
this.$(this.options.maxContainer);
this.maxTop
=
Math.max(this.maxContainer.clientHeight,
this.maxContainer.scrollHeight)
–
this.drag.offsetHeight;
this.maxLeft
=
Math.max(this.maxContainer.clientWidth,
this.maxContainer.scrollWidth)
–
this.drag.offsetWidth;
this.limit
=
this.options.limit;
this.lockX
=
this.options.lockX;
this.lockY
=
this.options.lockY;
this.lock
=
this.options.lock;
this.onStart
=
this.options.onStart;
this.onMove
=
this.options.onMove;
this.onStop
=
this.options.onStop;
this.handle.style.cursor
=
“move”;
this.changeLayout();
this.addHandler(this.handle,
“mousedown”,
this.bind(this,
this.startDrag))
},
changeLayout
:
function
()
{
this.drag.style.top
=
this.drag.offsetTop
+
“px”;
this.drag.style.left
=
this.drag.offsetLeft
+
“px”;
this.drag.style.position
=
“absolute”;
this.drag.style.margin
=
“0”
},
startDrag
:
function
(event)
{
var
event
=
event
||
window.event;
this._x
=
event.clientX
–
this.drag.offsetLeft;
this._y
=
event.clientY
–
this.drag.offsetTop;
this.addHandler(document,
“mousemove”,
this._moveDrag);
this.addHandler(document,
“mouseup”,
this._stopDrag);
event.preventDefault
event.preventDefault();
this.handle.setCapture
this.handle.setCapture();
this.onStart()
},
moveDrag
:
function
(event)
{
var
event
=
event
||
window.event;
var
iTop
=
event.clientY
–
this._y;
var
iLeft
=
event.clientX
–
this._x;
if
(this.lock)
return;
this.limit
(iTop
(iTop
=
0),
iLeft
(iLeft
=
0),
iTop
this.maxTop
(iTop
=
this.maxTop),
iLeft
this.maxLeft
(iLeft
=
this.maxLeft));
this.lockY
||
(this.drag.style.top
=
iTop
+
“px”);
this.lockX
||
(this.drag.style.left
=
iLeft
+
“px”);
event.preventDefault
event.preventDefault();
this.onMove()
},
stopDrag
:
function
()
{
this.removeHandler(document,
“mousemove”,
this._moveDrag);
this.removeHandler(document,
“mouseup”,
this._stopDrag);
this.handle.releaseCapture
this.handle.releaseCapture();
this.onStop()
},
//参数设置
setOptions
:
function
(options)
{
this.options
=
{
handle:
this.drag,
//事件对象
limit:
true,
//锁定范围
lock:
false,
//锁定位置
lockX:
false,
//锁定水平位置
lockY:
false,
//锁定垂直位置
maxContainer:
document.documentElement
||
document.body,
//指定限制容器
onStart:
function
()
{},
//开始时回调函数
onMove:
function
()
{},
//拖拽时回调函数
onStop:
function
()
{}
//停止时回调函数
};
for
(var
p
in
options)
this.options[p]
=
options[p]
},
//获取id
$
:
function
(id)
{
return
typeof
id
===
“string”
?
document.getElementById(id)
:
id
},
//添加绑定事件
addHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.addEventListener
?
oElement.addEventListener(sEventType,
fnHandler,
false)
:
oElement.attachEvent(“on”
+
sEventType,
fnHandler)
},
//删除绑定事件
removeHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.removeEventListener
?
oElement.removeEventListener(sEventType,
fnHandler,
false)
:
oElement.detachEvent(“on”
+
sEventType,
fnHandler)
},
//绑定事件到对象
bind
:
function
(object,
fnHandler)
{
return
function
()
{
return
fnHandler.apply(object,
arguments)
}
}
};
//应用
window.onload
=
function
()
{
var
oBox
=
document.getElementById(“box”);
var
oTitle
=
oBox.getElementsByTagName(“h2”)[0];
var
oSpan
=
document.getElementsByTagName(“span”)[0];
var
oDrag
=
new
Drag(oBox,
{handle:oTitle,
limit:false});
var
aInput
=
document.getElementsByTagName(“input”);
//锁定范围接口
aInput[0].onclick
=
function
()
{
oDrag.limit
=
!oDrag.limit;
this.value
=
oDrag.limit
?
“取消锁定范围”
:
“锁定范围”
};
//水平锁定接口
aInput[1].onclick
=
function
()
{
oDrag.lockX
=
!oDrag.lockX;
this.value
=
oDrag.lockX
?
“取消水平锁定”
:
“水平锁定”
};
//垂直锁定接口
aInput[2].onclick
=
function
()
{
oDrag.lockY
=
!oDrag.lockY;
this.value
=
oDrag.lockY
?
“取消垂直锁定”
:
“垂直锁定”
};
//锁定位置接口
aInput[3].onclick
=
function
()
{
oDrag.lock
=
!oDrag.lock;
this.value
=
oDrag.lock
?
“取消锁定位置”
:
“锁定位置”
};
//开始拖拽时方法
oDrag.onStart
=
function
()
{
oSpan.innerHTML
=
“开始拖拽”
};
//开始拖拽时方法
oDrag.onMove
=
function
()
{
oSpan.innerHTML
=
“left:”
+
this.drag.offsetLeft
+
“,
top:”
+
this.drag.offsetTop
};
//开始拖拽时方法
oDrag.onStop
=
function
()
{
oSpan.innerHTML
=
“结束拖拽”
};
};
/script
/head
body
div
id=”tool”
input
type=”button”
value=”锁定范围”
/
input
type=”button”
value=”水平锁定”
/
input
type=”button”
value=”垂直锁定”
/
input
type=”button”
value=”锁定位置”
/
/div
p拖放状态：span未开始/span/p
div
id=”box”
h2
class=”title”/h2
/div
/body
/html
希望本文所述对大家的JavaScript程序设计有所帮助。
javascript实例化对象
这段代码很简单，你应该是不明白两个运行结果不一样的原因，我只说明运行结果不同的原因。
首先你要明白this关键字是与运行时环境有关，和声明时环境无关。
new test(1).fun2();这个fun2调用fun1时这句alert(tihs.m_num);这个this的运行环境是fun2，所以它代表fun2，只会弹出undefined，
new test(1).fun3();由于fun3的指针是指向fun1的，而fun1是test的一个属性，这句alert(tihs.m_num);这个this的运行环境是test，所以它代表test，只会弹出5。
js小实例-改变文字大小
6.最后就完成了改变文字的大小的功能，这个实例很简单把，只用到js中获取对象，然后改变对象的css样式既可以了。同理，当然你也可以改变文字的字体，背景颜色，字体颜色。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/194522.html
微信扫一扫 
支付宝扫一扫 