JavaScript day05

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量23 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73572762/article/details/132239078
版权

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++){
        if(m<10){
            console.log(m);
        }else{
            break;
        }
    }


    // 没有初始值，没有判断条件，没有递增
    let =0;
    for(;;){
        if(n<10){
            console.log(n);
            n++;//递增
        }else{
            break;
        }
    }
</script>

02 文档流写入和元素写入

把元素直接写入文档流 使用document.write(str)
1.会把内容渲染到body
2.str 可以是标签，也可以是文本内容
3.后面写入的内容不会覆盖前面写入的内容

<!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: 10px;
        }
        .wp{
            width: 200px;
            height: 200px;
            background: #f60;
        }
    </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><div class="cell"></div>')
</script>
innerHTML
它是dom元素的一个属性，可以通过 innerHTML 设置和获取元素内容

特点：
	1.后写入的内容会覆盖之前写入的内容
	2.可以写入标签，也可以写入文本

设置内容
	dom.innerHTML =  '内容'    如果内容是html结构，可以直接被渲染称html
	
获取内容：
	dom.innerHTML	获取到了dom元素中的html结构
innerText
它是dom元素的一个属性，可以通过 innerText 设置和获取元素的文本内容

特点：
	1.后面写入的内容会覆盖前面写入的内容
	2.设置的时候如果是html结构，html结构不会被渲染，会原样写入
	
	和innerHTML 一样也可以设置和获取内容
	
	注意，获取的结果 会 过滤到标签名，只会显示文本内容

<!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: 10px;
        }
        .wp{
            width: 200px;
            height: 200px;
            background: #f60;
        }
    </style>
</head>
<body>
    <div class="wp" id="aa"></div>
    <div class="wp" id="bb">
        <h1>中午吃啥</h1>
        <h2>米饭</h2>
        <h2>面条</h2>
    </div>
</body>
</html>
<script>
    
   let aa = document.getElementById('aa');
   aa.innerHTML = '铁木真';
   aa.innerHTML += '术赤';  //aa.innerHTML = aa.innerHTML+'术赤'
   aa.innerHTML += '<h1>察合台</h1>';
   console.log(aa.innerHTML);


   let bb = document.getElementById('bb');
   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{
            width: 30px;
            height: 30px;
            border: 3px #f00 solid;
            border-radius: 50%;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- <div class="wp"></div> -->
</body>
</html>
<script>
    /*
    循环嵌套
    */ 

    // 外层控制的是 行
   for(let i=0;i<5;i++){
        // 内层控制的是 列
        for(let k=0;k<=i;k++){
            document.write(k);
        }
        document.write('<br/>');
   }

    // 双重for循环绘制
    for(let a=0;a<5;a++){
        for(let b=0;b<5;b++){
            document.write('<div class="wp"></div>');
        }
        document.write('<br/>');
    }


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


    // 
    document.write('<div class="wp">');
        document.write('<span>袁洪</span>');
    document.write('</div>');


    // 
    document.write('<table border=1 width="600">');
        for(let i=0;i<4;i++){
            document.write('<tr>');
                for(let j=0;j<4;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>');
                        document.write(j+'x'+i+'='+(j*i));
                        document.write('</td>');
                    }else{
                    document.write('<td></td>')
                }      
            }
            document.write('</tr>');
        }
    document.write('</table>');
</script>

04 随机数

数学方法：
	Math.floor()		向下取整
	Math.ceil()		向上取整
	Math.round()		四舍五入
	Math.random()		随机数，返回值是[0,1)的值

<!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>
    document.write(Math.random() + '<hr/>');
    document.write(Math.random() * 100 + '<hr/>');

    // 0~100整数
    let num = Math.floor(Math.random() * 101);
    document.write(num + '<hr/>');

    // [40,60]之间的随机整数
    let num1 = Math.floor(Math.random() * 21 + 40);
    document.write(num1 + '<hr/>');
    /*
    [m,n]之间的随机整数
    Math.floor(Math.random()*(n-m+1))+m;
    */
    // 随机输出 10个[20,70]之间的整数
    document.write('<br/>')
    for (let i = 0; i <= 9; i++) {
        let num2 = Math.floor(Math.random() * 51) + 20;
        document.write(num2 + '<hr/>');
    }
</script>

for循环中，如果判断条件具有多个，如下：具有i<6,j<20两个条件，那么只有最后一个条件起到了判断条件的作用，其他判断条件作废

<!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>

    for (let i = 0, j = 0; i < 6, j < 20; i++, j++) {
        sum = i + j;
    }
    document.write(sum + '<hr/>');
</script>

中国结

<!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{
            /* border: 1px #f00 solid; */
            text-align: center;
        }
        .wp1{
            width: 30px;
            height: 30px;
            background: #f00;
            margin: 5px;
            display: inline-block;
        }
    </style>
</head>
<body>

</body>
</html>
<script>
    // 中国结
    for(let a=0;a<=12;a+=2){
        document.write('<div class="wp">');
        for(let b=0;b<=a;b++){
            document.write('<div class="wp1"></div>');
        }
        document.write('</div>')
    }
    for(let a=11;a>=1;a-=2){
        document.write('<div class="wp">');
        for(let b=1;b<=a;b++){
            document.write('<div class="wp1"></div>');
        }
        document.write('</div>')
    }
</script>
烟雨平生768
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript程序设计训练 Day3
qq_55786319的博客
04-15 2103
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 Day01
m0_61373758的博客
03-08 853
JavaScript历史：网景公司（布兰登·艾奇）ECMAScript是一个标准，JavaScript是语言 js概念 概念：支持面向对象的跨平台脚本语言。 理解： 脚本语言：依赖别的语言才能运行 html必须在浏览器中才能运行，js嵌套在html中才能运行 跨平台：可以在不同的平台上运行 windows、linux、安卓... 支持面向对象 使用面向对象的思想编程 应用场景： 表单验证：规范用户输入数据，和后台数据进行交互 网页特效：给页
JavaScript Day_05
m0_66095162的博客
03-26 777
JavaScript
javascript-day05
weixin_56246445的博客
12-23 357
玛卡巴卡专用
四天学会JavaScript(Day1~Day4)
热门推荐
qq_41424688的博客
10-06 5万+
七天学完JavaSctipt~Day1 前言        在9月22号当时距离国庆还有8天的时候,原本是说国庆计划五天的时间来总结微服务的(详情见微服务架构设计模式与CAP定理),可没想到自己太过心急...提前过了一遍。。所以这次就打算用国庆的时间来好好学学JavaScript。其实前端这一块呢,我几乎是一个小白。过去也只是写写Ajax,或者整几个XX事件,接收接收数据而已。所以这个国庆我是计划用七天的时间把JavaScript语言从头
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_03
03-24
javascript学习第三天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
Day05
03-13
在“Day05”这个学习日程中，我们聚焦于JavaScript这一编程语言，它在网络开发领域扮演着核心角色。JavaScript，通常简称为JS，是一种解释型、跨平台的脚本语言，主要用于网页和网络应用的动态化。在这个压缩包文件...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 120
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 57
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 869
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 185
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 345
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 73
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 299
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 118
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1258
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
什么是vue的计算属性
weixin_56187723的博客
07-12 92
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
day10_JavaScript高级1
08-08
1.2.2视频详情1.2.3总结与补充1.2.4课堂提问与练习 Dom的功能 1.2.5习题答案 控制html文档的内容 获取页面标签(元素)对象：Elemen

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值