本文目錄一覽：
- 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/zh-tw/n/194522.html
微信掃一掃 
支付寶掃一掃 