【JavaScript】跟着pink学习第二天部分案例

news2024/10/7 12:26:29

1.猜数字游戏

三次机会，猜1~50之间的一个整数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }
    var random=getRandom(1,50);
    var i=0;
    while( i<3){
        var num=prompt('你来猜数字，输入1~50之间的数字');
        if (num>random){
            alert('你猜的数字偏大')
        }
        else if (num < random) {alert('你猜的数字偏小')}
        else if (num ==random){alert('你猜对了')}
        i++
    }
    alert('3次机会已使用完毕！')
</script>
</html>

2.统计出现次数最多的字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //通过遍历对象，找到属性值相同的最多的，就是出现次数最多的字符
        var str='asdjugopbnjhuopnjkj';
        var o={};
        for(var i=0;i<str.length; i++){
            var chars=str.charAt(i)//找出字符串的每一个字符
            if(o[chars]){
                o[chars]++;//已存在就进行加一操作
            }else{
                o[chars]=1;
            }
        }
        console.log(o);
        var max=0;
        for(var k in o){
if(o[k]>max){
    max = o[k];
    ch=k;
}

        }
        console.log('出现的次数最多是：'+max)
        console.log('最多的字符是：'+ch)
    </script>
</body>
</html>

3.复杂类型传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function Person(name){
        this.name = name;
    }
    function fa(x){
        console.log(x.name);
        x.name="小明";
        console.log(x.name);
    }
    var p=new Person("小红");
    //按照下面的顺序执行，看看结果：
    console.log(p.name);
    fa(p);
    console.log(p.name);
    // 结果：
    // 小红,小红,小明,小明
</script>
</html>

4. ATM机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var money=100;
    while(cz!=4){
    var cz=prompt("请输入你的操作：\n1.存钱 \n2.取钱\n 3.显示余额\n 4.退出")
    switch (parseInt(cz)){
        case 1:
            var cun=prompt("请输入存入金额：");
          money= money+parseInt(cun);
            alert("你的余额为："+money);
           break;
        case 2:
            var qu=prompt("请输入取钱金额：");
            if (qu<=money) {
            money-=parseInt(qu);
            alert("剩余"+money);}
            else(alert("余额不足"))
            break;
        case 3:
         alert("你的余额为"+money)
       break;
       case 4:
        alert("你已退出")
        break;
        default:
          alert("你输入的不正确");
          break;
                    
    }
}
</script>
</html>

5.显示密码

在这里插入图片描述
我用的是字体图标


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <link rel="stylesheet" href="font/iconfont.css">
    <style>
        @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?jybm1g');
  src:  url('fonts/icomoon.eot?jybm1g#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?jybm1g') format('truetype'),
    url('fonts/icomoon.woff?jybm1g') format('woff'),
    url('fonts/icomoon.svg?jybm1g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
        *{
            padding: 0; margin: 0;
        }
        .box{
            position: relative;
            width: 300px;
            height: 50px;
            border-bottom:1px solid black;
            margin:100px auto;
        }
        .box input{
            width: 260px;
            height: 45px;
            border:0;
            outline:none;
        }
        .box span{
            position: absolute;
  font-family: 'icomoon';
font-size: 25px;
color:black;
top:14px;
right: 13px;
}
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <span id="eye"></span>
        </label>
    <input type="password" name="" id="pwd">
</div>
</body>
<script>
    var flag=0;
    eye.onclick = function(){
        if (flag==0){
        flag = 1;
        eye.innerHTML = ''
        pwd.type='text';
    }
    else {
        pwd.type = "password";
        eye.innerHTML = ''
    flag=0;
}
}
    
</script>
</html>