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最基础的案例,花费了不少的时间整理的,正所谓时间就是金钱,满满的都是财富!不能是金钱所能衡量的!!!

完结!

原文地址:https://www.cnblogs.com/woheni/p/11307802.html

时间: 2024-10-16 16:04:26

javascript基础案例解析的相关文章

JavaScript基础--小案例:在网页指定位置弹出错误信息(十二)

案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! 1 <script languag="javascript" type="text/javascript"> 2 var clearId; 3 function test(){ 4 document.getElementById("showMsg").style.cssText="width:200px;height:50px;left:6

[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285人阅读 评论(1) 收藏 举报  分类: Webkit(34)  JavascriptCore/JIT(3)  版权声明:本文为博主原创文章,未经博主允许不得转载. 看到HorkeyChen写的文章<[WebKit] JavaScriptCore解析--基础篇(三)从脚本代码到JIT编译的代码实现>

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

【Java EE 学习第31天】【JavaScript基础增强】【Ajax基础】【Json基础】

一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使用,所以不推荐使用,最好使用open方法弹窗. (2)open方法. (3)open方法弹窗实例. Base.html文档: <!DOCTYPE html> <html> <head> <title>Base.html</title> <met

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript基础:DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心

JavaScript基础三

1.10 关于DOM的事件操作 1.10.1 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 1.10.2 事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.事件.事件驱动程序. 比

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

javascript基础语法——词法结构

× 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫:而说它复杂,是因为要真正掌握它则需要数年时间.实际上,前端工程师很大程度上就是指javascript工程师.前端入门容易精通难,说的是前端,更指的是javascript.本文是javascript基础语法的第一篇——词法结构 与java关系 关于javascript有这样一个说法,java和jav