JavaScript 归纳
MDN
本文以 NodeJS 为交互解释器实验 尽量遵循 ES6 标准
javascript 重点
1、javascript 是单线程，通过 EventLoop 实现模拟异步，其中包括宏任务，微任务
2、尽可能最多使用 let , var 缩小作用域
3、原型链
4、写 javascript 在大多数时候我们是在 避免如何陷入陷阱 (难怪别人在说 辣鸡语言，毁我青春。。。)
5、期待 js 新的标准会越来越规范，毕竟 javascript 已经盘踞许久，在浏览器端具有很多优势
较快： JavaScript语言精粹
经典： JavaScript 红宝书 javascript 高级程序设计
一些缺陷
false == 0; // true
false === 0; // false
> console.log(isNaN(NaN))
true
undefined
> console.log(NaN===NaN)
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
null和undefined
null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。
在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。
JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
'use strict';
var arr = [[1, 2, 3], [400, 500, 600], '-'];
var x = arr.splice(1,1).pop().splice(1,1)
console.log(x); // x应该为500
arr.splice(1,1).pop().slice(1,2)
Array提供了一种顺序存储一组元素的功能，并可以按索引来读写。
练习：在新生欢迎会上，你已经拿到了新同学的名单，请排序后显示：欢迎XXX，XXX，XXX和XXX同学！：
'use strict';
var arr = ['小明', '小红', '大军', '阿黄'];
first = arr.sort().slice(0,arr.length-1).join(',');
last = arr.sort()[arr.length-1];
console.log(`欢迎${first}和${last}同学!`);
> xiaoming = { name: '小明',
... birth: 1990,
... school: 'No.1 Middle School',
... height: 1.7,
... weight: 65,
... score: null }
{ name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.7,
weight: 65,
score: null }
> for(var key in xiaoming){
... if(xiaoming.hasOwnProperty(key)){
..... console.log(key);}
... }
name
birth
school
height
weight
score
JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true
'use strict';
var height = parseFloat(prompt('请输入身高(m):'));
var weight = parseFloat(prompt('请输入体重(kg):'));
var bmi = Math.pow(weight/height,2);
if (bmi<18.5){
console.log('太轻')
}else if(bmi<25&&bmi>=18.5){
console.log('正常')
}else if(bmi>=25&&bmi<28){
console.log('过重')
}else if(bmi>=28&&bmi<32){
console.log('肥胖')
}else{
console.log('严重肥胖')
}
利用for循环计算1 * 2 * 3 * ... * 10的结果：
var i;
arr = [1]
for(i=2;i<=10;i++){
arr = arr.concat(i);
}
x = arr.reduce((x,y)=>x*y);
if (x === 3628800) {
console.log('1 x 2 x 3 x ... x 10 = ' + x);
}
else {
console.log('计算错误');
}
内置foreach遍历 ， for(var x of arr) 反而用得少
'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index+'---'+array);
});
> arr.forEach(function(element,index,array){
... console.log(`${element}, index = ${index} array = ${array}`)
... })
大军, index = 0 array = 大军,小明,小红,阿黄
小明, index = 1 array = 大军,小明,小红,阿黄
小红, index = 2 array = 大军,小明,小红,阿黄
阿黄, index = 3 array = 大军,小明,小红,阿黄
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
> m.forEach(function(value,key,map){
... console.log(`key=${key},value= ${value},map = ${map}`)})
key=1,value= x,map = [object Map]
key=2,value= y,map = [object Map]
key=3,value= z,map = [object Map]
似曾相见，何其相似！ arguments , rest 。。。 这玩意儿不就是 java的 可变参数，python 的 *args , **kw 么。。。
> var abs = function(args){
... if(arguments.length===0){
..... return 0;}
... else if(args>=0){
..... return args}
... else {return -args}
... }
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
> function demo(a,b,...rest){
... console.log(`a=${a},b=${b},rest=${rest}`)}
undefined
> demo(1,2,'frank',3,4,5)
a=1,b=2,rest=frank,3,4,5
function sum(...rest) {
var sum = 0;
for(var arg of rest){
sum += arg;
}
return sum
}
var demo = function(a,b,...rest){
if(arguments.length===0){
return 0
}else if(arguments.length===1){
return a
}else if(arguments.length===2){
return a+b;
}else{
let sum = 0;
rest.forEach(function(element){
sum+=element;
})
return sum;
}
}
> var demo = function(a,b,...rest){
... if(arguments.length===0){
..... return 0
..... }else if(arguments.length===1){
..... return a
..... }else if(arguments.length===2){
..... return a+b;
..... }else{
..... let sum = 0;
..... rest.forEach(function(element){
....... sum+=element;
....... })
..... return sum;
..... }
... }
undefined
> demo(1,2,3,4)
高阶函数
> function absAdd(a,b,abs){
... return abs(a) + abs(b);}
undefined
> var abs = Math.abs;
undefined
> absAdd(-3,-2,abs)
5
map , reduce 累乘
'use strict';
function product(arr) {
return arr.reduce(function(x,y){
return x*y;
});
}
// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
console.log('测试通过!');
}
else {
console.log('测试失败!');
}
var arr = [1, 3, 5, 7, 9]
parseInt(arr.map(String).reduce(function(x,y){return x+y;}))
练习
请把用户输入的不规范的英文名字，变为首字母大写，其他小写的规范名字。输入：['adam', 'LISA', 'barT']，输出：['Adam', 'Lisa', 'Bart']。
'use strict';
function normalize(arr) {
return arr.map(function(element){
return element.substring(0,1).toUpperCase()+element.substring(1).toLowerCase();
});
}
// 测试:
if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
console.log('测试通过!');
}
else {
console.log('测试失败!');
}
'use strict';
function normalize(arr) {
return arr.map(s=>{
return s[0].toUpperCase()+s.slice(1).toLowerCase();
});
}
// 测试:
if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
console.log('测试通过!');
}
else {
console.log('测试失败!');
}
> var
... r,
... arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
undefined
> arr
[ 'apple',
'strawberry',
'banana',
'pear',
'apple',
'orange',
'orange',
'strawberry' ]
> r = arr.filter(function(element,index,self){
... return self.indexOf(element) === index;});
[ 'apple', 'strawberry', 'banana', 'pear', 'orange' ]
> r
[ 'apple', 'strawberry', 'banana', 'pear', 'orange' ]
'use strict';
var arr = ['1', '2', '3'];
var r;
r = arr.map(v=>v*1).reduce((x,y)=>x+y);
'use strict';
function get_primes(arr) {
return arr.filter(function(element,index,self){
if(element<=1) return false;
var flag = true;
for(let i=2;i<element;i++){
if(element%i===0) {flag = false;break;}
}
return flag;
});
}
// 测试:
var
x,
r,
arr = [];
for (x = 1; x < 100; x++) {
arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
console.log('测试通过!');
} else {
console.log('测试失败: ' + r.toString());
}
日期
var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
> var Student = {
... name:'Robot',
... height:1.5,
... birth:1990,
... age:function(){
..... var y = new Date().getFullYear();
..... return y-this.birth;
..... }
... }
undefined
> Student
{ name: 'Robot', height: 1.5, birth: 1990, age: [Function: age] }
> s = Student
{ name: 'Robot', height: 1.5, birth: 1990, age: [Function: age] }
> s.age
[Function: age]
> s.age()
28
> var xiaoming = {
... name:'小明'
... }
undefined
> xiaoming
{ name: '小明' }
> xiaoming.__proto__ = Student;
{ name: 'Robot', height: 1.5, birth: 1990, age: [Function: age] }
> xiaoming.age()
28
> var Bird = {
... fly:function(){
..... console.log('flying...');}
... }
undefined
> xiaoming.__proto__ = Bird
{ fly: [Function: fly] }
> xiaoming.fly()
flying...
undefined
> xiaoming.age()
TypeError: xiaoming.age is not a function
> function createStudent(name){
... var s = Object.create(Student);
... s.name = name;
... return s}
undefined
> xiaoming = createStudent('小明');
{ name: '小明' }
> xiaoming.age();
28
>
请利用构造函数定义Cat，并让所有的Cat对象有一个name属性，并共享一个方法say()，返回字符串'Hello, xxx!'：
'use strict';
function Cat(name){
this.name = name;
}
Cat.prototype.say = function(){
return `Hello, ${this.name}!`
}
// 测试:
var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A梦');
if (kitty && kitty.name === 'Kitty' && kitty.say && typeof kitty.say === 'function' && kitty.say() === 'Hello, Kitty!' && kitty.say === doraemon.say) {
console.log('测试通过!');
} else {
console.log('测试失败!');
}
练习
对于一个已有的HTML结构：
Haskell
JavaScript
Python
Ruby
Scheme
<!-- HTML结构 -->
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
按字符串顺序重新排序DOM节点：
// sort list:
var i,child;
list = document.getElementById('test-list');
arr = []
children = list.children;
for(i=0;i<children.length;i++){
arr.push(children[i]);
}
arr.sort((e1,e2)=>{
text1 = e1.innerText;
text2 = e2.innerText;
if(text1>text2){
return 1;
}
else if (text2>text1){
return -1;
}
else return 0;
})
for(i=0;i<arr.length;i++){
list.appendChild(arr[i]);
}
// 测试:
;(function () {
var
arr, i,
t = document.getElementById('test-list');
if (t && t.children && t.children.length === 5) {
arr = [];
for (i=0; i<t.children.length; i++) {
arr.push(t.children[i].innerText);
}
if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
console.log('测试通过!');
}
else {
console.log('测试失败: ' + arr.toString());
}
}
else {
console.log('测试失败!');
}
})();
<!-- HTML结构 -->
<ul id="test-list">
<li>JavaScript</li>
<li>Swift</li>
<li>HTML</li>
<li>ANSI C</li>
<li>CSS</li>
<li>DirectX</li>
</ul>
// TODO
var arr = ['JavaScript','CSS','HTML'];
var list = [];
var ul = document.getElementById('test-list');
var children= ul.children;
var i,j;
for(i=0;i<children.length;i++){
console.log(children[i].innerText);
for(j=0;j<arr.length;j++){
if(arr[j]===children[i].innerText){
list.push(children[i]);
}
}
}
while(ul.hasChildNodes()) //当div下还存在子节点时 循环继续
{
ul.removeChild(ul.firstChild);
}
for(i=0;i<list.length;i++){
ul.appendChild(list[i]);
}
// 测试:
;(function () {
var
arr, i,
t = document.getElementById('test-list');
if (t && t.children && t.children.length === 3) {
arr = [];
for (i = 0; i < t.children.length; i ++) {
arr.push(t.children[i].innerText);
}
if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
console.log('测试通过!');
}
else {
console.log('测试失败: ' + arr.toString());
}
}
else {
console.log('测试失败!');
}
})();
利用JavaScript检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：
用户名必须是3-10位英文字母或数字；
口令必须是6-20位；
两次输入口令必须一致。
<!-- HTML结构 -->
<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
<p id="test-error" style="color:red"></p>
<p>
用户名: <input type="text" id="username" name="username">
</p>
<p>
口令: <input type="password" id="password" name="password">
</p>
<p>
重复口令: <input type="password" id="password-2">
</p>
<p>
<button type="submit">提交</button> <button type="reset">重置</button>
</p>
</form>
'use strict';
var checkRegisterForm = function () {
// TODO:
var userName = document.getElementById('username').value;
var userNameRegEx = /[a-zA-Z\d]{3,10}/;
var password = document.getElementById('password').value;
var passwordRegEx = /.{6,20}/;
var password_2 = document.getElementById('password-2').value;
var errorInfo = document.getElementById('test-error');
if(!userNameRegEx.test(userName)){
errorInfo.innerText = '用户名必须是3-10位英文字母或数字';
return false;
}else if(!passwordRegEx.test(password)){
errorInfo.innerText = '口令必须是6-20位';
return false;
}else if(!(password === password_2)){
errorInfo.innerText = '两次输入口令必须一致';
return false;
}
return true;
}
// TODO:
var userName = document.getElementById('username').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('password-2').value;
var testError = document.getElementById('test-error');
console.log(userName);
console.log(password);
console.log(rePassword);
var userNameRegEx = /^\w{3,10}$/
var passwordRegEx = /^.{6,20}$/
console.log(userNameRegEx.test(userName) && passwordRegEx.test(password) && password === rePassword)
var flag = true;
if(!userNameRegEx.test(userName)){
testError.innerText = '用户名必须是3-10位英文字母或数字';
flag = false;
}else if(!passwordRegEx.test(password)){
testError.innerText = '口令必须是6-20位';
flag = false;
}else if(password !== rePassword){
testError.innerText = '两次输入口令必须一致。';
flag = false;
}
return flag;
}
// 测试:
;(function () {
window.testFormHandler = checkRegisterForm;
var form = document.getElementById('test-register');
if (form.dispatchEvent) {
var event = new Event('submit', {
bubbles: true,
cancelable: true
});
form.dispatchEvent(event);
} else {
form.fireEvent('onsubmit');
}
})();
原来 javascript 这么多 魅力的遗憾
总结一下，有这么几条规则需要遵守：
不要使用new Number()、new Boolean()、new String()创建包装对象；
用parseInt()或parseFloat()来转换任意类型到number；
用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；
typeof操作符可以判断出number、boolean、string、function和undefined；
判断Array要使用Array.isArray(arr)；
判断null请使用myVar === null；
判断某个全局变量是否存在用typeof window.myVar === 'undefined'；
函数内部判断某个变量是否存在用typeof myVar === 'undefined'。
最后有细心的同学指出，任何对象都有toString()方法吗？null和undefined就没有！确实如此，这两个特殊值要除外，虽然null还伪装成了object类型。
更细心的同学指出，number对象调用toString()报SyntaxError：
123.toString(); // SyntaxError
遇到这种情况，要特殊处理一下：
123..toString(); // '123', 注意是两个点！
(123).toString(); // '123'
// 原型重点
> function Student(props){
... this.name = props.name||'name_placeholder';
... this.grade = props.grade||60;
... }
undefined
> Student
[Function: Student]
> Student.prototype.doHomework=function(){
... console.log(`${this.name} do homework...`);
... }
[Function]
> var xiaoming = new Student({name:'xiaoming'});
undefined
> var xiaohong = new Student({name:'xiaohong',grade:99})
undefined
> xiaoming.prototype.doHomework === xiaohong.prototype.doHomework;
TypeError: Cannot read property 'doHomework' of undefined
> xiaoming.__proto__.doHomework === xiaohong.__proto__.doHomework;
true
> function inherits(Child,Parent){
... var IntermediateFunction = function(){}
... // 中间过度函数原型指向Parent.prototype
... Intermediate.prototype = Parent.prototype;
... // Child.prototype 指向 IntermediateFunction 对象;
... Child.prototype = new IntermediateFunction();
... // 修复 Child.prototype的构造方法指向
... Child.prototype.constructor = Child;
... }
undefined
> inherits(Senior,Student);
> function Senior(props){
... Student.call(this,props);
... this.subjectType = props.subjectType||'理科';}
undefined
> var senior = createSenior({name:'frank'});
> Senior.prototype.getGrade = function(){
... return this.grade;}
[Function]
> senior.getGrade();
60
window对象有innerWidth和innerHeight
outerWidth和outerHeight属性
navigator对象表示浏览器的信息，最常用的属性包括：
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
navigator对象表示浏览器的信息，最常用的属性包括：
navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：
var width;
if (getIEVersion(navigator.userAgent) < 9) {
width = document.body.clientWidth;
} else {
width = window.innerWidth;
}
但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：
var width = window.innerWidth || document.body.clientWidth;
screen对象表示屏幕的信息，常用的属性有：
screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
location.assign()
location.href
location.reload()
服务器设置Cookie httpOnly
history.back();
history.forward();
任何情况，你都不应该使用history这个对象了。
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
<dt>摩卡</dt>
<dd>热摩卡咖啡</dd>
<dt>酸奶</dt>
<dd>北京老酸奶</dd>
<dt>果汁</dt>
<dd>鲜榨苹果汁</dd>
</dl>
var menu = document.getElementById('drink-menu');
var drinks = menu.children;
var s = '提供的饮料有:';
for(let i=0;i<drinks.length;i++){
var drink = drinks[i];
if(drink.tagName.toLowerCase() === 'dt'){
s = s + drink.innerHTML +','
}else{
//console.log(drink.tagName);
}
}
console.log(s.slice(0,s.length-1));
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
更新
innerHTML
innerText
textContent
插入
var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
这大概是 进阶
对于一个已有的HTML结构：
Haskell
JavaScript
Python
Ruby
Scheme
<!-- HTML结构 -->
<ol id="test-list">
<li class="lang">Scheme</li>
<li class="lang">JavaScript</li>
<li class="lang">Python</li>
<li class="lang">Ruby</li>
<li class="lang">Haskell</li>
</ol>
按字符串顺序重新排序DOM节点：
'use strict';
// sort list:
var list = document.getElementById('test-list');
function makeArray(arr){
if(arr.item){
var len = arr.length;
var array = [];
while(len--){
array[len] = arr[len];
}
return array;
}
return Array.prototype.slice.call(arr);
}
var langs = makeArray(list.children);
langs.sort(function(pre,aft){
var pre_text = pre.innerText.toUpperCase();
var aft_text = aft.innerText.toUpperCase();
return pre_text>aft_text?1:-1;
})
// 清空子节点
function remove(div){
while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
{
div.removeChild(div.firstChild);
}
}
remove(list);
langs.forEach(function(element,index,arr){
console.log(element.innerText);
list.appendChild(element);
})
// 测试:
;(function () {
var
arr, i,
t = document.getElementById('test-list');
if (t && t.children && t.children.length === 5) {
arr = [];
for (i=0; i<t.children.length; i++) {
arr.push(t.children[i].innerText);
}
if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
console.log('测试通过!');
}
else {
console.log('测试失败: ' + arr.toString());
}
}
else {
console.log('测试失败!');
}
})();
> checkStr
[ 'group',
'order',
'sum',
'count',
'distinct',
'avg',
'where',
'union',
'substring' ]
> var reg_ex = eval('/('+checkStr.join('|')+')/')
undefined
> reg_ex.exec(sql)
[ 'distinct',
'distinct',
index: 7,
input: 'select distinct col from a where e=f group by b order by c',
groups: undefined ]
// TODO
var langs = ['JavaScript','HTML','CSS']
var list = document.getElementById('test-list');
var langElements = list.children;
function makeArray(arr){
if(arr.item){
var len = arr.length;
var array = [];
while(len--){
array[len] = arr[len];
}
return array;
}
return Array.prototype.slice.call(arr);
}
var langElementsArray = Array.prototype.slice.call(langElements);
langElementsArray.forEach(function(element){
console.log(element.innerText);
console.log(langs);
if(langs.indexOf(element.innerText)===-1){
list.removeChild(element);
}
})
for(let i=0;i<list.length;i++){
console.log(list[i].innerText);
}
要想不改变用户的输入，可以利用<input type="hidden">实现：
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password');
// 把用户输入的明文变为MD5:
md5_pwd.value = toMD5(input_pwd.value);
// 继续下一步:
return true;
}
</script>
注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。
为了省事，就不引入 jquery 了
<html>
<head>
<script>
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
document.ready(function(){
var fileInput = document.getElementById('test-file-upload');
var filePath = document.getElementById('test-get-filename');
fileInput.addEventListener('change',function(){
var fileName = fileInput.value;
var fileNameRegEx = /^.*.[jpg|png|jpeg|gif]$/
if(!fileName||!(fileNameRegEx.test(fileName))){
alert('上传图片格式不正确!');
}else{
filePath.innerHTML = `<p style='color:red'>${fileName}</p>`
}
})
});
</script>
</head>
<body>
<form method="post" action="http://localhost/test" enctype="multipart/form-data">
<p>
<input type="file" id="test-file-upload" name="test">
</p>
<p>待上传文件: <span id="test-get-filename" style="color:red"></span></p>
</form>
</body>
</html>
javascript:with(document.body){oncontextmenu='';ondragstart='';onselectstart='';onselect='';oncopy='';onbeforecopy='';onmouseup='';}void(0); alert("【网页复制限制已解除】");//在页面上弹出的消息框
如果有来生，一个人去远行，看不同的风景，感受生命的活力。。。
