javascript基础案例解析
学完了JavaScript基础部分，总结出一些基本案例，以备日后查看！
1、九九乘法口诀表：在控制台中输出九九乘法口诀表！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>乘法口诀表</title>
</head>
<body>
<script>
for (var i =1; i<=9; i++) { //i控制行
for (var j =1,str="";j<=i; j++) { //j控制列
str +=j+"x"+i+"="+i*j+" ";
}
console.log(str);
}
</script>
</body>
</html>
2、水仙花数：所谓“水仙花数”是指一个三位数，其各位数字立方和等于该数本身！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水仙花数</title>
</head>
<body>
<script>
for(var i=100; i<1000; i++) {
var hundreds = parseInt(i/100); //定义百位数变量，并赋值
var decade = parseInt(i/10%10); //定义十位数变量，并赋值
var unit = (i%10); //定义个位数变量，并赋值
var sum = Math.pow(hundreds,3)+Math.pow(decade,3)+Math.pow(unit,3); //定义三位数各个数位的立方和赋值给一个新变量
if (sum==i) { //如果i的值等于变量sum的值，那么这个数就是水仙花数
console.log(i); //在控制台中打印该数
}
}
</script>
</body>
</html>
3、轮播图片：利用数组知识，实现简单的轮播效果！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图片</title>
</head>
<body>
<div style="margin-top:200px;margin-left:350px">
<button id="pre" style="position:relative;top:-135px;">上一张</button>
<div id="picture" style="width:400px;height:267px;display:inline-block;"> </div>
<button id="next" style="position:relative;top:-135px;">下一张</button>
</div>
<script>
var imgs=['11.jpg','22.jpg','33.jpg','44.jpg','55.jpg']; //创建数组存放五张图片
str="<img src="+imgs[4]+">";
picture.innerHTML=str; //将数组中的五张图片获取到页面中
pre.onclick=function() { //单击上一张按钮时触发的事件
console.log(imgs);
var img=imgs.splice(4,1); //删除
imgs.splice(0,0,String(img)); //添加
console.log(imgs); //打印
str="<img src="+imgs[0]+">";
picture.innerHTML=str; //获取
}
next.onclick=function() { //单击下一张按钮时触发的事件
var img=imgs.splice(0,1);
imgs.splice(4,0,String(img));
str="<img src="+imgs[4]+">";
picture.innerHTML=str;
}
</script>
</body>
</html>
4、字符串拼接：给周一到周五每个字符串前拼接 "星期"，周六周末替换：“今天休息”！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历</title>
</head>
<body>
<script>
var week=['日','一','二','三','四','五','六'];
//给周一到周五每个字符串前拼接 "星期"，周六周末替换：“今天休息”
for(var i=0;i<week.length;i++) { // 通过遍历查找数组中i
if (week[i]=='六'||week[i]=='日') { //如果数组中i取值为六或日
week[i]='今天休息'; //那么今天时休息日
}else {
week[i]="星期"+week[i]; //否则显示日期星期几
}
}
</script>
</body>
</html>
//
5、遍历：输出数组中最大和最小的数，并将原数组从小到大排序！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var nums=[16,6,45,71,92,25,89,57,23]; //创建一个数组
//遍历，输出数组中最大和最小的数！
for (var i=1,min=max=nums[0];i<nums.length;i++) {
//遍历数，创建临时变量max保存最大的值和最小的值并初始化为0号元素
if (nums[i]>max) {
//如果遍历到的当前元素大于max,就将当前元素的值赋值给max
max=nums[i];
}else if (nums[i]<min) {
//否则如果当前元素小于min，就将当前元素赋值给min
min=nums[i]
}
}
console.log("nums中最大的数是"+max+"\n最小的数是"+min); //将原数组排序：从小到大
for (var j=nums.length-1;j>0;j--) { //循环遍历数组
for (var i=0;i<j;i++) {
if (nums[i]>nums[i+1]) { //如果前一个数大于后面的数，按位取反
var temp=nums[i];
nums[i]=nums[i+1];
nums[i+1]=temp;
}
}
}
console.log(nums); //打印出排序后的数组
</script>
</body>
</html>
6、字符串与Unicode编码互转：将以代码中的字符串信息中的每个字符转为对应的unicode编码，再拼接为一个codes！并将获取到的codes编码解码为原信息！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>trans</title>
</head>
<body>
<script>
var msg="3306，不见不散！";
//将以上信息，每个字符转为对应的unicode码，再拼接为一个codes
//遍历字符串，将每次遍历到的字符msg[i]，
for(var i=0,codes="";i<msg.length;i++){
//将当前msg[i]转为unicode拼接到codes，
codes+=msg.charCodeAt(i)+100000;//将每个字符的unicode编码转为6位数
}
//输出拼接的codes
console.log(codes);
//发送 //将获取到的codes编码解码为原信息
//循环遍历codes，每6位选取一次
for (var i=0,nmsg="";i<codes.length; i+=6) {
nmsg+=String.fromCharCode(codes.substr(i,6).slice(1));
}
console.log(nmsg);
</script>
</body>
</html>
7、sort排序：手写sort方法，并定义其比较器函数(作为参数传递给sort使用)！代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script>
// 将数组[3, 3, 5, 6, "A", "a"] 从小到大排序
function sort(arr,comp){
for(var j=arr.length-1;j>0;j--){
for(var i=0;i<j;i++){
if(comp){
if(comp(arr[i],arr[i+1])>0){
var temp=arr[i];
arr[i]=arr[i+1];
arr[i+1]=temp;
}else if(isNaN(arr[i])&&String(arr[i])>String(arr[i+1])){
var temp=arr[i];
arr[i]=arr[i+1];
arr[i+1]=temp;
}
}
else{
if(String(arr[i])>String(arr[i+1])){
var temp=arr[i];
arr[i]=arr[i+1];
arr[i+1]=temp;
}
}
}
}
}
var arr = [6,3,"a",3,5,"A"];
function c1(a,b){return b-a};
sort(arr);
console.log(arr);// 正确排序结果[3, 3, 5, 6, "A", "a"]
</script>
</body>
</html>
8、验证正则：验证是否符合正则：6-12位 的字母数字下划线组合！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
<script>
//请用户输入一个用户名
var uname=prompt("用户名");
//验证是否符合正则：6-12位 的字母数字下划线组合
var reg=/^\w{6,12}$/;
//如果验证通过，提示ok
if (reg.test(uname)) {
alert("ok");
}else {
alert("error:格式错误");
}
//否则：error，格式不正确
</script>
</body>
</html>
9、分支结构：利用if elseif语句判断不同的结果执行对于的操作！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if</title>
</head>
<body>
//根据考试成绩获得相应的奖惩
<script>
var score=prompt("请输入您的成绩");
score=parseInt(score);
//方法1：标准格式
if(70>score&&score>=60){
alert("自行车");
}else if(80>score&&score>=70){
alert("小刀电动车");
}else if(90>score&&score>=80){
alert("BYD");
}else if(100>score&&score>=90){
alert("BWM");
}else if(score==100){
alert("=B=");
}else if(score>100){
alert("出国");
}
else {
alert("跪键盘");
}
//方法2：三目运算法则
alert((70>score&&score>=60)?"自行车":(80>score&&score>=70)?"小刀电动车":(90>score&&score>=80)?"BYD":(100>score&&score>=90)?"BWM":(score==100)?"=B=":(score>100)?"出国":"跪键盘");
</script>
</body>
</html>
10、验证码：从大写字母，小写字母，数字中随机选取4个字符，拼接为一个验证码！让用户输入一个验证码并验证！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码</title>
</head>
<body>
<script>
//封装函数getcode;
function getCode() {
//从大写字母，小写字母，数字中随机选取4个字符，拼接为一个验证码
//生成一个0-n的随机数var r=parseInt(Math.random()*(n+1))
//将所有备选字符压入一个数组
//创建一个空数组chars,用于保存备选的字符
var chars=[];
//循环0-9数字的Unicode编码转换为对于字符，并压入chars
for (var i=48;i<=57;i++) {
chars.push(String.fromCharCode(i))
}
//循环将A-Z字母的Unicode编码转换为对应字符，并压入chars
for (var i=65;i<=90;i++) {
chars.push(String.fromCharCode(i))
}
//循环将a-z字母的Unicode编码转换为对应字符，并压入chars
for (var i=97;i<=122;i++) {
chars.push(String.fromCharCode(i))
}
//循环从chars中取出4个随机字符，将其拼接在字符串code中
for (var i=0,code="";i<4;i++) {
//生成随机数r
var r=parseInt(Math.random()*62)
//从chars中取出r的字符，拼接到code
code+=chars[r];
}
return code;
}
//循环
do{
var code=getCode();
var n=prompt("请输入验证码"+code+"输入exit退出");
//如果输入正确（注意大小写）
if (n.toLowerCase()==code.toLowerCase()) {
//提示验证通过，并退出循环
alert("验证通过");
break;
//否则,如果用户输入exit，也可以退出
}else if (n.toLowerCase()=="exit") {
//提示放弃登录
alert("放弃登录");
break;
//否则，提示验证失败，重新输入
}else {
//重新输入时需要更换新的验证码
alert("验证失败，请重新输入");
}
//否则循环一直执行
}
while(1)
</script>
</body>
</html>
以上就是JavaScript最基础的案例，花费了不少的时间整理的，正所谓时间就是金钱，满满的都是财富！不能是金钱所能衡量的！！！
完结！
javascript基础案例解析的更多相关文章
- [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析
[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- JavaScript基础三
1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数. ...
- 2、JavaScript 基础二 （从零学习JavaScript）
11.强制转换 强制转换主要指使用Number.String和Boolean三个构造函数,手动将各种类型的值,转换成数字.字符串或者布尔值. 1>Number强制转换 参数为原始类型值的转换规 ...
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
- javascript基础入门知识点整理
学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...
- JavaScript基础入门10
目录 JavaScript 基础入门10 正则表达式 为什么使用正则表达式? 正则表达式的应用场景 如何创建一个正则表达式 基础语法 具有特殊意义的转义字符 量词 字符类 贪婪模式 练习 邮箱验证 中 ...
- JavaScript基础入门06
目录 JavaScript 基础入门06 Math 对象 Math对象的静态属性 Math对象的静态方法 指定范围的随机数 返回随机字符 三角函数 Date对象 基础知识 日期对象具体API 构造函数 ...
随机推荐
- Quartz每次调度时被执行两次
[关键字:重复执行.重复调用.每次执行两次.执行2次] 前言: 先说一下,项目背景.由于组内某成员在用Maven搭建项目时不规范,导致项目的名称与实际访问项目名称不一致.在部署项目时,必需要配一下虚拟 ...
- spark入门（三）键值对操作
1 简述 Spark为包含键值对类型的RDD提供了一些专有的操作.这些RDD被称为PairRDD. 2 创建PairRDD 2.1 在sprk中,很多存储键值对的数据在读取时直接返回由其键值对数据组成 ...
- Linux部署项目常用命令
前言:一般项目都会使用阿里云等服务器作为云服务器.此时必不可免会使用到一系列常用的命令.这里我整合一下常用的命令 1.一般链接阿里云服务器常用的的是xshell跟xftp. 下载路径:https:// ...
- 多线程总结-同步之synchronized关键字
目录 1.为什么要使用synchronized? 2.synchronized锁什么,加锁的目的是什么? 3.代码示例 3.1锁this和临界资源对象 3.2锁class类对象 3.3 什么时候锁临界 ...
- EnjoyingSoft之Mule ESB开发教程第四篇：Mule Expression Language - MEL表达式
目录 1. MEL的优势 2. MEL的使用场景 3. MEL的示例 4. MEL的上下文对象 5. MEL的Variable 6. MEL访问属性 7. MEL操作符 本篇主要介绍Mule表达式语言 ...
- 使用MyBatis在控制台动态打印执行的sql语句
使用MyBatis进行数据库操作的时候,sql语句都是写在相应的mapper文件中,参数也是使用占位符取值表示的,mapper文件中看不到实时执行的完整sql,有时候sql语句错误或者参数类型不对的时 ...
- 【题解】射击-C++
Description 不难发现,豆豆能从很多事情中去思考数学,于是豆豆父母决定让他去练习射击,这是项需要集中注意力的运动,相信 能够让豆豆暂时脱离数学.学习射击的第一天就让豆豆产生 了浓厚的兴趣,射 ...
- CF39D Cubical Planet-C++
银河系中没有你找不到的东西!有一颗形状为立方体的的行星正在绕着一颗形状为二十面体的恒星运转.现在我们让这颗行星的两个在同一条体对角线上的顶点置于(0,0,0)和(1,1,1)上.有两只苍蝇住在行星上. ...
- webService 的使用
webService Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...
- php laravel5.6引入geetest 行为验证
php laravel5.6引入geetest 行为验证 使用必要性 网站和APP,在所有可能被机器行为攻击的场景,例如但不限于注册.登录.短信接口.查询接口.营销活动.发帖评论等等,都可以部署使用「 ...