html5的新特點
1.語法更簡單
a) 頭部聲明
<!doctype html>
b) 簡化了字符集聲明
<meta charset="utf-8">
2.語法更寬松
a) 可以省略結束符的標簽
li、dt、dd、p、optgroup、option、tr、td、th
b) 可以完全省略的標簽
html、head、body
3.標簽語義化
增加了很多標簽，在作頁面的時候更加具有語義（定義了一些原本沒有語義的div模塊為有鮮明結構的語義模塊）
a) <header>標記定義一個頁面或一個區域的頭部
b) <nav>標記定義導航鏈接
c) <article>標記定義一篇文章內容
d) <section>標記定義網頁中一塊區域
e) <aside>標記定義頁面內容部分的側邊欄
f) <footer>標記定義一個頁面或一個區域的底部
語義化標簽圖示
4.表單新增常用屬性------要求掌握
required：必填
placeholder：輸入內容提示
autofocus：自動獲取焦點-----自動幫我們將光標點進去
<form method="post" action="http://www.baidu.com">
<!-- required 必填，必須的 -->
<!-- 自動獲取焦點----自動將光標定位到表單中 -->
<input type="text" placeholder="請輸入用戶名" autofocus="autofocus" required="required" />
<input type="submit" />
</form>
5.input新增type屬性值
a) type=“email”，文本框中只能輸入email地址
b) type=“date”，日期控件
c) type=“time”
d) type=“month”
e) type=“week”
f) type=“number”，喚醒數字鍵盤
g) type=“range”，滑塊
h) type=“color”
最近在做一個手機站，要求點擊分享可以直接打開微信分享出去。而不是jiathis，share分享這種的點擊出來二維碼。在網上看了很多，都說APP能喚起微信，手機網頁實現不了。也找了很多都不能直接喚起微信。
總結出來一個可以直接喚起微信的。適應手機qq瀏覽器和uc瀏覽器。
下面上代碼，把這些直接放到要轉發的頁面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引進mshare.js
-
<button data-mshare="0">點擊彈出原生分享面板</button>
-
<button data-mshare="1">點擊觸發朋友圈分享</button>
-
<button data-mshare="2">點擊觸發發送給微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接彈出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代碼分享，把這些代碼新建一個js文件放進去，然后在頁面中引進就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ兩個主流瀏覽器
-
* 上面觸發微信分享到朋友圈或發送給朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 瀏覽器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判斷 qq 瀏覽器
-
* 然而qq瀏覽器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 瀏覽器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 獲取操作系統信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq瀏覽器下面 是否加載好了相應的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 進一步細化版本和平臺判斷
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq瀏覽器下面 根據不同版本 加載對應的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回調函數
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加載過 qq 的 bridge 腳本之后
-
* 再去初始化分享組件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC瀏覽器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 關于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享會直接使用截圖
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享類型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 瀏覽器分享函數
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 對外暴露的接口函數
-
* @method mShare
-
* @param {Object} config 配置對象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 預加載 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，這樣就可以直接喚起微信進行分享啦
jQuery超詳細總結
文章目錄
jQuery超詳細總結
一 選擇器
特殊選擇器
二 篩選器
用在 jQuery 選擇的元素后面
都是方法,對選擇出來的元素進行二次篩選
三 文本操作
總結
四 元素類名操作
五 元素屬性操作
在 H5 的標準下, 給了一個定義, 當你需要寫自定義屬性的時候，最好寫成 data-xxx="值"，當大家看到 data-xxx 的時候, 就知道這是一個自定義屬性
六 元素樣式操作
七 綁定事件
on()方法是專門用來綁定事件one() 方法是專門用來綁定一個只能執行一次的方法off() 方法是專門用來解綁一個元素的事件的trigger() 方法是專門用來觸發事件的方法hover()常用事件offset()position()scrollTop()scrollLeft()ready() 事件each() 方法jQuery 發送一個 GET 請求jQuery 發送一個 POST 請求jQuery 的 $.ajax 方法position()
postition: 定位
只讀的方法
讀取:
元素相對于定位父級的位置關系
得到的也是一個對象 { left: xxx, top: xxx }
如果你寫的是 right 或者 bottom, 會自動計算成 left 和 top 值給你
十一 獲取卷去的尺寸（頁面滾動條）
scrollTop()
原生 js 里面 document.documentElement.scrollTop
讀寫的方法
不傳遞參數的時候就是獲取卷去的高度
傳遞一個參數就是設置卷去的高度
scrollLeft()
原生 js 里面 document.documentElement.scrollLeft
讀寫的方法
不傳遞參數的時候就是獲取卷去的寬度
傳遞一個參數的時候就是設置卷去的寬度
十二 jQuery中的函數
ready() 事件
類似于 window.onload 事件,但是有所不同
window.onload 會在頁面所有資源加載行
ready() 會在頁面 html 結構加載完畢后執行
也叫做 jQuery 的入口函數
有一個簡寫的形式 $(function () {})
each() 方法
類似于 forEach(), 遍歷數組的
jQuery 的元素集合, 是一個 jQuery 數組, 不是一個數組, 不能使用 forEach()
forEach語法： forEach(function (item, index) {})
each語法：each(function (index, item) {})
比較少用到, 因為 jQuery 隱式迭代 自動遍歷
十三 jQuery中的動畫
讓元素出現不同的移動, 改變
transition -> 過渡動畫
animation -> 幀動畫
標準動畫
show() 顯示元素
語法: show(時間, 運動曲線, 運動結束的函數)
hide() 隱藏元素
語法: hide(時間, 運動曲線, 運動結束的函數)
toggle() 改變元素顯示或隱藏（如果顯示就隱藏，如果隱藏就顯示）
語法: toggle(時間, 運動曲線, 運動結束的函數)
三個方法的參數都可以選填，不需要每個都填寫
折疊動畫
slideDown() 下滑顯示
語法: slideDown(時間, 運動曲線, 運動結束的函數)
slideUp() 上滑隱藏
語法: slideUp(時間, 運動曲線, 運動結束的函數)
slideToggle() 切換滑動和隱藏
語法: slideToggle(時間, 運動曲線, 運動結束的函數)
漸隱漸顯動畫
實質是透明的opacity的變化
fadeIn() 逐漸顯示
fadeIn(時間, 運動曲線, 運動結束的函數)
fadeOut() 逐漸消失
fadeOut(時間, 運動曲線, 運動結束的函數)
fadeToggle() 切換顯示和消失
fadeToggle(時間, 運動曲線, 運動結束的函數)
以上三個方法的參數，均有默認值
fadeTo() 設置元素透明度變為你指定的數字
fadeTo(時間, 你指定的透明度, 運動曲線, 運動結束的函數)
綜合動畫
animate()
基本上大部分的 css 樣式都可以動畫
transform 不行, 顏色不行
語法: animate({}, 時間, 運動曲線, 運動結束的函數)
{ }里面就寫你要運動的 css 屬性,默認單位為px
停止動畫
讓當前的動畫結束
因為 jQuery 的動畫你一直點擊，就會一直觸發。即使不再點擊讓事件發生，還是會把沒執行完的動畫執行完畢。
你點擊 10 次, 他就會觸發 10 次, 直到 10 次全都完畢才結束
stop()
當這個函數觸發的時候, 就會讓運動立刻停下來
你運動到哪一個位置了就停止在哪一個位置
finish()
當這個函數觸發的時候, 就會讓運動立刻停下來
不管你運動到了哪一個位置, 瞬間到達運動完成位置
十四 jQuery發送ajax請求
jQuery 里面幫我們封裝好了幾個方法
專門用來發送 ajax 請求的
$.get() -> 專門用來發送 get 請求的
$.post() -> 專門用來發送 post 請求的
$.ajax() ->
發送什么請求都可以(get, post, put, delete)
并且還可以發送一個 jsonp 請求
jQuery 發送一個 GET 請求
語法: $.get(請求地址, 需要攜帶到后端的參數, 成功的回調函數, 期望后端返回的數據類型)
請求地址: 你要請求的后端接口地址(必填)
攜帶參數: 你需要給后端傳遞的參數
可以是一個固定格式的字符串 ‘key=value&key=value’
也可以是一個對象 { a: 100, b: 200 }
成功回調: 當請求成功的時候會執行的函數
期望數據類型: 就是你是不是需要 jQuery 幫你解析響應體
$.ajax({
url: '', // => 請求地址(必填)
type: '', // => 請求方式(GET, POST, ...) 默認是 GET
data: '', // => 攜帶到后端的參數
dataType: '', // => 期望后端返回的數據類型, 默認不解析
async: true, // => 是否異步, 默認是 true
success: function () {}, // => 成功的回調
error: function () {}, // => 失敗的回調
timeout: 數字, // 單位是 ms, 超時時間(超過你寫的時間沒有響應, 那么就算失敗)
cache: true, // 是否緩存, 默認是 true
context: 上下文, // 改變回調函數里面的 this 指向
...
})
$.ajax 里面失敗的回調
不光是請求失敗的時候會觸發
jQuery 認定失敗就是失敗
當 dataType 寫成 json 的時候, jQuery 會幫我們執行 JSON.parse()
當后端返回一個不是 json 格式的字符串的時候
執行 JSON.parse() 就會報錯
也會執行失敗的回調, 請求雖然成功, 但是解析失敗了, 也是失敗
JSON.parse(‘你好 世界’) -> 就會報錯了
$.ajax 里面是否緩存的問題
這個請求要不要緩存
當兩次請求地址一樣的時候, 就會緩存
如果你寫成 false, 表示不要緩存
jQuery 就會自動再你的請求后面加一個參數 =時間戳
第一次請求 ./server/get.php?=11:10:01.325的時間戳
第二次請求 ./server/get.php?_=11:10:02.326的時間戳
$.ajax 里面的回調 this 指向問題
ajax 的回調里面默認 this 指向被 jQuery 加工過的 ajax 對象
context 的值你寫的是誰, 回調函數里面的 this 就時誰
$.ajax 里面的請求方式的問題
$.ajax 這個方法里面, type 表示請求方式
jQuery 還給了我們一個參數叫做 method，也表示請求方式
當你寫請求方式的時候
可以寫成 type: ‘POST’
也可以寫成 method: ‘POST’
$.ajax 里面的接收響應的問題(2015年以后的版本才有 promise 的形式)
jQuery 默認把 ajax 封裝成了 promsie 的形式
你可以用 success 選項接收成功的回調
也可以用 .then() 的方式接收響應
jQuery 的 ajax 全局鉤子函數
鉤子: 掛在你的身上, 你的所有動作都和它有關系
這些全局函數都是掛在 ajax 身上的, 這個 ajax 的每一個動作都和全局函數有關系
全局的鉤子函數
1.ajaxStart()
會在同一個作用域下多個 ajax 的時候, 第一個 ajax 之前開始的時候觸發
如果有多個 ajax 他只觸發一次
2.ajaxSend()
每一個 ajax 再發送出去之前, 都會觸發一下
xhr.send() 之前觸發
ajaxSuccess()
每一個 ajax 再成功的時候觸發
只要有一個 ajax 成功了就會觸發
ajaxError()
每一個 ajax 再失敗的時候觸發
只要有一個 ajax 失敗了就會觸發
ajaxComplete()
每一個 ajax 完成的時候觸發
只要有一個 ajax 完成了, 不管成功還是失敗, 都會觸發
ajaxStop()
會在同一個作用域內多個 ajax 的時候, 最后一個 ajax 完成以后觸發
如果有多個 ajax 它只觸發一次
作用: 通常用來做 loading 效果
<img src="./loading.gif" alt="">
// 利用ajax鉤子函數 做一個lading效果 等待頁面
// 提前利用鉤子函數準備 loading 效果
// 每一次發送出去的時候都要顯示圖片
$(window).ajaxSend(() => {
$('img').show()
})
// 每一次完成的時候都要圖片再隱藏起來
$(window).ajaxComplete(() => {
$('img').hide()
})
// 每次點擊按鈕的時候都會發送一個 ajax 請求
$('button').click(() => {
// 發送一個 ajax 請求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log('請求成功了')
console.log(res)
}
})
})
十五 jQuery 發送一個 jsonp 請求
jQuery 也提供給我們發送 jsonp 請求的方式
jsonp: 利用 script 標簽的 src 屬性來請求
返回值: 是一個字符串, 字符串里面寫了一個 函數名(后端傳遞給前端的參數)
使用 $.ajax() 這個方法
必須寫的:dataType: 'jsonp'
發送 jsonp 請求
jQuery 幫我們準備好了一個函數名, 并且以參數的形式帶到了后端
jQuery 幫我們帶過去的 callback 參數, 就是它準備好的函數名
后端就應該返回一個 jQuery 準備好的函數名()
其他參數
jsonp: '', 你帶到后端表示你函數名的那個 key, 默認值是 callback
cache: false, 當 dataType === ‘jsonp’ 的時候, 默認 cache 就是 false
// 發送一個 jsonp 請求
$.ajax({
url: '
dataType: 'jsonp', // 表示我要發送一個 jsonp 請求
jsonp: 'cb', // 表示參數里面的 cb 屬性時我準備好的函數名
cache: true, // 表示緩存本次請求
success: function (res) {
console.log(res)
}
})
// jQuery 準備好的函數名
// + jQuery34108160883644340862_1582255906750
// + 變量名包含 數字 字母 下劃線 $
// + function jQuery34108160883644340862_1582255906750() {}
十六 jQuery 的多庫并存機制
因為 jQuery 引入頁面以后, 向全局添加了兩個名字
一個叫做 $
一個叫做 jQuery
萬一有別的類庫也起名叫做 jQuery 或者$ 怎么辦
當我兩個庫都需要使用的時候
因為向全局暴露的名字一樣, 就會發生沖突了
誰的文件引再后面, 誰的名字就占主要位置了
兩個只能選擇一個使用
jQuery 提供了一個方法
我可以不占用$ 或者 jQuery 這個名字
noConflict()
語法: $.noConflict() 或者jQuery.noConflict()
當你執行了 noConflict() 以后, jQuery 就交出了$的控制權。
jQuery向全局暴露的不在有$ 這個名字了。當你執行了noConflict(true) 以后, jQuery就交出了 $ 和jQuery 的控制權。
交出去以后, 我的 jQuery 就用不了
noConflict() 的返回值: 就是一個新的控制權
你只要接收一個返回值, 你定好的變量是什么,jQuery 的控制權就是什么
// 交出 $ 的控制權
// $.noConflict()
// 交出 $ 和 jQuery 的控制權
// $.noConflict(true)
// 改變 jQuery 的控制權
var $$ = $.noConflict(true)
十七 jQuery 的插件擴展機制
jQuery 還提供給我們了一個機制, 就是你可以向 jQuery 里面擴展一些方法
兩個方法
$.extend()
擴展給 jQuery本身使用的
語法:
$.extend({ 你要擴展的方法名: function () {}, 你要擴展的方法名: function () {}, ... })
使用的時候就是 $.你擴展的方法名()
$.fn.extend() => $.extend($.fn, { 你擴展的方面名 })
擴展給 jQuery 元素集合使用的
語法 $.fn.extend({ 你要擴展的方法名: function () {}, 你要擴展的方法名: function () {}, ... })
使用的時候就是 $(選擇器).你擴展的方法名()
$('div').html()
// 1. 擴展給 jQuery 本身
// jQuery 本身沒有操作 cookie 的方法
// $.extend({
// setCookie: function (key, value, expires) {
// // 寫上設置 cookie 的方法
// if (expires) {
// var time = new Date()
// time.setTime(time.getTime() - 1000 60 60 8 + 1000 expires)
// document.cookie = ${key}=${value};expires=${time}
// } else {
// document.cookie = ${key}=${value}
// }
// },
// getCookie: function (key) {
// // ...
// }
// })
// 使用我們擴展的方法去設置 cookie
// $.setCookie('a', 100)
// $.setCookie('b', 200, 10)
// 2. 擴展給元素集合
// 擴展一個全選的方法
// 方法以執行, 就能讓 input checkbox 變成選中狀態或者不選中狀態
$.fn.extend({
selectAll: function (type = true) {
// type 就是你傳遞進來的選中或者不選中一個標志
// 你不傳遞的時候, 我默認是 true, 你傳遞了就用你傳遞的
// console.log(this) // 就是你調用的時候前面的哪個元素集合
this.each(function (index, item) {
// 讓元素集合中的每一個 input 的 checked 屬性為 true
item.checked = type
})
// return 這個元素集合, 達到一個鏈式編程的效果
return this
}
})
$('button').click(() => {
// 讓所有 input 框變成選中狀態
console.log($('input').selectAll().attr('hello', 'world'))
})
十八 jQuery 的拷貝對象問題
$.extend() 深拷貝 與 淺拷貝
傳遞一個對象的時候, 可以做到插件擴展機制
傳遞多個對象的時候, 可以將后面幾個對象的內容復制到第一個對象里面
語法:
$.extend(是否深拷貝, 對象1, 對象2, 對象3, ...)
是否深拷貝: 默認是 false, 可以不寫
從 對象2 開始, 后面所有對象的內容都會被拷貝到 對象1 里面
再拷貝的時候, 如果有重復的 key, 那么以寫在后面的為準(后來者居上)
十九 jQuery 的插件
基于 jQuery 使用的, 別人封裝好的插件
我們拿來使用就可以了, 前提就是要有 jQuery
例子 一個叫做 jquery-validate 的插件
專門用來做表單驗證的
你輸入的內容是不是符合規則
下載
引入文件
去復制粘貼
<!-- 引入文件 --> <!-- 注意: 先引入 jQuery, 后引入 jquery-validate --> <script src="./jquery/jquery.min.js"></script> <!-- jquery-validate 這個文件依賴的 jquery --> <script src="./jquery-validate/jquery.validate.min.js"></script> <!-- 引入中文信息提示包, 必須在 jquery-validate 的后面 --> <script src="./jquery-validate/localization/messages_zh.min.js"></script> <script>
// 選擇到你要驗證的表單的 form 標簽
// 執行 validate 方法
// {} 里面就寫我們的驗證規則
$('#login').validate({
// 你需要的驗證規則
rules: {
// key 就是你要驗證的哪個 input 框的 name 屬性
username: 'required', // 用戶名必填
password: { // 一個字段可以寫多個驗證方式
required: true,
minlength: 6, // 最少是六個
maxlength: 12, // 最多十二個
}
},
// 你自定義提示的文本內容
messages: {
// key 就是你驗證的哪個 input 框的 name 屬性
username: '請輸入用戶名! ^_^',
password: {
required: '請輸入密碼!',
minlength: '最少要輸入 6 個字符噢!'
}
},
// 表單的提交事件
// 這個函數會在表單驗證通過以后執行
submitHandler: function (form) {
// form 接收的就是你的 form 標簽
// console.log(form)
// console.log('表單驗證通過了, 我需要使用 ajax 去提交數據了')
// 有一個 jQuery 的方法
// serialize() 快速獲取表單輸入的數據
// $(form).serialize() 就能拿到這個 form 標簽里面的表單數據
// console.log($(form).serialize()) // username=admin&password=123456
// 發送請求到后端
$.post('./server/login.php', $(form).serialize(), res => {
console.log(res)
}, 'json')
}
})
————————————————1.文字滾動
<html>
<head>
<title>我的第一個頁面</title>
</head>
<body>
<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
雷電黃色預警！<br />
大雨黃色預警！<br />
</marquee>
</body>
</html>
direction：方向
up:上 down：下 left：左 right：右
scrollamount:滾動速度-----------------scroll：滾動 amount：數值
width：寬度 height：高度
onmouseover：當鼠標移上去
onmouseout：當鼠標離開
stop()：停止
start()：開始
behavior：
scroll 循環滾動
alternate 來回滾動
slide 滾動一次停止
一.有關于內置對象的作用域
主要說明2個對象，request，session
1、request 對象
request 對象是 javax.servlet.httpServletRequest類型的對象。 該對象代表了客戶端的請求信息，主要用于接受通過HTTP協議傳送到服務器的數據。（包括頭信息、系統信息、請求方式以及請求參數等）。
request只在2個頁面之間傳遞，每一次新的請求都會新建一個request對象，也就是說可能會request對象不一致導致空指針異常。
2、session 對象
session 對象是由服務器自動創建的與用戶請求相關的對象。服務器為每個用戶都生成一個session對象，用于保存該用戶的信息，跟蹤用戶的操作狀態。session對象內部使用Map類來保存數據，因此保存數據的格式為 “Key/value”。 session對象的value可以使復雜的對象類型，而不僅僅局限于字符串類型。
session對象在整個會話只有一個，也就是說session對象的數據會一直保留直到主動進行數據更改。
二.表單提交
在index.jsp中使用form進行數據的提交，action的目標是check.jsp，method是post
三.驗證跳轉
當form提交信息后交給check.jsp驗證，使用getParameter來得到form的信息，并使用setAttribute保存。在check.jsp中判斷賬號密碼是否正確后，使用
<jsp:forward page=".jsp"></jsp:forward>
1
進行跳轉，.jsp是想要跳轉的頁面路徑。
四.詳細代碼
index.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="check.jsp" method="post">
請輸入用戶名：
<input type = "text" name = "username"><br/>
請輸入密碼：
<input type = "password" name = "passwd"><br/>
<input type="submit" name="submit" value="登錄">
</form>
</body>
</html>
check.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>驗證</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getParameter("username");
String passwd = (String)request.getParameter("passwd");
request.setAttribute("username", username);
request.setAttribute("passwd", passwd);
if(username.equals("admin")&&passwd.equals("123")){
%>
<jsp:forward page="succeed.jsp"></jsp:forward>
<%}else{ %>
<jsp:forward page="failed.jsp"></jsp:forward>
<%} %>
</body>
</html>
succeed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸成功</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸成功
</body>
</html>
failed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸失敗</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸失敗
</body>
</html>
五.注意事項
在jsp中使用form提交表單不能直接進行跳轉，否則操作不慎就容易出現空指針異常，建議交由單獨的跳轉頁面處理
下面這段代碼是實現簡單的導航效果：
在這里插入代碼片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
.nav{
width:700px;
margin:100px auto;
}
.nav ul li{
float:left;
margin-right:5px;
}
.nav ul li a{
width:100px;
height:30px;
color:#fff;
display:block;
line-height:30px;
margin-right:5px;
text-decoration:none;
background:red;
text-align:center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nav ul li a:hover{
background:yellow;
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
</ul>
</div>
</body>
</html>
實現效果如圖：
容易犯錯的地方：剛開始我把display:block;屬性寫在最前面，結果一直出不來，后來發現display屬性應該放在height和width屬性后面
我還學到一個知識點：關于父元素塌陷問題：
在文檔流中，父元素的高度默認是被子元素撐開的，也就是說父元素多高，子元素就多高
但是為子元素設置浮動以后，子元素就會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷
由于父元素的高速塌陷了，則父元素下所有的元素都會向上移動，這樣會導致頁面布局混亂
所以我們在開發中一定要避免出席那高度塌陷的問題，這時候我們可以將父元素的高度寫死，這樣可避免塌陷的問題出現，但是一當高度寫死，父元素的高度將不能自動適應子元素的高度，所以這種方式是不推薦使用的
1
解決的方案：
根據W3C標準，在頁面中元素有一個隱含的屬性叫做Block Formatting Context
方案一：*（設置zoom為1和overflow為hidden）
當開啟元素的BFC后，元素會有以下特性：
父元素的垂直外邊距不會和子元素重疊
開啟BFC的元素不會被浮動元素所覆蓋
開啟BFC的元素可以包含浮動的子元素
那如何開啟元素的BFC呢？
設置元素浮動
設置元素的絕對定位
設置元素為inline-block(但是設置inline-block可以解決問題，但是會導致寬度丟失，所以不推薦使用這種方式)
將元素的overflow設置為一個非visible的值（推薦方式：將overflow:hidden這個是副作用最小的開啟BFC方式，所以可以這么說，以后若是再塌陷，就給父元素加上overflow:hidden屬性）
但需要注意的是：
在IE6以及以下的瀏覽器中并不支持BFC，所以使用這種方式并不能兼容IE6，在IE6中雖然沒有BFC，但有另一個隱藏屬性叫做hasLayout該屬性作用和和BFC類似。但在IE6瀏覽器可以通過開hasLayout來解決問題
開啟方式很多，我們可以直接用一種副作用最小的直接將元素的zoom設置為1，比如父元素是box1,我們可以在父元素中加上zoom:1;
在這里解釋一下zoom表示放大的意思，后邊跟著一個數值，寫幾就可以將元素放大幾倍，所以zoom:1表示不放大元素，但是可以通過該樣式可以開啟hasLayout.
但需要注意的是zoom屬性放IE6可以，別的瀏覽器比如Chrome就不行
****所以重頭戲來了：若我們想要兼容所有瀏覽器？
1.引入
三種引用方式
第一種 npm安裝
項目根目錄命令行執行
npm install uni-simple-router
1
第二種 插件市場（使用HBuilderX導入插件）
第三種 ZIP下載 解壓
2.項目中引入
import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后續代碼
引入之后就開始我們的正式使用。
第一步先在項目的根目錄下創建一個router文件夾。
格式為：
router
|---modules
|---index.js
|---index.js
router中的modules文件夾是用來放路由表模板的。modules中的index.js內容為
const files = require.context('.', false, /.js$/)
const modules = []
files.keys().forEach(key => {
if (key === './index.js') return
const item = files(key).default
modules.push(...item)
})
export default modules
這個文件用來把同目錄下的js文件讀取并整合所有路由。
在這里創建的js文件代碼示例：
const home = [
{
//注意：path必須跟pages.json中的地址對應，最前面別忘了加'/'哦
path: '/pages/home/index',
aliasPath:'/', //對于h5端你必須在首頁加上aliasPath并設置為/
name: 'index',
meta: {
title: '首頁',
},
},
{
path: '/pages/home/list',
name: 'list',
meta: {
title: '列表',
},
},
]
export default home
第二步配置router下的index.js
import modules from './modules'
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes: [...modules]//路由表
});
//全局路由前置守衛
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
})
export default router;
第三步 就是配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
App.mpType = 'app'
const app = new Vue({
...App
})
//v1.3.5起 H5端 你應該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif
// #ifndef H5
app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif
這樣你的路由就配置好了。
如果不想繁瑣的配置modules下的文件，可以用webpack自動構建路由表
安裝
npm install uni-read-pages
1
配置 vue.config.js （可能需要手動創建）
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
//如果你需要獲取更多參數，那么請配置參數！
includes:['path','name','meta']
})
module.exports = {
configureWebpack: {
plugins: [
new tfPages.webpack.DefinePlugin({
ROUTES: JSON.stringify(tfPages.routes)
})
]
}
}
然后去pages.json里面更改配置，加入所需要的內容
最后配置路由表
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes:ROUTES //路由表
});
//全局路由前置守衛
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
})
export default router;
Echarts餅圖之數據展示
1、組件簡介
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
官網鏈接：Echarts官網
W3C教程：W3C–Echarts教程
2、前端代碼實現
首先，下載庫，并引入到項目文件；
話不多說，直接上代碼。
/* 封裝的組件 HTML代碼
<div class="echart-wrap-box">
<div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");
defaults: {
option: {
echartsObj: {},
tooltip: {//提示框浮層內容。
trigger: 'item',//數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
formatter: " : {c}萬人"http://提示框浮層內容格式器,{a}（系列名稱），（數據項名稱），{c}（數值）, vf55rzz（百分比）
},
//如果系列沒有設置顏色，則會依次循環從默認列表中取顏色作為系列顏色。
color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],
legend: {//圖例組件。
orient: 'vertical',//圖例列表的布局朝向:垂直的
x: '80%',//圖例組件離容器左側的距離。
y: '60%',//圖例組件離容器上側的距離。
// width: 100,
textStyle: {},//圖例文字的樣式
// left: 'right',//圖例組件離容器左側的距離。
top: 'center',//圖例組件離容器上側的距離。
data: [],//右側圖例小組件信息數據
},
series: [{//餅圖信息
name: '',
type: 'pie',//餅狀圖
radius: 140,//餅圖的半徑。
center: ['50%', '50%'],
minAngle: 5, //最小的扇區角度（0 ~ 360），用于防止某個值過小導致扇區太小影響交互
label: {//展示文本設置
normal: {
show: true,
formatter: " : {c}萬人",//視覺引導線內容格式器,{a}（系列名稱），（數據項名稱），{c}（數值）, vpj5l5n（百分比）
},
emphasis: { //文本樣式
show: true, //展示
textStyle: { //文本樣式
fontSize: '16',
fontWeight: '600',
}
}
},
labelLine: {//視覺引導線設置
normal: {
show: true
}
},
data: [],//餅狀圖信息數據,value(數量)和 name為默認數據；
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
},
onInit(event) {
vm = event.vmodel;
let data;//假設這里通過ajax獲取到了需要展示的數據；
if (data.length == 0) {
return
}
data = data.sort((a, b) => { return b.number - a.number });//數據根據數量number從大到小排序
if (data.length > 7) {//從大到小的第八個新增粉絲數量的年份 開始統一歸為 其他年份新增粉絲數量
let arr = data.slice(7);
let num = 0, rate = 0;
for (let i = 0; i < arr.length; i++) {//第七個之后累數量和比率
num += Number(arr[i].number);
rate += Number(arr[i].rate);
};
let objOtherYear = {
value: num,
name: '其他年份__nana新增粉絲數量',
rate: rate
};
let arr2 = data.slice(0, 7);
arr2.push(objOtherYear);
data = arr2;
data = data.sort((a, b) => { return b.number - a.number });//數據根據數量number從大到小排序
}
this.option.series[0].data = [];
this.option.legend.data = [];
for (let i = 0; i < data.length; i++) {
let seriesData = {
value: 0,
name: '',
rate: ''
};
seriesData.value = data[i].number;
seriesData.name = data[i].year;
seriesData.rate = data[i].rate;
this.option.series[0].data.push(seriesData);//給餅圖賦值數據
let legendData = {
name: '',
icon: 'circle',//強制設置圖形為:圓形
textStyle: {
color: '#000'
}
}
legendData.name = data[i].year;
this.option.legend.data.push(legendData);//給圖例組件賦值數據
}
},
callFun: avalon.noop,//點擊餅狀圖后的回調
isClickEchartsOUt: avalon.noop,//是否為餅圖外的點擊，父組件進行判斷后傳過來
onReady(event) {
this.echartsObj = echarts.init(event.target.children[0]);//初始化
this.echartsObj.setOption(this.option);
$(window).resize(() => {
this.echartsObj.resize();
});
let dataIndex;//保存選中扇區的序號
let _this = this;
this.$watch('isClickEchartsOUt', () => {
if (this.isClickEchartsOUt) {//如果不是餅狀圖扇區的點擊，則取消選中；
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 可選，數據的 index
dataIndex: dataIndex,
})
}
});
// 處理點擊餅圖內部的事件
this.echartsObj.on('click', function (params) {
if (params.dataIndex != dataIndex) {//如果不是前一次選中的扇區，則取消選中
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 可選，數據的 index
dataIndex: dataIndex,
})
}
dataIndex = params.dataIndex;
_this.echartsObj.dispatchAction({
type: 'pieSelect',//選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
dataIndex: dataIndex,
})
vm.callFun(params);//回調，傳點擊獲取到的數據給父組件
});
},
onDispose() {}
}
在我們的日常開發工作中，文本溢出截斷省略是很常見的一種需考慮的業務場景細節?？瓷先?“稀松平常” ，但在實現上卻有不同的區分，是單行截斷還是多行截斷？多行的截斷判斷是基于行數還是基于高度？這些問題之下，都有哪些實現方案？他們之間的差異性和場景適應性又是如何？
一般來說，在做這樣文字截斷效果時我們更多是希望：
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
文本超出范圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好
基于上述的準則，下面我們通過編碼實踐，給出一些答案。
單行文本溢出省略
核心 CSS 語句
overflow: hidden；（文字長度超出限定寬度，則隱藏超出的內容）
white-space: nowrap；（設置文字在一行顯示，不能換行）
text-overflow: ellipsis；（規定當文本溢出時，顯示省略符號來代表被修剪的文本）
優點
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
文本溢出范圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好
短板
只支持單行文本截斷，并不支持多行
適用場景
適用于單行文本溢出顯示省略號的情況
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本溢出省略（-webkit-line-clamp）
核心 CSS 語句
overflow: hidden；（文本溢出限定的寬度就隱藏內容）
-webkit-line-clamp: 2；（用來限制在一個塊元素顯示的文本的行數, 2 表示最多顯示 2 行。 為了實現該效果，它需要組合其他的WebKit屬性）
display: -webkit-box；（和 -webkit-line-clamp: 2；結合使用，將對象作為彈性伸縮盒子模型顯示 ）
-webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 ）
text-overflow: ellipsis；（多行文本的情況下，用省略號“…”隱藏溢出范圍的文本)
優點
響應式截斷，根據不同寬度做出調整
文本溢出范圍才顯示省略號，否則不顯示省略號
瀏覽器原生實現，所以省略號位置顯示剛好
短板
兼容性一般： -webkit-line-clamp 屬性只有 WebKit 內核的瀏覽器才支持
適用場景
多適用于移動端頁面，因為移動設備瀏覽器更多是基于 WebKit 內核
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
多行文本溢出省略（偽元素 + 定位）
核心 CSS 語句
position: relative; （為偽元素絕對定位）
overflow: hidden; （文本溢出限定的寬度就隱藏內容）
position: absolute;（給省略號絕對定位）
line-height: 18px; （結合元素高度,高度固定的情況下,設定行高, 控制顯示行數）
height: 36px; （設定當前元素高度）
::after {} （設置省略號樣式）
word-break: break-all; （如果文本中有英文，可以使一個單詞能夠在換行時進行拆分）
優點
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
短板
無法識別文字的長短，無論文本是否溢出范圍，一直顯示省略號
省略號顯示可能不會剛剛好，有時會遮住一半文字，跟文字沒有貼合的很緊密
適用場景
文字內容較多，確定文字內容一定會超過容器的
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
1
2
3
.demo {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
word-break: break-all;
}
.demo::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
/ 為了展示效果更好 /
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
多行文本溢出省略（Float）
核心 CSS 語句
line-height: 20px；（結合元素高度,高度固定的情況下,設定行高, 控制顯示行數）
overflow: hidden；（文本溢出限定的寬度就隱藏內容）
float: right/left；（利用元素浮動的特性實現）
position: relative；（根據自身位置移動省略號位置, 實現文本溢出顯示省略號效果）
word-break: break-all；（如果文本中有英文，可以使一個單詞能夠在換行時進行拆分）
優點
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
文本溢出范圍才顯示省略號，否則不顯示省略號
短板
省略號顯示可能不會剛剛好，有時會遮住一半文字，跟文字沒有貼合的很緊密
適用場景
文字內容較多，確定文字內容一定會超過容器的
Demo
<div class="demo">
<div class="text">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
</div>
.demo {
height: 40px;
line-height: 20px;
overflow: hidden;
}
.demo .text {
float: right;
margin-left: -5px;
width: 100%;
word-break: break-all;
}
.demo::before {
float: left;
width: 5px;
content: "";
height: 40px;
}
.demo::after {
float: right;
content: "...";
height: 20px;
line-height: 20px;
padding-right: 5px;
text-align: right;
width: 3em;
margin-left: -3em;
position: relative;
left: 100%;
top: -20px;
padding-right: 5px;
/ 為了展示效果更好 /
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0)),
to(white),
color-stop(50%, white)
);
background: -moz-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -o-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -ms-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
}
原理
keyCode 對于keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。 因此我們可以根據keycode返回的字符碼來判斷用戶所按下的鍵，下面就是一個用于測試上下左右按鍵的js代碼，經過我的測試之后，返回37 38 39 40；
window.onload = function(){
var box = document.getElementById("box");
document.onkeydown = function(event){
event = event || window.event;
console.log(event.keyCode);
}
};
3
3.方塊的移動實際上就是坐標的改變，因此需要offsetLeft 和offsetTop 來獲得當前方塊的坐標，然后將坐標進行一定的更改，就可以實現移動的效果了，下面給出代碼
window.onload = function() {
document.onkeydown = function(event) {
event = event || window.event;
//設置移動速度
var speed = 10;
//當ctrl和方向按鍵同時按下時，提升移動速度
if(event.ctrlKey) {
speed = 50;
}
//獲取div
var box01 = document.getElementById("box01");
switch(event.keyCode) {
/*keyCode返回按下按鍵的編碼
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
};
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box01 {
width: 100px;
height: 100px;
background-color: #008000;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function() {
//獲取div
var box01 = document.getElementById("box01");
//設置移動速度
var speed = 10;
//設置移動的方向
var dir = 0;
setInterval(function() {
switch(dir) {
/*keyCode返回按下按鍵的編碼
* 37 向左
* 38向上
* 39向右
* 40向下
*/
case 37:
box01.style.left = box01.offsetLeft - speed + "px";
break;
case 39:
box01.style.left = box01.offsetLeft + speed + "px";
break;
case 38:
box01.style.top = box01.offsetTop - speed + "px";
break;
case 40:
box01.style.top = box01.offsetTop + speed + "px";
break;
}
}, 50)
document.onkeydown = function(event) {
event = event || window.event;
//當ctrl和方向按鍵同時按下時，提升移動速度
if(event.ctrlKey) {
speed = 50;
} else {
speed = 10;
}
//使dir等于keycode的值
dir = event.keyCode;
//當鼠標松開時，停止移動 ---如果不寫這一個會造成無法停止移動的效果
document.onkeyup = function() {
dir = 0;
};
};
};
</script>
</head>
<body>
<div id="box01"></div>
</body>
</html>
————————————————
版權聲明：本文為CSDN博主「loving-cat」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42878211/article/details/104558443
藍藍設計的小編 http://www.syprn.cn