1.显示时间
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title></head><body> ???<script> ???????//创建时间对象 ???????//var date = new Date(); ???????////获取世界时间，会提示当前时区 ???????//alert(date.toString()); ???????////获取当前时区的当前时间 ???????//alert(date.toLocaleString()); ???????????????//代码分离：一般不将html与js混合写 ???????//定义函数，用于获取时间对象并显示当前时间 ???????function showTime() { ???????????var date = new Date(); ???????????alert(date.toLocaleString()); ???????????return false;//可以让a的跳转不执行 ???????} ???</script> ???????<input type="button" value="显示当前时间" onclick="showTime();"/> ???<hr/> ???点击超链接，执行js脚本，而不进行url跳转 ???<br/> ???方式一：让js函数返回false,在onclick中也返回false; ???????<a href="http://www.itcast.cn" onclick="return showTime();">显示当前时间</a> ???<br/> ???方式二：将href指定成一段脚本 ???<a href="javascript:showTime();">点击显示时间</a> ???<br/></body></html>2.方法的重载（求和）
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title></head><body> ???<script> ???????//不存在方法重载 ???????//后声明的函数会将先声明的函数覆盖 ???????????????function add(a, b) { ???????????alert(a + b); ???????} ???????????????function add(a,b,c) { ???????????alert(a + b + c); ???????} ???????//add(1, 2); ???????????????//可变参数 ???????function sum(a) { ???????????//使用arguments获取所有参数，是一个数组 ???????????//alert(arguments.length);//返回数组的元素个数 ???????????var sum1 = 0; ???????????for (var i = 0; i < arguments.length; i++) { ???????????????sum1 += arguments[i]; ???????????} ???????????alert(sum1); ???????} ???????????????//调用 ???????sum(1, 2, 3,4,5,6); ???</script></body></html>3.匿名函数
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title></head> ???<body> ????????<input type="button" id="btnShow" value="显示"/> ???????<script> ???????????????????????//快捷键：fun,tab ???????????//定义匿名函数，赋值给一个变量 ???????????var f1 = function(a, b) { ???????????????alert(a+b); ???????????}; ??????????????//通过变量调用 ???????????//f1(1, 2); ???????????//典型应用：为事件绑定处理函数，传递回调函数 ???????????//根据id获取页面元素，为它绑定单击事件 ???????????document.getElementById(‘btnShow‘).onclick = function() { ???????????????alert(123); ???????????}; ???????</script> ??????????</body></html>4.闭包
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title></head><body> ???<script> ???????//定义一个函数show ???????function show(name) { ???????????//返回一个函数 ???????????return function () { ???????????????//输出name的值 ???????????????alert(name); ???????????}; ???????} ???????//运行show函数，将返回值赋给f1 ???????//因为返回值是函数，所以f1现在指向一个函数 ???????var f1 = show(‘a‘); ???????//通过f1可以调用匿名函数执行 ???????f1(); ???????????????//闭包：支持在函数内部调用函数之前声明过的变量 ???????//作用域链：变量的作用域在当前函数中，及当前函数内部定义的函数中，形成了一个链条 ???????//建议：避免闭包，每次在用一个变量时，都要先声明再使用 ???</script></body></html>5.原型
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title></head><body> ???<script> ???????//原型：对象的类型 ???????function Person() { ???????????this.Age = 100; ???????} ???????var p1 = new Person(); ???????//p1.Title = ‘abc‘; ???????????????//访问原型 ???????p1.__proto__.Title = ‘abc‘;//为原型注释数据成员 ???????//Person.prototype.Title = ‘abc‘;//功能同上面的代码 ???????var p2 = new Person(); ???????alert(p2.Title); ???</script></body></html>6.数组
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title></head><body> ???<script> ???????//使用[]定义数组 ???????var array1 = [123, ‘abc‘]; ???????array1[0]; ???????//键值对{键:值,...} ???????var array2 = { ???????????????????????name: ‘zhh‘, ???????????age: 18, ???????????gender:‘你猜‘ ???????}; ???????//alert(array2[‘name‘]);//将array2认为是集合，通过键访问值 ???????//alert(array2.name);//将array2认为是json，通过属性访问值 ???????????????//定义json数组 ???????var temp = [{ ???????????title: ‘zhh‘, ???????????age:18 ???????}, { ???????????title: ‘牛头‘, ???????????age:20 ???????}, { ???????????title: ‘马面‘, ???????????age:22 ???????}]; ???????//输出每个对象的title值 ???????for (var index in temp) {//temp是数组，所以index是索引 ???????????alert(temp[index].title); ???????} ???</script></body></html>7.不一样的调用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> ???<title></title> ???<script type="text/javascript"> ???????function f1() { ???????????alert(‘就是这么帅‘); ???????} ???????onload = function () { ???????????//document.getElementById(‘btn‘).onclick = f1; ???????????document.getElementById(‘btn‘).onclick = function () { ???????????????alert(‘哈哈哈没想到吧‘); ???????????}; ???????}; ???????</script></head><body> ???<input type="button" name="name" value="按钮" onclick="f1();" /> ???<input type="button" name="name" value="还是按钮" id="btn" /></body></html>8.对话框
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ???<title></title> ???<script> ???????//alert(‘123‘); ???????//确认框，有"确定"、"取消"两个按钮 ???????//点击确认返回true,点击取消返回false ???????//var result = confirm(‘确认要删除吗？‘); ???????//alert(result); ???????????????//输入框：有一个文本框，一个"确定"按钮，一个"取消"按钮 ???????//点确定则返回文本框中的值，点取消则返回null ???????var result = prompt(‘请输入年龄‘,‘10‘); ???????alert(result); ???</script></head><body></body></html>
JS 经典案例
原文地址：https://www.cnblogs.com/songhe123/p/10463915.html