本文目錄一覽：
js控制頁面滾動（實例）
目標描述：多個圖片排列下來，按右邊的小按鈕，抵達相應位置，鼠標滑動，抵達下一圖，或者上一圖
知識點：onmousewheel，addEventListener，scrollTo，setTimeout
過程：
1.body 寬，高釘死，100vw，100vh，overflow：hidden 使得不出現滾動條，不然不好看
2.圖片放進去，排起來，（注意：默認空隙的處理，可以使用flex布局，空隙就不見了）
3.製作相對於視窗的按鈕，幾張圖片就幾個按鈕，（position: fixed;計算一下高度，可以利用calc計算top使得上下居中）
4.美化一下，css寫寫
5.先寫簡單的按鈕事件
6.寫監聽滑動事件(onmousewheel在火狐無效，DOMMouseScroll只在火狐有效)
react在componentDidMount的時候監聽
7.補充寫一下火狐的
9.測試檢查一下。
完成啦，啦啦啦～
我的截圖：
缺點：這裡我是一直對頁面進行監聽，導致滑動過快對時候動畫效果開始執行對時間延後。體現為滑動對輕，整個就流暢一點。
ps：寫這種帶計算帶頁面，我覺得是考驗思維的，你可以對這裡的知識點不熟練，但是你必須得能理解每一步的加加減減。
JS隱藏號碼中間4位代碼實例
本文實例為大家分享了JS隱藏號碼中間4位的具體代碼，供大家參考，具體內容如下
function
resetPhone(phone)
{
var
str
=
String(phone)
var
len
=
str.length;
var
prev,next;
if
(len
=
7)
{
prev
=
str.slice(-len,-7)
next
=
str.slice(-3)
str
=
prev+”****”+next
}
else
if
(len
7
len
=
6)
{
prev
=
str.slice(-len,-4)
next
=
str.slice(-2)
str
=
prev
+
“**”
+
next
}
console.log(str)
return
str
}
上面可以正常使用，正則更加方便，但是如果中間連續重複數字有點小問題（如下面的正則方式）。
function
resetPhone(phone)
{
var
str
=
String(phone)
var
len
=
str.length;
if
(len
=
7)
{
var
reg
=
str.slice(-7,
-3)
return
str.replace(reg,
“****”)
}
else
if
(len
7
len
=
6)
{
//1234567
var
reg
=
str.slice(-4,
-2)
return
str.replace(reg,
“**”)
}
}
以上所述是小編給大家介紹的JS隱藏號碼中間4位詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:JS中實現隱藏部分姓名或者電話號碼的代碼JS中input表單隱藏域及其使用方法JS實現“隱藏與顯示”功能(多種方法)javascript點擊按鈕實現隱藏顯示切換效果AngularJS實現元素顯示和隱藏的幾個案例JS實現鼠標點擊展開或隱藏表格行的方法jquery和js實現對div的隱藏和顯示方法js設置控件的隱藏與顯示的兩種方法js判斷元素是否隱藏的方法javascript獲取隱藏元素(display:none)的高度和寬度的方法
如何學Web前端
網頁開發工具
學習web前端開發,網頁開發工具有FrontPage,會用 Word 的人很容易學會FrontPage。還有一個常用的是Dreamweaver。這兩種都是使用最多的HTML網頁製作工具,我使用的是Dreamweaver cs6,因為這套軟件提供了一套直觀的可視界面,融合了html5一些新的內容。包括網格布局什麼的。
學習內容
HTML、CSS和JavaScript。html是內容,css是表現,javascript是行為。前端開發的門檻其實非常低,與服務器端語言先慢後快的學習曲線相比,前端開發的學習曲線是先快後慢。所以,對於從事IT工作的人來說,前端開發是個不錯的初入點。也正因為如此,前端開發的領域有很多自學成“才”的同行。html是最基礎的,現在流行的是html5設計,先學會網頁布局。css是用來美化html頁面的為頁面提供布局和格式。最後再學javascript。如果你把每天看電影、看電視劇的時間用來學習,我想一個星期入門是沒有問題的。
基礎知識:
1. html + css。這部分建議在 上學習,邊學邊練,每章後還有小測試。之後可以模仿一些網站做些頁面。本站提供的個人博客模板都是比較簡單的單頁,可以下載下來模仿自己做一個。理解css每個元素的屬性,樣式的實現不一定只有一種寫法,多想一想還有沒有什麼需要改進的地方。
《10條HTML代碼編寫技巧》
《CSS簡明教程》
《Div+CSS 規則整理 以及注意問題》
2、JavaScript。不是所有的網頁都必須有js,但是要想實現一些超酷的功能和界面的時候,就需要涉及到js。如果沒有其他編程語言的基礎的話,學起來可能要費些力,還是建議先在 w3school上學習。之後建議馬上看《javascript語言精粹》
《JS經典實例》
3、Photoshop、flash。熟悉會一點兒就行了,沒必要全部都學得精通,當然如果你在學習的過程中,發現你ps或者flash比較感興趣的話,也可以嘗試做美工這一行。
4、html5和css3。可以先了解一下,然後再入手。畢竟IE的瀏覽器大多還不支持。
《學習Html5建站教程(一)Html5簡介》
《學習Html5建站教程(二)Html5 語法與規則》
《學習Html5建站教程(三)Html5博客頁面設計之理論》
《學習Html5建站教程(四)用HTML5做個人的網站》
5、瀏覽器兼容。懂web標準,熟練手寫 xhtml css3 並符合 符合w3c標準。代碼能兼容主流瀏覽器Firfox,Chrome、Safari、IE、Opera。雖然IE6很多都不兼容,但現在還使用的人還是有的。W3C驗證地址: 通過驗證指定URI的CSS內容,可以幫我們檢查一下有沒有錯誤。
6、熟悉一門後台編程語言 asp、php、jsp等《關於asp、php、asp.net、jsp的學習心得、介紹及優缺點比較》
web前端設計師前景
遇到很多想換行的朋友,第一句就問,這行賺錢嗎?我相信一句話,沒有付出,是沒有回報的!前面已經說過了,咱們這行門檻是很低的,所以薪資階段也不一樣。2000初入這行的現在還普遍,工作經驗2年以上,有很多代表性作品的時候,工資在4000左右;高手級別的估計在6000左右,大師級別這個階段的薪資參考:10000以上(上海北京深圳為例)網頁設計師課程一般包括:Photoshop、Fireworks、用戶界面設計實操,xhtml、css、dreamweaver、網站架構與網站策劃、flash動畫製作,域名與空間、ftp、dhtml、javascript、動態交互網站(asp、php、aja)
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程序設計有所幫助。
JS for循環計算 經典例題 ： 水仙花數
打印出所有的 “水仙花數 “，所謂 “水仙花數 “是指一個三位數，其各位數字立方和等於該數 本身。
例如：153是一個 “水仙花數 “，因為153=1的三次方＋5的三次方＋3的三次方。
首先，他是一個三位數，那麼他的取值範圍就是100~999。
那麼。這個數 個十百位 每一位的數字的取值範圍都有了。百位是1-9。十位個位都是0-9。
其次。每一位數字的立方 的和 要等於它本身。
那麼就有了1 *100 + 5 * 10 +3 = 1 * 1 * 1 + 5 * 5 * 5 + 3 * 3 * 3 = 153。
用三重for循環可以計算出每一個百位數。然後 添加 if “其各位數字立方和等於該數本身”這個條件。就計算出滿足條件的數了。
結果如下
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/298272.html
微信掃一掃 
支付寶掃一掃 