JavaScript day03

最新推荐文章于 2024-05-24 23:45:01 发布
最新推荐文章于 2024-05-24 23:45:01 发布
阅读量32 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li1023055421/article/details/132238485
版权

00、练习

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>人民币</h2>
    <input type="number" name="" id="curry">
    <button id="btn">计算</button>


    <h2>计算器</h2>
    <input type="text" id="su1">
    <select name="" id="act">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="x">x</option>
        <option value="÷">÷</option>
    </select>
    <input type="text" id="su2">
    <button id="eq">=</button>
    <input type="text" id="su3">
</body>
</html>
<script>
    //获取输入人民币的 input
    let rmb = document.getElementById('curry');
    //获取点击计算的按钮
    let cum = document.getElementById('btn');
    console.log( rmb.value );
    let v0 = rmb.value-0;

    //给按钮设置点击事件
    cum.onclick = function(){
        //重新获取用户输入的值，并且隐式转化为number类型
        let v1 = rmb.value-0;
        //100的张数
        let num1 = parseInt(v1/100);
        //除去100元，剩余的金额, 456 余数为56， 查看余数中56中有多少张50面值
        let yu1 = v1%100
        //50的张数
        let num2 = parseInt(yu1/50);
        //
        let yu2 = yu1%50;

        let num3 = parseInt(yu2/20);
        let yu3 = yu2%20;
        
        let num4 = parseInt(yu3/10);
        let yu4 = yu3%10;

        let num5 = parseInt(yu4/5);
        let yu5 = yu4%5;

        alert(num1+'张100元'+num2+'张50元'+num3+'张20元'+num4+'张10元'+num5+'张5元'+yu5+'张1元');
    }


    //获取需要的dom元素
    let su1 = document.getElementById('su1');
    let su2 = document.getElementById('su2');
    let su3 = document.getElementById('su3');
    let act = document.getElementById('act');
    let eq = document.getElementById('eq');

    //点击等号
    eq.onclick = function(){
        let v1 = su1.value -0;
        let v2 = su1.value -0;
        //获取运算符
        let avtVal = act.value;

        if(avtVal=='+'){
            su3.value = v1+v2;
        }
        if(avtVal=='-'){
            su3.value = v1-v2;
        }
        if(avtVal=='x'){
            su3.value = v1*v2;
        }
        if(avtVal=='÷'){
            su3.value = v1/v2;
        }


    };

</script>

01、短路算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短路算法</title>
</head>
<body>
    
</body>
</html>
<script>
/*
逻辑运算的短路算法
表达式1 || 表达式2 表达式1为真的时候，表达式2不会被解析
表达式1 && 表达式2 表达式1为真的时候，表达式2才会被解析

*/
let num = 10;
num>2 && num++;
console.log(num);

let n = 10;
console.log( n<2||n++ );
</script>

02、运算符优先级

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符优先级</title>
</head>
<body>
    
</body>
</html>
<script>
    let bol1 = true;
    let bol2 = false;
    console.log( bol1 + 1 );  //2
    console.log( !bol2 + 1 );  //2
    console.log( 10 + !bol2 );  //11
    console.log( !10 );  // false
    console.log( !0 );  // ture

    /*
    1. !的优先级比 算术运算符的优先级高
    2. boolean数据和number类型的数据运算的时候，布尔类型会隐式转化为number类型，其中 false=>0 ture=>1
    */

    console.log( 10<5+6 || '中午吃啥' );

    let str = 10>(5+6 || '中午吃啥');
    console.log( str );

    /*
    优先级
    1. 小括号 ()
    2. !
    3. 算数运算符
    4. 比较运算符
    5. 逻辑运算符
    6. 赋值运算符

    赋值的简写
    = += -= *= /=
    等于 加等 减等 乘等 除等

    简写形式        含义
    n+=1     =>     n=n+1;
    n-=1     =>     n=n-1;
    n*=1     =>     n=n*1;
    n/=1     =>     n=n/1;

    */

    let n = 10;
    n+=5;  // n = n + 5
    console.log(n);

    n = n + 5;

    //字符串拼接
    let str1 = '日啖荔枝三百颗';
    str1+='每天一碗胡辣汤';
    str1+='每天一碗胡辣汤';
    console.log(str1);
</script>

03、显示转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型的显示转换</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    显示转化
    把数据转化为字符串，使用 String()
    把数据转化为number，使用 Number()
    把数据转化为bollean，使用 Boolean()

    另外，非0即为真
    0, '', null, undefined 都会转化为false

    */
   // 字符串 转 数字
   let num = Number('唐伯虎');
   console.log(typeof num);
    // 数字 转 字符串
   let str = String(1000);
   console.log(typeof str);
   // 把数据转为bool值
   let bol1 = Boolean('唐伯虎');
   console.log(typeof bol1, bol1);
   
   let bol2 = Boolean('');
   console.log(typeof bol2, bol2);

   let bol3 = Boolean('-1');
   console.log(typeof bol3, bol3);
</script>

04、三元运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三元(目)运算符</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    三元运算符 ?:

    判断条件 ? 判断条件为真，则执行当前代码 : 判断条件为假，则执行当前代码

    */
   // 执行 表达式
    6>4 ? console.log('固始鹅块') : console.log('糍粑');
    // 声明不同的变量值
    let abc = !1 ? '秦琼' : '尉迟恭';

    console.log( abc );

    console.log( 5>6 ? '单雄信' : '罗成' );

    // 三元运算符嵌套
    let username =  5<6 ? 6>7 ? '李元霸' : '宇文成都' : '杨广';
    console.log( username );

</script>

05、获取html中的元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取html中的元素对象</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul { list-style-type: none; }
        ul li {
            line-height: 40px;
            margin-bottom: 20px;
            background: #04be02;
        }

        .wp {
           background: #f60;
        }

        a.hover {
            border: 1px #f00 solid;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <ul id="">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="wp">5</li>
        <li class="wp">6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <ul id="">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="wp">5</li>
        <li class="wp">6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
</html>
<script>
    //1.通过id 获取元素
    let ul = document.getElementById('list');
    ul.style.border = '1px #f00 solid';
    /*
    2.通过标签获取元素
    document.getElementsByTagName('标签名')
    
    特点:
    1.调用对象可以是 documen之外的对象
        如果通过 document 对象获取的标签，则是获取页面上所有的标签对象
        如果通过 其他对象获取的标签，则是获取该对象下所有的标签对象
    2.获取的元素对象不仅仅是一个，可以是多个
    3.获取的标签对象存放在数组中，也就是该方法的返回值是一个数组
    
    数组，在数组中可以存放任意类型的数据
    let arr = ['电影','作业','美食','游戏',123,325,true];

    数组的下标从0开始计算，因此如果需要从数组中获取内容则：
    arr[内容对于的下标]


    */
    let li = document.getElementsByTagName('li')
    // li.style.border = '10px #ff0 solid';
    console.log( li );
    li[7].style.border = '2px #00f solid'

    let li1 = ul.getElementsByTagName('li')
    console.log( li1 );
    li1[9].style.background = '#000'

    let arr = ['电影','作业','美食','游戏',123,325,true];

    console.log(arr[3]);

    /*
    3. 通过class类名获取元素
    document.getElementsByClassName('class名');

    返回值是 一个数组，数组包含了所有具有该class名的元素对象

    特点和 document.getElementsByTagName 一致
    */
    let liBox = document.getElementsByClassName('wp');
    console.log( liBox );

    liBox[3].style.background = '#808080';

    /*
    获取body的方法
    1. document.getElementsByTagName('body')[0]
    2. documen.body
    */
    let body1 = document.getElementsByTagName('body')[0];
    body1.style.background = '#ccc'

    document.body.style.background = '#666'
</script>

06、简单轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wp {
            width: 250px;
            height: 400px;
            border: 1px #f00 solid;
            margin: 40px auto 0;
            position: relative;
            overflow: hidden;
        }
        
        #list {
            width: 1000px;
            display: flex;
            flex-wrap: nowrap;
            transform: translateX(0);
            /* 添加过渡动画 */
            transition: all 1s;
        }
        #list img {
            width: 250px;
            height: 400px;
        }
        
        #box {
            height: 40px;
            width: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #box span {
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        #box span:hover {
            background: #f60;
            box-shadow: 0 0 0px 5px #ccc;
        }
    </style>
</head>
<body>
    <!-- 外层的div,包含图片列表 -->
    <div class="wp">
        <div id="list">
            <img src="../images/1.png" alt="">
            <img src="../images/5.jpg" alt="">
            <img src="../images/3.png" alt="">
            <img src="../images/4.png" alt="">
            <!-- 分页器 -->
        </div>   
        <div id="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>
<script>
    // 获取需要点击的分页器
    let box = document.getElementById('box');
    let spanBox = box.getElementsByTagName('span');
    // 获取列表元素
    let list = document.getElementById('list');
    
    // 点击分页器
    spanBox[0].onclick = function(){
        console.log('点击了第一个图片');
        list.style.transform = 'translateX(0px)';
    };
    spanBox[1].onclick = function(){
        console.log('点击了第二个图片');
        list.style.transform = 'translateX(-250px)';
    };
    spanBox[2].onclick = function(){
        console.log('点击了第三个图片');
        list.style.transform = 'translateX(-500px)';
    };
    spanBox[3].onclick = function(){
        console.log('点击了第四个图片');
        list.style.transform = 'translateX(-750px)';
    };
</script>
不万能的小李.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3902
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
JavaScript程序设计训练 Day3
qq_55786319的博客
04-15 2052
1、编写程序，根据用户输入的数值，计算其平方、平方根和自然对数 <script> var input_num=Number(prompt("请输入一个数字:")); var sqrt_num=Math.sqrt(input_num);//开方 var pow_num=Math.pow(input_num,2);//平方 var log_num=Math.log(input_num);//ln,即e的多少次方等于input_n
JavaScript Day_03
m0_66095162的博客
03-24 1023
Javascript学习笔记
四天学会JavaScript(Day1~Day4)
热门推荐
qq_41424688的博客
10-06 5万+
七天学完JavaSctipt~Day1 前言        在9月22号当时距离国庆还有8天的时候,原本是说国庆计划五天的时间来总结微服务的(详情见微服务架构设计模式与CAP定理),可没想到自己太过心急...提前过了一遍。。所以这次就打算用国庆的时间来好好学学JavaScript。其实前端这一块呢,我几乎是一个小白。过去也只是写写Ajax,或者整几个XX事件,接收接收数据而已。所以这个国庆我是计划用七天的时间把JavaScript语言从头
JavaScript 获取时间
qq_56491274的博客
10-21 2592
JavaScript获取时间
JavaScript 日期计算
逍遥游
11-03 1210
计算当前日期的后一天 var now = new Date(); now.setDate(now.getDate() + 1); console.log(now);//VM153:3 Thu Sep 28 2017 09:26:05 GMT+0800 (中国标准时间) 已知开始日期和天数，计算结束日期 var str = '2016-06-27'; //定义开始日期 var startDate = new Date(Date.parse(str .replace(/-/g, '/')));
JavaScript详解
weixin_45845391的博客
08-16 1万+
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了。“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了。每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的。.
JavaScript的判断语句
前端开发,HTML5,css3,JavaScript,node.js,vue
11-24 7706
【代码】JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3585
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
自学JavaScript笔记（Day04）
bobiii的博客
03-12 4237
目录 数组 1.数组的创建方式 2.数组元素的类型 3.数组中新增元素 数组 1.数组的创建方式 利用 new 创建数组 var 数组名 = new Array() ； var arr = new Array(); // 创建一个新的空数组 利用数组字面量创建数组（最多使用的方式） //1. 使用数组字面量方式创建空的数组 var 数组名 = []； //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇'];
Day03:HTML，JavaScript
03-11
Day03:HTML，JavaScript
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
Day03
03-21
第三天
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 209
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1033
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 586
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
vue 使用 export default
global_coding的博客
05-24 288
vue 使用 export default
javascript日历
05-30
你想了解 JavaScript 实现的日历吗？ JavaScript 可以通过 DOM 操作实现动态生成日历的功能。以下是一个简单的 JavaScript 日历实现示例： ```html <!DOCTYPE html> <title>JavaScript 日历示例 table { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值