本文目錄一覽：
- 1、什麼是JS特效
- 2、前端開發中常用到的js特效有哪些
- 3、JS特效代碼，讓網頁打開時候最小化，6秒後最大化。追加100分
- 4、當單擊按鈕時 顯示搜索框，當再次單擊按鈕時隱藏搜索框，默認在頁面搜索框是隱藏的，求Js特效代碼
什麼是JS特效
JS特效就是網頁中實現的特殊效果或者特殊的功能的一種技術,是用網頁腳本(javascript)來編寫製作動態特殊效果。
比如圖片切換，漸變等等，它為網頁活躍了網頁的氣氛，有時候會起到一定的親切力。
JavaScript 是根據 “ECMAScript”標準制定的網頁腳本語言。這個標準由 ECMA 組織發展和維護。ECMA-262 是正式的 JavaScript 標準。
擴展資料：
能夠具有交互性，能夠包含更多活躍的元素，就有必要在網頁中嵌入其它的技術。如：Javascript、VBScript、Document Object Model（DOM，文檔對象模型）、Layers和 Cascading Style Sheets（CSS，層疊樣式表）。
JavaScript 使網頁增加互動性。JavaScript 使有規律地重複的HTML文段簡化，減少下載時間。JavaScript 能及時響應用戶的操作，對提交表單做即時的檢查，無需浪費時間交由 CGI 驗證。JavaScript 的特點是無窮無盡的，只要你有創意。
前端開發中常用到的js特效有哪些
HTML5 DOM 選擇器
// querySelector() 返回匹配到的第一個元素var item = document.querySelector(‘.item’);console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一個nodeList集合var items = document.querySelectorAll(‘.item’);console.log(items[0]);1234567
阻止默認行為
// 原生jsdocument.getElementById(‘btn’).addEventListener(‘click’, function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法 阻止默認行為
event.preventDefault();
} else{ // ie 阻止默認行為
event.returnValue = false;
}
}, false);// jQuery$(‘#btn’).on(‘click’, function (event) { event.preventDefault();
});1234567891011121314151617
阻止冒泡
// 原生jsdocument.getElementById(‘btn’).addEventListener(‘click’, function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法 阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$(‘#btn’).on(‘click’, function (event) { event.stopPropagation();
});1234567891011121314151617
鼠標滾輪事件
$(‘#content’).on(“mousewheel DOMMouseScroll”, function (event) {
// chrome ie || // firefox
var delta = (event.originalEvent.wheelDelta (event.originalEvent.wheelDelta 0 ? 1 : -1)) || (event.originalEvent.detail (event.originalEvent.detail 0 ? -1 : 1));
if (delta 0) {
// 向上滾動
console.log(‘mousewheel top’);
} else if (delta 0) { // 向下滾動
console.log(‘mousewheel bottom’);
}
});123456789101112
檢測瀏覽器是否支持svg
function isSupportSVG() {
var SVG_NS = ”; return !!document.createElementNS !!document.createElementNS(SVG_NS, ‘svg’).createSVGRect;
}
// 測試console.log(isSupportSVG());1234567
檢測瀏覽器是否支持canvas
function isSupportCanvas() {
if(document.createElement(‘canvas’).getContext){ return true;
}else{ return false;
}
}// 測試，打開谷歌瀏覽器控制台查看結果console.log(isSupportCanvas());12345678910
檢測是否是微信瀏覽器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)==”micromessenger”) {
return true;
} else {
return false;
}
}// 測試alert(isWeiXinClient());1234567891011
jQuery 獲取鼠標在圖片上的坐標
$(‘#myImage’).click(function(event){
//獲取鼠標在圖片上的坐標
console.log(‘X：’ + event.offsetX+’\n Y:’ + event.offsetY);
//獲取元素相對於頁面的坐標
console.log(‘X：’+$(this).offset().left+’\n Y:’+$(this).offset().top);
});1234567
驗證碼倒計時代碼
!– dom –input id=”send” type=”button” value=”發送驗證碼”12
// 原生js版本var times = 60, // 臨時設為60秒
timer = null;
document.getElementById(‘send’).onclick = function () {
// 計時開始
timer = setInterval(function () {
times–; if (times = 0) {
send.value = ‘發送驗證碼’;
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + ‘秒後重試’;
send.disabled = true;
}
}, 1000);
}1234567891011121314151617181920
// jQuery版本var times = 60,
timer = null;
$(‘#send’).on(‘click’, function () {
var $this = $(this); // 計時開始
timer = setInterval(function () {
times–; if (times = 0) {
$this.val(‘發送驗證碼’);
clearInterval(timer);
$this.attr(‘disabled’, false);
times = 60;
} else {
$this.val(times + ‘秒後重試’);
$this.attr(‘disabled’, true);
}
}, 1000);
});12345678910111213141516171819202122
常用的一些正則表達式
//匹配字母、數字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//驗證郵箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//驗證手機號
/^1[3|5|8|7]\d{9}$/
//驗證URL
/^http:\/\/.+\./
//驗證身份證號碼
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配中文字符的正則表達式
/[\u4e00-\u9fa5]/
//匹配雙字節字符(包括漢字在內)
/[^\x00-\xff]/1234567891011121314151617181920
js時間戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + “-” + m + “-” + d + ” ” + h + “:” + m + “:” + s;
}
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 獲得當前毫秒數: 1465816710020console.log(formatDate(nowDate));123456789101112131415
js限定字符數（注意：一個漢字算2個字符）
input id=”txt” type=”text”//字符串截取function getByteVal(val, max) {
var returnValue = ”; var byteValLen = 0; for (var i = 0; i val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen max) break;
returnValue += val[i];
} return returnValue;
}
$(‘#txt’).on(‘keyup’, function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, “**”).length 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819
js判斷是否移動端及瀏覽器內核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf(‘Trident’) -1, //IE內核
presto: u.indexOf(‘Presto’) -1, //opera內核
webKit: u.indexOf(‘AppleWebKit’) -1, //蘋果、谷歌內核
gecko: u.indexOf(‘Firefox’) -1, //火狐內核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf(‘Android’) -1 || u.indexOf(‘Linux’) -1, //android
iPhone: u.indexOf(‘iPhone’) -1 , //iPhone
iPad: u.indexOf(‘iPad’) -1, //iPad
webApp: u.indexOf(‘Safari’) -1 //Safari
};
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert(‘移動端’);
}123456789101112131415161718192021
之前我用過一個檢測客戶端的庫 覺得挺好用的，也推薦給大家 叫 device.js，大家可以 Googel 或 百度
GItHub倉庫地址：
getBoundingClientRect() 獲取元素位置
//它返回一個對象，其中包含了left、right、top、bottom四個屬性var myDiv = document.getElementById(‘myDiv’);var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;
// 相當於jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456
HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}
fullscreen(document.documentElement);12345678910111213
JS特效代碼，讓網頁打開時候最小化，6秒後最大化。追加100分
object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″
param name=”Command” value=”Minimize”/object
input type=button value=最小化 onclick=hh1.Click()
這個你可以試試。但只針對ie，其他的多標籤瀏覽器似乎不能實現
當單擊按鈕時 顯示搜索框，當再次單擊按鈕時隱藏搜索框，默認在頁面搜索框是隱藏的，求Js特效代碼
script
function change() {
var divDisp = document.getElementById(“search”).style.display;
if (divDisp == “block”) {
document.getElementById(“search”).style.display = “none”;
} else {
document.getElementById(“search”).style.display = “block”;
}
}
/script
body
input id=”btnChange” type=”button” onclick=”change();” value=”點我改變”/
div id=”search” style=”display:none”
input id=”searchText” type=”text” /
/div
/body
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/187807.html
微信掃一掃 
支付寶掃一掃 