⑴ pc端 前端頁面 js燈箱效果能放大縮小嗎
可以監聽滾輪事件 mousewheel 判斷是點擊的圖片是否顯示，顯示的話 先屏蔽滾動事件 然後獲取到你顯示出來的容器 改變一下img的css的 transform ：scale屬性，也可以判斷下滾動方向進行放大和縮小 如果沒有顯示 就不採取任何處理
⑵ js前端使用的特效中用到的兩個屬性以及兼容性
outline-offset對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓。Internet Explorer 和 Opera 不支持 support outline-offset 屬性。
text-shadow 可向文本應用陰影。
Internet Explorer 10、Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 屬性。
Internet Explorer 9 以及更早的版本，不支持 text-shadow 屬性。
⑶ web前端里的js技術
JS，全稱為JavaScript，是一種客戶端腳本語言，是前端開發學習內容當中的一個重要部分。
JavaScript可運行在所有主要平台的所有主流瀏覽器上，也可運行在每一個主流操作系統的伺服器端上。現如今我們在為網站寫任何一個主要功能的時候都需要有懂能夠用JavaScript寫前端的開發人員。我有web前端開發課程的全套視頻資料，可以發給你自學。
要學的內容主要有：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。
祝你學有所成，望採納。
⑷ 前端開發中常用到的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 = 'http://www.w3.org/2000/svg'; 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);
}
// 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);
});2122
常用的一些正則表達式
//匹配字母、數字、中文字元
/^([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]/
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('移動端');
}21
之前我用過一個檢測客戶端的庫 覺得挺好用的，也推薦給大家 叫 device.js，大家可以 Googel 或 網路
GItHub倉庫地址：https://github.com/matthewhudson/device.js
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
⑸ 我做前端開發，但是javascript總是搞不懂，也不會寫出什麼效果，邏輯和大腦空空，覺定轉行！
我覺得吧你首先要確定自己是否真的努力了，是否有好好學習javascript、jquery、css、html了，如果你努力了，和高手探討一下自己的努力方向是否走偏，如果就是覺得不適合，就是不愛做，那好吧，放手吧。
如果沒有努力，沒有好好學學javascript，那麼好好學一下，可以先學一下jquery，很簡單，可以立即讓你對javascript感到驚艷，美輪美奐。
我也是做前端的，我很喜歡前端的工作，我們這邊也有後端的同事轉過來了，他已經做到了項目經理級別，後端做長了就會感覺，前面一律，模式已經固化了，做前端每天你可以看到嶄新的東西，每天都有有趣的東西出現。
推薦你基本書吧，javascript權威指南(第六版)，javascript高級程序設計，javascript語言精粹，javascript設計模式，javascript經典實例。
可以先看jquery方面的書，推薦兩本jquery語言基礎，鋒利的jquery。
希望對你有用
⑹ 前端用js如何實現購物車功能，如圖那樣的效果
這是需要多個方法才能完成的
1，需要動態添加商品那一條顯示的function
2，個數那個需要一個增加減少的function
3， 需要個統計總數量的
4，需要一個檢測checkbox的
你做到什麼程度了
⑺ 前端js重要嗎
JS，全稱 JavaScript
在瀏覽器端運行的一種客戶端腳本語言，是介於HTML與伺服器端開發語言之間的一個補充，以今天的開發趨勢看，js所處的這個位置越來越重要，不可或缺。
有人說就算沒有JavaScript也可以做網頁。
⑻ react native web怎麼寫js效果
1，React Js的目的是為了使前端的V層更具組件化，能更好的復用，它能夠使用簡單的html標簽創建更多的自定義組件標簽，內部綁定事件，同時可以讓你從操作dom中解脫出來，只需要操作數據就會改變相應的dom。
2，React Native的目的是希望我們能夠使用前端的技術棧就可以創建出能夠在不同平台運行的一個框架。可以創建出在移動端運行的app，但是性能可能比原聲app差一點。
3，ReactJs和React Native的原理是相同的，都是由js實現的虛擬dom來驅動界面view層渲染。只不過ReactJs是驅動html dom渲染； React Native是驅動android/ios原生組件渲染。
4，React基於組件（component）開發，然後組件和組件之間通過props傳遞方法，每個組件都有一個狀態（state），當某個方法改變了這個狀態值時，整個組件就會重繪，從而達到刷新。另外，說到重繪就要提到虛擬dom了，就是用js模擬dom結構，等整個組件的dom更新完畢，才渲染到頁面，簡單來說只更新了相比之前改變了的部分，而不是全部刷新，所以效率很高。
虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當數據變化時，React都會重新構建整個DOM樹，然後React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合並。
⑼ 前端js插件
前端js插件,具有簡單使用,交互效果好,具有吸引力外觀的特點，下面總結一下最常用並且最好用的js插件：
1.zDialog.js插件。是一個包含各種彈窗的前端插件。
2.ace.min.js插件，ace-element.min.js插件，是基於Bootstrap Ace模板的菜單和包含Tab頁效果。
3.jquery.flot.js插件，Jquery的圖表插件float。Flot是一個Jquery下圖表插件，具有簡單使用，交互效果，具有吸引力外觀特點。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等瀏覽器，是一個基於Javascript和Jquery純客端戶的腳本庫。
4.jquery.easypiechart.js插件，主要是用來統計新的訪問、跳出率、伺服器負載、使用的RAM等，功能很強大，帶有HTML5的動畫效果，效果非常炫。
query.sparkline.js插件，是一款jquery的畫小圖插件。
5.jquery.slimscroll.js插件 ，是jQuery內的內容滾動插件，可以定義高度、寬度，還可以定義位置、滾動條大小、尺寸、顏色以及眾多參數自定義。
6.jquery.ui.touch.js 插件，包含jQuery觸摸效果。
⑽ js和前端有區別么
前端一般指的是面向用戶的用戶可以直接看到的。JS只是一門編程語言，而前端包含了很多東西。