1. web開發的時候前端JSP,JS,JQUERY,HTML等前端開發如何可視化開發啊比如在一個位置插入一張動態圖片
沒有什麼拖拖拉拉的工具，html靜態頁切好，所有動態代碼和JS效果都是手寫上去。
新聞內容的更新是用在線編輯器，比如ckeditor之類的
2. 前端開發應該知道的幾個CSS網頁表單布局技巧
1、絕對定位
在絕大過程中，想確定一個元素在網站當中的固定位置，絕對定位是實現這個方式的解決辦法。在網頁當中，絕對定位可精確的控制元素在網頁當中的位置，我們可使用頂部、底部、左側和右側，附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應該知道，當你想給一個元素添加一個新的CSS樣式，但這個樣式之前已經被定義過了。此時我們可以採用！important來定義。
例如，如果我想在我的網站的特定部分的H3標題是紅色而不是黃色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情況，一般會分成文本居中和DIV的內容居中。
文本居中
文本居中使用text-align：center; 。如果想讓文本在左右兩側，可以使用左側或右側。
DIV內容
DIV內容居中跟文本居中不一樣。CSS可以這樣定義：
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設置為「100％以下」的原因是因為如果它是100％寬度，那麼如果是全寬度，並且不需要居中。最好有一個固定的寬度，如60％或550像素等。
4、垂直對齊（對於一行文本）
要使菜單的高度和文本的行高一致，可以這么設置：
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用於按鈕，文本鏈接，網站的部分，圖標等等。如果你想做一個懸停效果，可以試試：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標簽的顏色從黑色變成黃色。
6、懸停效果過渡
對於懸停效果，如使用菜單或網站上的圖像，我們肯定不希望顏色快速貼近結果，所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標簽的狀態
我們在遇到a標簽的時候，一定要給a標簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過，更利於用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調整圖像大小以適應
說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手，我相信這個效果肯定有很多人都想做，當然，我提供的方法也只是其中的一種：
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100％，並根據圖像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。
9、父級元素和子元素
如果ni不希望選擇任意的後代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器：
h1 > strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應用於多個類或選擇器
如果你想要在所有圖片，博客部分和側邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復3次。只需列出這些項目，用逗號分隔：
.blog,img,.sidebar {border: 1px solid #000;}
3. 前端開發過程中，ui給一個圖，下一步怎麼做
ui給的圖就是你要實現的頁面內容和效果。就是你用你的前端技術，開發出來一個跟圖片一樣的網頁。
4. 我是做web前端的，要實寫一個流程圖，不會寫，沒思路，求指教
如果這個流程圖是固定的，也就是說是不會隨著數據，改變位置的話，那就做五行七列的格子，然後往格子里加東西應該就可以了。像那個藍色四個角，你可以在這個包裹電話的小盒子里，定位四個小正方形，定位到四個角上。
例外那個每個圖標樣式都是固定的上圖下文，上圖帶四個小正方形的交互，並且大部分帶箭頭，可以寫公共樣式。像那些線，如果嫌麻煩，可以用圖片代替，定位上去。
5. 前端開發中常用到的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
6. （前端開發）在網頁上顯示這種工作流流程圖，該用什麼方法
這種插件貌似沒有，不過就我知道的技術實現手段倒是有
http://raphaeljs.com/graffle.html
樓主耐心點改下代碼應該可以
7. 用html5開發前端app，觸摸圖片會滑動到下一張圖片，請問怎麼弄
這個原理其實很簡單的。知道html5隻是html+css3+js的全程，所以控制圖片的定位都是有css的一個position屬性來做的，圖片無非就是去改變定位中的left值。知道這個之後就可以接下來的實現步驟：當然，這些只是實現邏輯。具體細化功能這個自己去調整。原理知道其他的都簡單的很。
第一步：將N張圖片去排版定位。
第二步：現在已經知道了這3張圖片的位置，接下來就是去點擊它，改變他的位置，這個點擊其實用js就很容易實現。onclick點擊事件，可以搜下；
第三步:圖片就這樣切換了。假設手機屏幕寬是50像素的，現實不是這樣，所以需要加個遮照。就是在這個滾動的圖片上再加一層div去遮住不去顯示的圖片（當然這是一種蔗照方法）。
8. 微信裡面類似於一張圖教你看懂 是怎麼做的
你說的是長圖或信息圖吧，其實很簡單，你在PPT裡面做好每一頁，再用PS把他們接在一起就可以了（這是笨辦法）；第二種就是在網上下載一些相關軟體就可以了，非常多的。輸入關鍵字「長圖製作工具」即可
9. 前端工程師，請問切圖是什麼意思我會寫div﹢css已經比較熟練了，js也、jquery這些也學完
是的，做前端必須必須會切圖，但是 切圖 就是PS裡面的一步操作，十分簡單。QQ截圖和PS切圖是動作不一樣，但是基本上是一樣的，QQ是截取，而PS裡面有個工具張的像 刀 ，拿著這個刀在圖上面畫，所以叫切圖。
選擇選中的切片，在點擊保存，就這么先切，在選擇，在保存，就完成了切圖，但是PS切圖比qq截圖用著爽多了，因為在PS裡面可以將圖片放大N倍，在切，在小的圖也能切，而且可以一次切很多，也能一次保存很多，所以比QQ截圖用著爽。總體來講比QQ截圖專業吧。
10. 前端編程如何在HTML文件中顯示圖片
如果圖片地址寫為絕對地址，比如：c:xxx/xxx/xx.jpg，如果這種格式你把整個文件夾拷到另一台電腦上，運行是他就會在新的電腦上面找這個地址，如果找不到就無法顯示圖片。
相對地址,相對地址的圖片文字也就是相對於當前文件的路徑地址，這樣寫即使更換了電腦，路徑都是不會變的，圖片都能正常顯示。建議使用相對地址。