整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
//显示
function divBlock(){
document.getElementById("demo01").style.display="block";
}
//隐藏
function divNone(){
document.getElementById("demo01").style.display="none";
}
//显示日期
function onClickEvent01(){
divNone();
document.getElementById('demo').innerHTML = Date();
}
//改变 HTML 内容
function onClickEvent02(){
divNone();
document.getElementById("demo").innerHTML = "Hello JavaScript";
}
//能够改变 HTML 属性值
var number=1;
function onClickEvent03(){
//显示
divBlock();
//改图片大小
if(number==1){
document.getElementById('domeImage').src='images/0001.png';
//改字体大小
document.getElementById("demo").style.fontSize = "25px";
number=2;
}else{
document.getElementById('domeImage').src='images/000.png';
//改字体大小
document.getElementById("demo").style.fontSize = "35px";
number=1;
}
}
//变量
function onClickEvent04(){
//隐藏
divNone();
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML = "z 的值是：" + z;
}
//创建对象
function onClickEvent05(){
//隐藏
divNone();
var person = {
firstName : "liveorverday",
lastName : "Scandy",
age : 30,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
}
//提示
function onClickEvent06(){
//隐藏
divNone();
alert("这是个提示信息！！");
}
//字符串方法
function onClickEvent07(){
//隐藏
divNone();
var str = "Hello JavaScript, welcome to learn javascript";
var strv="";
//方法返回字符串中指定文本首次出现的索引（位置）
var pos = str.indexOf("welcome");
strv=strv+"indexOf："+pos;
//方法返回指定文本在字符串中最后一次出现的索引
var pos01 = str.lastIndexOf("welcome");
strv=strv+"；lastIndexOf："+pos01;
//检索字符串中的字符串
var pos02 = str.search("welcome");
strv=strv+"；search："+pos02;
//slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
var pos03 = str.slice(18,25);
strv=strv+"；slice："+pos03;
// substring() 无法接受负的索引
var pos04 = str.substring(18,25);
strv=strv+"；substring："+pos04;
//substr() 方法 开始位置，第二个参数规定被提取部分的长度。
var pos05 = str.substr(18,7);
strv=strv+"；substr："+pos05;
//replace() 方法用另一个值替换在字符串中指定的值 替换字符串内容
var pos06 = str.replace("welcome","liveorverday");
strv=strv+"；replace："+pos06;
//toUpperCase() 把字符串转换为大写
var pos07 = str.toUpperCase();
strv=strv+"；toUpperCase："+pos07;
//toLowerCase() 把字符串转换为小写
var pos08 = str.toLowerCase();
strv=strv+"；toLowerCase："+pos08;
//concat() 连接两个或多个字符串 可用于代替加运算符。下面两行是等效的
var live="连接liveorverday";
var pos09 = str.concat("",live);
strv=strv+"；concat："+pos09;
//trim() 方法删除字符串两端的空白符
var pos10 = str.trim();
strv=strv+"；trim："+pos10;
//charAt() 方法返回字符串中指定下标（位置）的字符串
var pos11 = str.charAt(0);
strv=strv+"；charAt："+pos11;
//charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
var pos12 = str.charCodeAt(0);
strv=strv+"；charCodeAt："+pos12;
//length 字符串的长度
var pos13 = str.length;
strv=strv+"；length："+pos13;
document.getElementById("demo").innerHTML = strv;
}
//数组
function onClickEvent08(){
//隐藏
divNone();
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
}
//数组排序
function onClickEvent09(){
//隐藏
divNone();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
//随机
function onClickEvent10(){
//隐藏
divNone();
document.getElementById("demo").innerHTML = Math.random();
}
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<body>
<h2>JavaScript实例案例</h2>
例子一 : <button type="button" onclick="onClickEvent01()">显示日期和时间</button> <br/>
例子二 : <button type="button" onclick="onClickEvent02()">改变 HTML 内容</button> <br/>
例子三 : <button type="button" onclick="onClickEvent03()">能够改变 HTML 属性值</button> <br/>
例子四 : <button type="button" onclick="onClickEvent04()">变量</button> <br/>
例子五 : <button type="button" onclick="onClickEvent05()">创建对象</button> <br/>
例子六 : <button type="button" onclick="onClickEvent06()">提示信息</button> <br/>
例子七 : <button type="button" onclick="onClickEvent07()">字符串方法</button> <br/>
例子八 : <button type="button" onclick="onClickEvent08()">数组</button> <br/>
例子九 : <button type="button" onclick="onClickEvent09()">数组排序</button> <br/>
例子十 : <button type="button" onclick="onClickEvent10()">随机</button> <br/>
<!--显示结果-->
<div style="height: 100px;"></div>
显示结果
<div id="demo">你好javascript</div>
<div id="demo01" style="display: none">
<img id="domeImage" border="0" src="images/000.png" height="20%" width="20%" style="text-align:center;"/>
</div>
</body>
</html>
<script type="text/javascript">
//随机
function onClickEvent10(){
//隐藏
divNone();
document.getElementById("demo").innerHTML = Math.random();
}
//数组排序
function onClickEvent09(){
//隐藏
divNone();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}
//数组
function onClickEvent08(){
//隐藏
divNone();
var cars = ["Audi", "BMW", "porsche"];
document.getElementById("demo").innerHTML = cars;
}
//字符串方法
function onClickEvent07(){
//隐藏
divNone();
var str = "Hello JavaScript, welcome to learn javascript";
var strv="";
//方法返回字符串中指定文本首次出现的索引（位置）
var pos = str.indexOf("welcome");
strv=strv+"indexOf："+pos;
//方法返回指定文本在字符串中最后一次出现的索引
var pos01 = str.lastIndexOf("welcome");
strv=strv+"；lastIndexOf："+pos01;
//检索字符串中的字符串
var pos02 = str.search("welcome");
strv=strv+"；search："+pos02;
//slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
var pos03 = str.slice(18,25);
strv=strv+"；slice："+pos03;
// substring() 无法接受负的索引
var pos04 = str.substring(18,25);
strv=strv+"；substring："+pos04;
//substr() 方法 开始位置，第二个参数规定被提取部分的长度。
var pos05 = str.substr(18,7);
strv=strv+"；substr："+pos05;
//replace() 方法用另一个值替换在字符串中指定的值 替换字符串内容
var pos06 = str.replace("welcome","liveorverday");
strv=strv+"；replace："+pos06;
//toUpperCase() 把字符串转换为大写
var pos07 = str.toUpperCase();
strv=strv+"；toUpperCase："+pos07;
//toLowerCase() 把字符串转换为小写
var pos08 = str.toLowerCase();
strv=strv+"；toLowerCase："+pos08;
//concat() 连接两个或多个字符串 可用于代替加运算符。下面两行是等效的
var live="连接liveorverday";
var pos09 = str.concat("",live);
strv=strv+"；concat："+pos09;
//trim() 方法删除字符串两端的空白符
var pos10 = str.trim();
strv=strv+"；trim："+pos10;
//charAt() 方法返回字符串中指定下标（位置）的字符串
var pos11 = str.charAt(0);
strv=strv+"；charAt："+pos11;
//charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
var pos12 = str.charCodeAt(0);
strv=strv+"；charCodeAt："+pos12;
//length 字符串的长度
var pos13 = str.length;
strv=strv+"；length："+pos13;
document.getElementById("demo").innerHTML = strv;
}
//提示
function onClickEvent06(){
//隐藏
divNone();
alert("这是个提示信息！！");
}
//创建对象
function onClickEvent05(){
//隐藏
divNone();
var person = {
firstName : "liveorverday",
lastName : "Scandy",
age : 30,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
}
//变量
function onClickEvent04(){
//隐藏
divNone();
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML = "z 的值是：" + z;
}
//能够改变 HTML 属性值
var number=1;
function onClickEvent03(){
//显示
divBlock();
//改图片大小
if(number==1){
document.getElementById('domeImage').src='images/0001.png';
//改字体大小
document.getElementById("demo").style.fontSize = "25px";
number=2;
}else{
document.getElementById('domeImage').src='images/000.png';
//改字体大小
document.getElementById("demo").style.fontSize = "35px";
number=1;
}
}
//改变 HTML 内容
function onClickEvent02(){
divNone();
document.getElementById("demo").innerHTML = "Hello JavaScript";
}
//显示日期
function onClickEvent01(){
divNone();
document.getElementById('demo').innerHTML = Date();
}
//显示
function divBlock(){
document.getElementById("demo01").style.display="block";
}
//隐藏
function divNone(){
document.getElementById("demo01").style.display="none";
}
</script>
function foo(b) {
var a = b;
return {
a: a,
change: function(b) {
console.log(a, b, this.a);
a = a + b + this.a;
},
output: function() {
console.log(a, this.a, b);
}
}
}
var x = foo(1);
console.log('change before:')
console.log(x.a); // 1;
x.output(); // 1, 1, 1
x.a = 3;
x.change(2); // 1, 2, 3
console.log('after change:');
console.log(x.a); // 3
x.output(); // 6, 3, 1
var x = foo(1); // 执行后，x函数里面返回的对象，里面的属性和值都在执行过程中确定了，作用域范围在代码定义的位置。
console.log('change before:')
console.log(x.a); // 1;
// x.a = 1。因为foo()函数里面返回对象中属性a被赋值为变量a,
// 而变量a在foo(1)执行时被赋值为b也就是1
x.output();
// a = 1, this.a = 1, b = 1
// a, output函数没有变量a，通过作用域链向上查找, 父函数foo中有变量a
// this.a, 函数执行上下文的this指向函数的调用方也就是x对象,x被赋值为1
// b, output也是通过作用域链向上查找到foo里的变量b,是foo里面的形参变量
x.a = 3;
// 修改x.a为3，此时影响的只是x对象中的a属性，并不影响foo函数作用域下a变量
x.change(2);
// a = 1, b = 2, this.a = 3
// a, 仍然是foo第一次被调用时的值，没有被修改，仍然是1
// b，这个b是change函数的形参变量，不是外部的b, b被赋值为2
// this.a，此时this.a也就是x.a，已经被修改为3
// 执行这句后，foo作用域下的a变量被赋值为a+b+this.a=1+2+3=6
console.log('after change:');
console.log(x.a); // 3
// x.a没有受到影响，依然是3
x.output();
// a = 6, this.a = 3, b = 1
// a在执行change(2)时已经被改成6了
// this.a就是x.a，因此是3
// b从output沿作用域开始查找，值仍是1，b没有被改过
.计算10的阶乘：
// 计算10的阶乘
// 声明阶乘，赋值
var jc = 1;
// 创建循环语句
for(i = 1;i <= 10;i++){
jc *= i;
}
// 打印结果
console.log(jc); // 36288002.计算圆的周长、半径：
// 假设半径为80
var r = 80;
// 周长公式
var h = 2*Math.PI*r;
// 结果保留3位小数
var h = h.toFixed(3);
// 面积公式
var s = Math.PI*r*r;
var s = s.toFixed(3);3.为抵抗洪水，战士共战斗89小时，计算89小时为多少天加多少小时：
// 总小时数
var h = 89;
// 天数
var day = parseInt(h/24);
// 余下的小时数
var hour = h%24;4.计算80华氏温度等于多少摄氏度：
// 声明华氏温度hua，赋值80
var hua = 80;
// 计算摄氏度
var she = 5/9.0*(hua-32);
// 保留3位小数
she = she.toFixed(3);5.90度转化为弧度是多少（结果保留3位小数）：
var angle = 90;
//计算弧度
var radian = Math.PI/180*angle;
//弧度值保留3位小数
var radian = radian.toFixed(3);6.输入分数，判定成绩等级(if、switch两种写法)：
//if 写法：
// 手动输入一个成绩
var ach = 10;
// 判断语句
if(ach >= 0 && ach < 60){
console.log("成绩不合格");
}else if(ach >=60 && ach < 80){
console.log("成绩良好");
}else if(ach >=80 && ach < 100){
console.log("成绩优秀");
}else if(ach == 100){
console.log("太棒了孩子");
}else{
console.log("请输入1-100的数字");
}//手动输入一个成绩
var ach= 88;
switch(true){
case ach >= 0 && ach < 60:
console.log("成绩不合格");
break;
case ach >= 60 && ach < 80:
console.log("成绩良好");
break;
case ach >= 80 && ach < 100:
console.log("成绩优秀");
break;
case ach == 100:
console.log("太棒了孩子");
break;
default:
console.log("请输入1-100的数字");
}7.输入月份，显示当月天数，利用case穿透：
//手动赋值
var mon = 6;
//创建分支
switch(mon){
// 2月
case 2:
console.log("闰年29天、平年28天");
break;
// 31天
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log("本月有31天");
break;
// 30天
case 4:
case 6:
case 9:
case 11:
console.log("本月有30天");
break;
default:
console.log("请输入1-12的数字");
}8.根据日期，判断这天是这年的第几天（利用switch穿透）：
var year = 2016;
var mon =2;
var day = 11;
var allday = 0;
switch(mon - 1){
case 11:
allday += 30;
case 10:
allday += 31;
case 9:
allday += 30;
case 8:
case 7:
allday += 31;
case 6:
allday += 30;
case 5:
allday += 31;
case 4:
allday += 30;
case 3:
allday += 31;
case 2:
if(year % 4 == 0 && year % 100 !=0 || year % 400 == 0){
allday += 29;
}else{
allday += 28;
}
case 1:
allday += 31;
break;
}
console.log(allday + day); // 429.入职薪水10k，每年涨幅5%，50年后工资多少？
var sal = 10;
// 创建循环
for(var i = 1;i <= 50;i++){
sal *= 1.05;
}10.打印100以内奇数，并打印所有奇数之和：
var sum = 0;
// 创建循环
for(var i = 1;i <= 100;i++){
// 判断条件
if(i % 2 ==1){
// 打印100内奇数
console.log(i); // 1 3 5 7 ... 97 99
// 计算100内奇数和
sum += i;
}
}11.在页面打印20-80 之间能被 3 整除的数，每5个一行
var j =0;
// 创建循环
for(var i = 20;i <= 80;i++){
// 创建判断
if(i % 3 == 0){
// 打印结果
document.write(i+" ");
j++;
// 结果5个换行
if(j % 5 == 0){
document.write("<br>");
}
}
}12.打印100-200之间所有能被3或7整除的数：
for(var i = 100;i <= 200;i++){
// 创建判断体
if(i % 3 == 0 && i % 7 == 0){
// 打印结果
console.log("100-200之间所有能被3或7整除的数为："+i); // 105 126 147 168 189
}
}13.求1+2!+3!+…+20!的值：
// 声明的初值为0
varsum = 0;
// 创建循环
for(var i = 0;i <= 20;i++){
// 声明加数的初值为1
var num = 1;
// 创建内部循环
for(var j = 1;j <= i;j++){
num *= j;
}
// 求每个加数和
sum += num;
}14.求1/1-1/2+1/3-1/4…1/100的和：
var sum = 0;
// 创建循环
for(var i = 1;i <= 100;i++){
if(i % 2 == 1){
// 奇数倒数
sum += (1/i);
}else{
// 偶数倒数
sum -= (1/i);
}
}15.有一个棋盘，有64个方格，在第一个方格里面放一粒芝麻重量0.00001kg，第二个里面放两粒，第三个里面放4粒，求棋盘上所有芝麻粒之和：
var sum = 0;
var chu;
// 创建循环
for(var i = 0;i < 64;i++){
// 2的i次方累加
sum += Math.pow(2,i);
}
// 换算
chu = sum * 0.00001;16.99乘法表：
// 行
for(var i=1;i<=9;i++){
// 列
for(var j=1;j<=i;j++){
// 打印结果
document.write(i+"*"+j +"="+i*j+" ");
}
// 每行后换行
document.write("<br>");
}17.编写一个函数，计算两个数的和差积商：
// 创建函数
function num(a,b,fh){
// 创建分支
switch(fh){
case "+":
console.log("两个数的和为：" + a+b);
break;
case "-":
console.log("两个数的差为：" + a-b);
break;
case "*":
console.log("两个数的积为：" + a*b);
break;
case "/":
console.log("两个数的商为：" + a/b);
break;
}
}
num(66,88,"*");18.编写一个函数，在页面上打印一个N行M列的表格，表格内容填充0-100的随机数字：
// 创建函数
function bg(m,n){
// 打印表格标签
document.write("<table>");
// 创建行循环
for(var i=0;i<=m;i++){
// 输出行标签
document.write("<tr>");
// 创建列循环
for(var j=0;j<=n;j++){
// 输出列标签
document.write("<td>");
// 输出随机数字
document.write(Math.round(Math.random()*100));
document.write("</td>");
}
document.write("/<tr>");
}
document.write("</table>")
}
bg(5,5);19.将一个篮球从5米高处下落，每次上升为原来的60%，求经过多少次下落，高度小于0.1米：
var h = 5;
var cs= 1;
// 创建循环
while (true) {
h *= 0.6;
// 判断
if(h < 0.1){
// 打印结果
console.log(cs);
// 终止
break;
}
// 次数
cs++;
}20.在页面输入任意数字，点击按钮后计算该数字的阶乘：
function jc (n){
if(n == 1){
return 1;
}
return jc(n - 1)*n;
}
var btn = document.getElementById("btn");
var ipt = document.getElementById("ipt");
btn.onclick = function(){
var m = parseInt(ipt.value);
var result = jc(m);
console.log("此数字的阶乘为："+result);
}21.根据1，1，2，3，5，8，13，21…计算第10位（斐波那契）：
function fn(n){
if(n === 1 || n === 2){
return 1;
}else{
return fn(n - 1) + fn(n - 2);
}
}
var num = fn(10);22.编写一个函数，输入n为偶数时，调用函数求1/2+1/4+1/6+…+1/n;当输入n为奇数时，调用函数1/1+1/3+1/5+…+1/n：
function fn(n){
if (n == 1){
return 1;
}else if(n == 2){
return 1/2;
}
return 1/n + fn(n - 2);
}
var btn = document.getElementById("btn");
var ipt = document.getElementById("ipt");
btn.onclick = function(){
var n = parseInt(ipt.value);
var sum = fn(n);
console.log("和为："+sum);
}23.编写一个函数，计算任意两个数字之间所能组成的奇数的个数，数字必须是个位数，比如：计算0-3之间能组成的奇数是：01,03,13，21,23，31:
function num(n,m){
var count = 0; // 记录奇数的个数
if (n > m){
var i = n;
n = m;
m = i;
}
console.log(n,m);
for(var j = n;j<=m;j++){
if(j%2 == 1){
for(var k=n;k<=m;k++){
var str = ""+k+j;
console.log(str);
// 每产生第一个奇数，就++
count++;
}
}
}
return count;
}24.编写一个函数：4位数，每位数字都加上5，然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换,输入原文，输出密文.例：8848 → 3933:
// 创建函数
function fn(n){
var gw = parseInt(n/1) % 10;
var sw = parseInt(n/10) % 10;
var bw = parseInt(n/100) % 10;
var qw = parseInt(n/1000) % 10;
console.log("您输入的原文是：" + qw,bw,sw,gw);
// 每位数字都加上5，然后用除以10
gw = (gw + 5) % 10;
sw = (sw + 5) % 10;
bw = (bw + 5) % 10;
qw = (qw + 5) % 10;
// 交换十位、百位
var num1 = sw;
sw = bw;
bw = num1;
// 交换个位、千位
var num2 = gw;
gw = qw;
qw = num2;
return "" + qw + bw + sw + gw;
}
console.log("密文为：" + fn(8848));25.编写函数map(arr) 把数组中的每一位数字都增加30%,并返回一个新数组:
*请认真填写需求信息，我们会在24小时内与您取得联系。
