常用js指令及案例

简介: 常用js指令及案例

js输入输出语句


prompt


//这是一个输入框
prompt("请输入姓名");



alert


//弹出警示框,输出的,展示给用户看
alert("计算的结果为");



console


//console控制台输出,给开发者测试用
console.log("console能看到的");



案例->弹出用户名


//用户输入姓名
var username = prompt("输入用户名");
//输出用户名
alert(username);




案例->显示年龄


//用户输入
//prompt获得的数据类型是字符型String
var username = prompt("输入你的年龄");
//输出
alert("你的年龄为"+username+"岁!");




案例->计算年龄


//出生年输入
var year = prompt("输入你的年龄");
//输出年龄
var age = 2021-year;
alert("你的年龄为"+age+"岁!");




案例->计算两数和


//输入第一个值
var num1 = prompt("请输入第一个值");
//输入第二个值
var num2 = prompt("请输入第二个值");
//数据类型转换,相加
var num3 = parseFloat(num1)+parseFloat(num2);
//输出
alert("两个值的和"+num3);





案例->打印用户信息


var name = prompt("请输入姓名");
var age = prompt("请输入年龄");
var work = prompt("请输入工作");
alert("您的姓名:"+name+"\n"+"您的年龄:"+age+"\n"+"您的工作:"+work);



案例->查询水果


var fruit = prompt("请输入你要查询的水果:");
        switch(fruit){
            case '苹果':
                alert('苹果的价格为3.5/斤');
                break;
            case '香蕉':
                alert('香蕉的价格为5/斤');
                break;
            default:
                alert("没有该水果");



案例->学生成绩


var num = prompt('请输入班级的总人数:');
        var sum = 0;
        var average = 0;
        for (var i = 1; i<num;i++){
            var score = prompt('请输入第'+ i + '个学生的成绩');
            //由于从prompt取出来的数据是字符串型的,所以要转化为数字型
            sum = sum + parseFloat(score);
        }
        average = sum/num;
        alert('班级总成绩为'+ sum);
        alert('班级平均分是'+ average);



函数


arguments使用


//arguments 的使用 只有函数才有arguments对象
function fn() {
    console.log(arguments);//里面存储了所以传递过来的实参
    console.log(arguments.length);
    console.log(arguments[2]);
}
fn(1,2,3);
fn(1,3,4,5,6);



利用函数求任意个数的最大值


function getMax() {
      var max = arguments[0];
      for(var i=1;i<arguments.length;i++){
             if(arguments[i]>max){
                    max = arguments[i];
             }
       }
      return max;
       }
console.log(getMax(1,3,4,23,432,4324,2434));


案例->利用函数翻转数组


function reverse(arr) {
            var newArr = [];
            for(var i=arr.length-1;i>=0;i--){
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1,2,4,5,6,7,9]);
        console.log(arr1);


案例->利用函数判断2月天数


function backDay(){
            var year = prompt("请输入年份");
            if(isRunYear(year)){
                alert("当前年份是闰年2月份有29天");
            }else{
                alert("当前年份不是闰年2月份有28天");
            }
        }
        backDay();
        function isRunYear(year) {
            var flag =true;
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ){
                flag=true;
            }
            return flag;
        }


构造函数创建对象


function Star(uname,age,sex){//创建构造函数
        this.name = uname;
        this.age = age;
        this.sex = sex;
    }
    var ldh = new Star('刘德华',18,'男');//调用构造函数返回的是一个对象
    console.log(ldh.name);


案例->猜数字游戏


    function getRandom(min,max) {
        return Math.floor(Math.random()*(max-min+1))+min;
    }
    var random=getRandom(1,10);
    while(true){
        var num =prompt("猜猜这个数是多少?(0-10)");
        if(num>random){
            alert('你猜大了');
        }else if(num<random){
            alert('你猜小了');
        }else{
            alert('你猜对了');
            break;//退出循环
        }
    }


案例->倒计时(时间戳)


function coutDown(time) {
        var nowTime = +new Date();//返回的就是总的毫秒数
        var inputTime = +new Date(time);
        var times = (inputTime - nowTime)/1000;
        var d =parseInt(times / 60 /60 /24);//天
        d = d < 10 ?'0'+ d : d;
        var h =parseInt(times / 60 /60 %24);//时
        h = h < 10 ? '0' + h : h;
        var m =parseInt(times / 60 % 60);//分
        m = m < 10 ? '0' + m : m;
        var  s=parseInt(times % 60);//秒
        s = s < 10 ? '0' + s : s;
        return d + '天' + h + '时' + m + '分' + s
+ '秒'    }
        console.log(coutDown('2021-5-20 17:00:00'));
        // var date = new Date();
        // console.log(date);


案例->数组去重


function unique(arr) {
        var newArr = [];
        for (var i = 0;i<arr.length;i++){
            if(newArr.indexOf(arr[i]) === -1){
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }
    var demo = unique(['blue','green','blue']);
    console.log(demo);
相关文章
|
4月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
42 0
|
4月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
46 11
|
4月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
97 2
一个案例带你从零入门Three.js,深度好文!
|
4月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
244 0
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(一):图片切换案例
Vue.js 2 项目实战(一):图片切换案例
|
4月前
|
数据采集 存储 JavaScript
JS逆向案例:巨潮资讯数据采集
JS逆向案例:巨潮资讯数据采集
65 0