JavaScript Day05

已于 2023-08-11 19:21:35 修改
阅读量35 收藏
点赞数
文章标签： javascript 前端 html
于 2023-08-11 19:16:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li1023055421/article/details/132238635
版权

01、奇葩for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇葩for循环</title>
</head>
<body>
    
</body>
</html>
<script>
    /*
    
    */
   //  正常 for循环的写法
    for(let i=0;i<10;i++){
        console.log(i);
    }
    // 没有初始值
    let k = 0;
    for(;k<10;k++){
        console.log(k);
    }
    // 没有初始值和判断是否满足循环条件
    // 如果 for 循环中没有判断条件，那么他的判断条件在循环内部，并且需要开发者手动书写跳出循环的操作，因为不会主动跳出循环
    let m = 0;
    for(;;m++){
        // code
        if(m<10){
            console.log(m);
        }else{
            break;
        }
    }
    // 没有初始值，没有判断条件，没有递增
    let n = 0;
    for(;;){
        if(n<10){
            console.log(n);
            n++; //递增
        }else{
            break;
        }
    }
</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .cell {
            width: 50px;
            height: 50px;
            background: #04be02;
            margin: 20px;
        }

        .wp{
            width: 200px;
            height: 200px;
            background: #f60;
            margin: 30px 10px;
        }
    </style>
</head>
<body>
    <div class="wp" id="aa"></div>
    <div class="wp" id="bb">
        <h1>中午吃啥</h1>
        <h2>米饭</h2>
        <h2>面条</h2>
    </div>
</body>
</html>
<script>
    /*
    把元素直接写入文档流 使用
    document.write(str)
    1. 会把内容渲染到body
    2. str  可以是标签，也可以是本文内容
    3. 后面写入的东西不会覆盖前面写入的内容
    */
    document.write('<h1>秦琼</h1>')
    document.write('<h1>秦琼</h1>')
    document.write('<h1>秦桧</h1>')
    document.write('<div class="cell"></div><div class="cell"></div><div class="cell"></div>')
    

    /*
    innerHTML 
    他是dom元素的一个属性，可以通过 innerHTML  设置和获取元素的内容
    特点：
    1.后写入的内容会覆盖之前写入的内容
    2.可以写入标签，也可以写入文本

    设置内容
        dom.innerHTML = '内容' 如果内容是html结构，可以被渲染成html

    获取内特
        dom.innerHTML 获取到了dom元素中的html结构

    innerText 他是dom元素的一个属性，可以通过 innerText 设置和获取元素的文本内容
    特点：
    1. 后面写入的内容会覆盖前面写入的内容
    2. 设置的时候如若是html结构，html结构不会被渲染，会原样写入

    和 dom.innerHTML 一样也可以设置和获取内容
    注意 获取的结果 会 过滤掉标签名，只会显示文本内容
    */
   let aa = document.getElementById('aa')
   aa.innerHTML += '铁木真';
   aa.innerHTML += ' 术赤';
   aa.innerHTML += ' <h1>察合台</h1>';


   console.log(bb.innerHTML);

   
   console.log(bb.innerText);
   bb.innerText = '<h1>周末吃顿好的</h1>';
   bb.innerText = '<h1>周末吃顿红烧大肠</h1>';
</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wp {
            margin: 10px;
            width:40px; 
            height:40px;
            border-radius:50%;
            background:rgb(172, 0, 164);
            display: inline-block;
        }
        table{
            margin: 20px;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    /*
    循环嵌套

    */

    // 外层控制的是行
    for(let i=0;i<=10;i++){
        // 内层控制的是列
        for(let k=0;k<=i;k++){
            document.write(k);
        }
        document.write('<br/>');
    }
    
    // 双重for循环绘制
    for(let d=0;d<5;d++){
        for(let h=0;h<5;h++){
            document.write('<div class="wp"></div>')
        }
        document.write('<br/>');
    }

    for(let d=0;d<6;d++){
        for(let h=0;h<d;h++){
            document.write('<div class="wp"></div>')
        }
        document.write('<br/>');
    }

    document.write('<div class="wp2">');
        document.write('<span>袁洪</span>');
    document.write('</div>');
    
    // 创建表格
    document.write('<table border=1 width="600">');
    for(let i=0;i<10;i++){
        document.write('<tr>');
            for(let j=0;j<10;j++){
                document.write('<td>'+j+'</td>');
            }
        document.write('</tr>');
    }   
    document.write('</table>');

    //九九乘法表
    document.write('<table border=1 width="600">');
    for(let i=1;i<=9;i++){
        document.write('<tr>');
            for(let j=1;j<=9;j++){
                if(j<=i){
                    document.write('<td>'+j+'x'+i+'='+(j*i)+'</td>');
                }else{
                    document.write('<td></td>');
                }
            }

        document.write('</tr>');
    }   
    document.write('</table>');


</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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cc {
            width: 2000px;
            display: flex;
            justify-content: center;
            border: 1px #f00 solid;
            /* align-items: center; */
        }

        .zz {
            width: 50px;
            height: 50px;
            background: #f00;
            margin: 15px;
            /* display: inline-block; */
        }
    </style>
</head>
<body> 
    
</body>
</html>
<script>
    /*
    数学方法
    Math.floor() 向下取整
    Math.ceil() 向上取整
    Math.round() 四舍五入
    
    Math.random() 随机数,返回的是 [0,1) 的值
    */
    document.write( Math.random()+'<br/>' );
    document.write( Math.random()*100+'<hr/>' );
    // 0-100整数
    let num = Math.floor( Math.random()*101 )
    document.write( num +'<br/>' );
    // [40,60]之间数
    document.write( Math.floor( Math.random()*21+40 ) +'<hr/>' );

    /*
        [m,n]之间的随机整数
        Math.floor( Math.random()*(n-m+1))+m;
    */

    // 随机输出 10个 [20,70] 之间的整数
    for(let i=1;i<=10;i++){
            document.write( Math.floor( Math.random()*51+20 ) +'<br/>' );
    }


    let sum=0 , abc=10 , sd=100 ;
    /*
    for循环，如果他的判断条件具有多个，如下，具有 i<6,j<20 两个条件，那么只有最后一个条件起到了判断条件的作用，其他判断条件作废
    */
    for(let i=0,j=0;i<6,j<20;i++,j++){
        sum = i+j;
    }
    document.write( sum +'<hr/>' )

    // 
    

</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> 
    // 有一对幼兔，幼兔一个月长成小兔，小兔一个月长成成兔
    // 初始幼兔的对数
    let you = 1;
    // 初始小兔的对数
    let small = 0;
    // 初始成兔的对数
    let old = 0;

    for(let i=1;i<=10;i++){
        if(i==1){
            small = you;
        }else{
            // 小兔长大成老兔
            old += small;
            // 幼兔长大成小兔
            small = you;
            // 如果有老兔，老兔生幼兔
            you = old;   
        }
    }
    console.log( you,small,old );
</script>

02、三和七

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3和7</title>
</head>
<body>
    <input type="text" id="val"> <br>
    <button id="btn">能被3和7整除的数的和为</button> <br>
    <input type="text" id="val2">
</body>
</html>
<script>
    let val = document.getElementById('val');
    let val2 = document.getElementById('val2');
    let bth = document.getElementById('btn');
    let sum=1;
    btn.onclick = function(){
        let v1 = Number( val.value);
        let sum=0;
        for(let i=1;i<=v1;i++ ){
            if(i%3==0 && i%7==0){
                sum+=i;
            }
        }
        console.log(sum);
        val2.value = (sum);
    }
</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>
    <input type="text" id="val"> <br>
    <input type="text" id="val2"> <br>
    <button id="btn">打印</button> <br>
    <input type="text" id="val3">
</body>
</html>
<script>
    let val = document.getElementById('val');
    let val2 = document.getElementById('val2');
    let val3 = document.getElementById('val3');
    let btn = document.getElementById('btn');

    btn.onclick = function(){
        let v1 = Number(val.value);
        let v2 = Number(val2.value);
        let min = v1>=v2?v2:v1;
        let max = v1>=v2?v1:v2;
        let sum;
        for(let i=min;i<=max;i++){
            console.log(parseInt(i)); 
        }
    }
</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>
    let t = 1;
    for(let d=1;d<7;d++){
        t=(t+1)*2;
    }
    console.log(t);
</script>

05、小朋友年龄

<!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 age = 3;

   for(let i=1;i<5;i++){
        age+=2;
   }
   console.log( age );
</script>
不万能的小李.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3901
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
JavaScript Day_05
m0_66095162的博客
03-26 760
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 7705
【代码】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 数组名 = ['小白','小黑','大黄','瑞奇'];
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_03
03-24
javascript学习第三天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
Day05
03-12
Day05
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 206
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 549
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
vue 使用 export default
global_coding的博客
05-24 202
vue 使用 export default
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 255
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
15 VUE学习：插槽slot
sixpp的博客
05-23 2491
如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。Vue 组件的插槽机制是受[原生 Web Component `` 元素]的启发而诞生，同时还做了一些功能拓展，这些拓展的功能我们后面会学习到。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。在上面的[渲染作用域]中我们讨论到，插槽的内容无法访问到子组件的状态。
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、付费专栏及课程。

余额充值