【how2j练习题】HTML DOM部分阶段练习

练习1

在这里插入图片描述

<!-- 验证账号是否已经存在 
那么就在js使用简单的验证规则： 如果账号是以a或者A开头的，那么就提示已经存在了。 -->
<!-- 
1.需要一个输入框和一个按钮
2.按钮上绑上一个事件。
3.编写事件，并输出答案 -->

<html>

<style>
</style>

<script>

    function changeDiv(){
        var input1 = document.getElementById("input").value;

        //  document.getElementById("d").innerHTML= input1;

        var color = document.body.style.color;

         if(input1[0] == "a" || input1[0] == "A"){

            document.getElementById("d").innerHTML= "账号已经存在";
            document.body.style.color = 'red';
        }else{
             document.getElementById("d").innerHTML= "账号可以使用";     
             document.body.style.color = 'green';   
        }    
    }
    </script>    
    
<input id="input" class="class">
<button onclick="changeDiv()">验证</button>
<span id="d"></span>
</html>

在这里插入图片描述
在这里插入图片描述

练习2

在这里插入图片描述

<!--点击按钮，切换照片-->
<!-- src属性切换 和 属性节点切换 -->

<html>
    
<img src="aaa.jpg" id="img" />

<script> 

function changeDiv1(){
  document.getElementById("img").src= "bbb.jpg";
}

function changeDiv2(){
  document.getElementById("img").attributes[0].nodeValue= "ccc.jpg" ;
}
</script>
 
<br>
<button onclick="changeDiv1()">通过src属性切换图片1</button>
<button onclick="changeDiv2()">通过属性节点切换图片2</button>
 
</html>

在这里插入图片描述
在这里插入图片描述

练习3

在这里插入图片描述

<!-- 验证账号是否已经存在 判断输入框里的值，是否是整数(浮点数也不行) -->

<html>

<style>
</style>


<script>


    function changeDiv(){
        var input1 = document.getElementById("input").value;

        //  document.getElementById("d").innerHTML= input1;

        var color = document.body.style.color;


        if( input1%1 === 0){
            document.getElementById("d").innerHTML= "是整数";     
             document.body.style.color = 'green';   

            
         
        }else{

            
            document.getElementById("d").innerHTML= "不是整数";
            document.body.style.color = 'red';

        }
    
         
    }
    
    </script>    


<input id="input" class="class">
<button onclick="changeDiv()">验证</button>
<span id="d"></span>

在这里插入图片描述
在这里插入图片描述

练习 4

在这里插入图片描述



 
<style>
    table {
        width: 800px;
	    border-collapse: collapse;
    }

    tr {
        background-color: white;
        text-align: center;
        border-bottom: 1px solid gray;
        }
</style>

<table>

    <thead>
        <tr>
            <td>id</td>
            <td>名称</td>
            <td>血量</td>
            <td>伤害</td>
        </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>1</td>
        <td>aaa</td>
        <td>34544</td>
        <td>34234</td>
      </tr>

      <tr>
        <td>2</td>
        <td>addd</td>
        <td>1234</td>
        <td>32424</td>
      </tr>

      <tr>
        <td>3</td>
        <td>gfxdgg</td>
        <td>3243</td>
        <td>124223</td>
      </tr>

      <tr>
        <td>4</td>
        <td>fddzss</td>
        <td>43242</td>
        <td>340012</td>
      </tr>

    </tbody>
    
  
</table>

<script>
    var  trs = document.getElementsByTagName("tr");

    for(i=1;i<trs.length;i+=2){

      trs[i].style.background = "#f2f2f2";
    }
 </script>

在这里插入图片描述

练习 5

在这里插入图片描述

<style>
    /* 下拉按钮样式 */
    .dropbtn {
        color: CornflowerBlue;
        text-decoration: none;
        font-size:20px;
        font-family:宋体;
    }
    
    /* 容器 <div> - 需要定位下拉内容 */
    .dropdown {
        margin-top:15px;
        position: relative;
        display: inline-block;
    }
    
    /* 下拉内容 (默认隐藏) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #ffffff;
        min-width: 80px;
        border: 1px solid lightgray;
    }
    
    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: gray;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {background-color: #f1f1f1}
    
    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    </style>

<div class="dropdown">
    <a class="dropbtn">武器</a>
    <div class="dropdown-content">
      <a href="#">大剑</a>
      <a href="#">屠龙</a>
      <a href="#">倚天</a>
      <a href="#">七孔砖</a>
    </div>
</div>
<div class="dropdown">
    <a class="dropbtn">护甲</a>
    <div class="dropdown-content">
      <a href="#">胸甲</a>
      <a href="#">护腕</a>
      <a href="#">头盔</a>
      <a href="#">鞋子</a>
    </div>
</div>

<div class="dropdown">
    <a class="dropbtn">英雄</a>
    <div class="dropdown-content">
      <a href="#">aaa</a>
      <a href="#">aaa</a>
      <a href="#">aaa</a>
      <a href="#">aaa</a>
    </div>
</div>

在这里插入图片描述

练习 6

在这里插入图片描述

<html>

<style>
</style>

<script>



    function change(){
        var input1 = document.getElementById("input").value;
        
        var color = document.body.style.color;

         if(input1[0] == "a" || input1[0] == "A"){
            
            document.getElementById("d").innerHTML= "账号已经存在";
            document.body.style.color = 'red';
        }else{
             document.getElementById("d").innerHTML= "账号可以使用";     
             document.body.style.color = 'green';   
        }    
    }



</script>    
    
<input id="input" class="class" onchange="change()">
<!-- <button onclick="changeDiv()">验证</button> -->
<span id="d"></span>
</html>

在这里插入图片描述

练习 7

在这里插入图片描述


<!-- 
    有多个复选框
    点击选中所有，所有的复选框都选中了
    点击反向选择，反选复选框 
-->
<!-- 
单选框是否选中，是看checked属性是true还是false

全选：设置每一个选择框的 checked 为 true
全不选：设置每一个选择框的 checked 为 false
反选：设置每一个选择框的 checked 与自身相反 -->

<!DOCTYPE html>
<style>
        .nonebtn {
        color: CornflowerBlue;
        text-decoration: none;
        font-size:20px;
        font-family:宋体;
    }
</style>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>		
	
		<input type="checkbox" name="books" id="checkAll" >
		全选
        <br>

		<input type="checkbox" name="books">
        tokyo hot
        <br>

        <input type="checkbox" name="books">
        tokyo hot
        <br>

        <input type="checkbox" name="books">
		lol
        <br>

		<input type="checkbox" name="books">
        wow
        <br>

        <input type="checkbox" name="books">
        warcraft
        <br>

        <input type="checkbox" name="books">
        diablo
        <br>

		<a href="#"  class = "nonebtn" id="checkNone" >全不选
        <br>

	
	</body>
	<script type="text/javascript">
		var books=document.getElementsByName("books");
		//1.全选 checkAll
		var checkAll=document.getElementById("checkAll");
		checkAll.onclick=function(){
		    for(i=0;i<books.length;i++){		         
		         books[i].checked=true;
		    }
		};

		//2.全不选 checkNone
		var checkNone=document.getElementById("checkNone");
		checkNone.onclick=function(){		    
		    for(i=0;i<books.length;i++){		         
		         books[i].checked=false;
		    }
		};
	</script>
</html>

在这里插入图片描述

练习 8

在这里插入图片描述


<style>
    table {
        width: 800px;
	    border-collapse: collapse;
    }

    tr {
        background-color: white;
        text-align: center;
        border-bottom: 1px solid gray;
        }
</style>

<table>

    <thead>
        <tr>
            <td>id</td>
            <td>名称</td>
            <td>血量</td>
            <td>伤害</td>
        </tr>
    </thead>
    
    <tbody>

    </tbody>
  
</table>

<script>
    //动态生成表格
    //data是模拟后台传来的数据
    var data = [
        {
            "id":"1",
            "name":"gareen",
            "blood":"340",
            "disaster":"58",
        },
        {
            "id":"2",
            "name":"teemo",
            "blood":"320",
            "disaster":"76",
        },
        {
            "id":"3",
            "name":"annine",
            "blood":"380",
            "disaster":"38",
        },
        {
            "id":"4",
            "name":"deadbrother",
            "blood":"400",
            "disaster":"90",
        }
    ];

        // 获取文档中id = "demo"的元素
    var tbody = document.querySelector('tbody');
    for(var i=0;i<data.length;i++){
        var tr = document.createElement('tr'); // 创建一个tr元素 行元素
        tbody.appendChild(tr);//将行tr放到tbody里
        for(var k in data[i]){
            var td = document.createElement('td'); //创建列
            td.innerHTML = data[i][k]; 
            tr.appendChild(td); //将td放到tr里
        }
    }

 </script>

在这里插入图片描述

练习 9

在这里插入图片描述

<script>
    function addJs(){
        //创建新元素
        var newScript = document.createElement('script'); 
        newScript.src = 'hello.js'; 

        //获得旧元素
        var firstScript = document.getElementsByTagName("script")[0]; 

        //新元素替换旧元素
        firstScript.parentNode.insertBefore(newScript,firstScript);
}

</script>
<button onclick="addJs()">加载js，test3041.js</button>

在这里插入图片描述

练习 10

在这里插入图片描述

<!-- 在进行删除操作前，都应该提示用户是否要删除 -->
<style>
    table {
        width: 800px;
	    border-collapse: collapse;
    }

    tr {
        background-color: white;
        text-align: center;
        border-bottom: 1px solid gray;
        }
</style>

<table>

    <thead>
        <tr>
            <td>id</td>
            <td>名称</td>
            <td>血量</td>
            <td>伤害</td>
            <th>操作</th>
        </tr>
    </thead>
    
    <tbody>

    </tbody>
  
</table>

<script>
    //动态生成表格
    //data是模拟后台传来的数据
    var data = [
        {
            "id":"1",
            "name":"gareen",
            "blood":"340",
            "disaster":"58",
        },
        {
            "id":"2",
            "name":"teemo",
            "blood":"320",
            "disaster":"76",
        },
        {
            "id":"3",
            "name":"annine",
            "blood":"380",
            "disaster":"38",
        },
        {
            "id":"4",
            "name":"deadbrother",
            "blood":"400",
            "disaster":"90",
        }
    ];


    var tbody = document.querySelector('tbody');
        for(var i=0;i<data.length;i++){
            var tr = document.createElement('tr');  //创建行
            tbody.appendChild(tr);  // 将tr放到tbody里
            for (var k in data[i]){
                var td = document.createElement('td'); //创建列
                td.innerHTML = data[i][k];  //单元格（列）添加数据
                tr.appendChild(td);   //将td放到tr里
            }
 
            //创建删除的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a herf="javascript:;" style="color:blue;">' + '删除' + '</a>';
            tr.appendChild(td);
        }
 
        //实现点击删除两字删除对应的行

        //得到a
        var as = document.querySelectorAll('a');

        //1.弹出窗口进行询问

        //2.如果点击确定则执行 //如果不确定则关闭窗口




        //3.删除a
        for (var i=0;i<as.length;i++){
            as[i].onclick = function(){
                var r = confirm("确定删除？");
                if(r == true){
                    tbody.removeChild(this.parentNode.parentNode);  //this.parentNode.parentNode 代表a的父亲的父亲
                    alert("已删除");
                }else{
                    alert("未删除");
                }

            }
        }

 </script>

在这里插入图片描述

练习 11

在这里插入图片描述

 <!-- 验证账号密码不为空 -->
 <form action="https://how2j.cn/study/login.jsp" method = "post" onsubmit="return login()" >
    账号：<input id="d1" type="text" name="name"> <br/>
    密码：<input id = "d2" type="password" name="password" > <br/>
    <input type="submit" value="登陆">
</form>
<script>
    //获得不同的input根据text
    // 分别判断是否为空
    // 根据不同的情况输出不同的提示
    // 如果都不为空则提交

    function login(){
    var  div1 = document.getElementById("d1");
    
    var  div2 = document.getElementById("d2");

    if(div1.value.length == 0){
        alert("用户名不能为空！");
        return false;
    }
    if(div2.value.length == 0){
        alert("密码不能为空！");
        return false;
    }

    return true;


}

</script>

在这里插入图片描述

练习 12

在这里插入图片描述

<!-- 注册用户名用户名至少要三位数长度 -->

<form action="sucess.jsp" method = "post" onsubmit=" return assign()" >
    账号：<input id="d1" type="text" name="name"> <br/>

    <br/>

    <input type="submit" value="注册">

</form>
<script>
    //获得不同的input根据text
    // 分别判断长度是否大于三位数
    // 大于提交
    // 小于警示框

    function assign(){
    var  div1 = document.getElementById("d1");
    

    if(div1.value.length < 3){
        alert("用户名至少需要3位长度");
        return false;
    }

    return true;


}

</script>

在这里插入图片描述

练习 13

在这里插入图片描述



<form action="sucess.jsp" method = "post" onsubmit="return login()" >
    账号：<input id="d1" type="text" name="name"> <br/>
    <br/>
    年龄：<input id = "d2" type="text" name="age" > <br/>
    <br/>
    <input type="submit" value="登陆">
</form>
<script>
    //获得不同的input根据text
    // 分别判断是否为空
    // 根据不同的情况输出不同的提示
    // 如果都不为空则提交

    function login(){
    var  div1 = document.getElementById("d1");

    var  div2 = document.getElementById("d2");
    
    if(div1.value.length < 3){
        alert("用户名至少需要3位长度");
        return false;
    }

    if(isNaN(Number(div2.value))){
            alert("不是数字");
            return false;
        }
   

    return true;
 }

</script>

在这里插入图片描述

练习14

在这里插入图片描述


<form action="sucess.jsp" method = "post" id = "form" >
    账号：<input id="d1" type="text" name="name">
         <span id = "s_name"></span>
    <br/>
    <br/>
    年龄：<input id = "d2" type="text" name="age" > 
          <span id = "s_age"></span>
    <br/>
    <br/>
    <input type="submit" value="登陆">
</form>

<script>
    
    window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                return checkUsername() && checkAge();
            };
            document.getElementById("d1").onblur = checkUsername;
            document.getElementById("d2").onblur = checkAge;
        };


function checkAge(){
            //校验年龄
            
            // 1.获取年龄的值
            var age = document.getElementById("d2").value;
            // 2.定义正则表达式
            var reg_age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
            // 3.判断值是否符合正则的规则
             var flag2 = reg_age.test(age);
             var s_age = document.getElementById("s_age");
            if(flag2){
                s_age.innerHTML = "年龄正确";
            }else{
                s_age.innerHTML = "年龄必须为整数";
            }
            return flag2;

    }


    function checkUsername(){

            // 校验用户名
            
            // 1.获取用户名的值
            var username = document.getElementById("d1").value;
            // 2.定义正则表达式
            var reg_username = /^[a-zA-Z0-9_-]{3,16}$/;
             // 3.判断值是否符合正则的规则
            var flag1 = reg_username.test(username);
            // 4.提示信息
            var s_username = document.getElementById("s_name");
            if(flag1){
                s_username.innerHTML = "格式正确";
            }else{
                s_username.innerHTML = "用户名格式有误";
            }
            return flag1;

}




</script>

在这里插入图片描述
在这里插入图片描述

练习15

在这里插入图片描述

<form action="sucess.jsp" method = "post" id = "form" >
    账号：<input id="d1" type="text" name="name">
         <span id = "s_name"></span>
    <br/>
    <br/>
    年龄：<input id = "d2" type="text" name="age" > 
          <span id = "s_age"></span>
    <br/>
    <br/>

    邮箱：<input id = "d3" type="text" name="email" > 
    <span id = "s_email"></span>
    <br/>
    <br/>
    <input type="submit" value="登陆">
</form>

<script>
    
    window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                return checkUsername() && checkAge()&&checkEmail();
            };
            document.getElementById("d1").onblur = checkUsername;
            document.getElementById("d2").onblur = checkAge;
            document.getElementById("d3").onblur = checkEmail;            
        };


function checkAge(){
            //校验年龄
            
            // 1.获取年龄的值
            var age = document.getElementById("d2").value;
            // 2.定义正则表达式
            var reg_age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
            // 3.判断值是否符合正则的规则
             var flag2 = reg_age.test(age);
             var s_age = document.getElementById("s_age");
            if(flag2){
                s_age.innerHTML = "年龄正确";
            }else{
                s_age.innerHTML = "年龄必须为整数";
            }
            return flag2;

    }


    function checkUsername(){

            // 校验用户名
            
            // 1.获取用户名的值
            var username = document.getElementById("d1").value;
            // 2.定义正则表达式
            var reg_username = /^[a-zA-Z0-9_-]{3,16}$/;
             // 3.判断值是否符合正则的规则
            var flag1 = reg_username.test(username);
            // 4.提示信息
            var s_username = document.getElementById("s_name");
            if(flag1){
                s_username.innerHTML = "格式正确";
            }else{
                s_username.innerHTML = "用户名格式有误";
            }
            return flag1;

    }


    function checkEmail(){

        // 校验邮箱

        // 1.获取邮箱的值
        var email = document.getElementById("d3").value;
        // 2.定义正则表达式
        var reg_email = /^[A-Za-z0-9]+([-._][A-Za-z0-9]+)*@[A-Za-z0-9]+(-[A-Za-z0-9]+)*(\.[A-Za-z]{2,6}|[A-Za-z]{2,4}\.[A-Za-z]{2,3})$/;
        // 3.判断值是否符合正则的规则
        var flag3 = reg_email.test(email);
        // 4.提示信息
        var s_email = document.getElementById("s_email");
        if(flag3){
            s_email.innerHTML = "格式正确";
        }else{
            s_email.innerHTML = "邮箱格式有误";
        }
        return flag3;

        }
</script>

在这里插入图片描述

练习16

在这里插入图片描述



<button onclick="hide()">隐藏div</button>
  
<button onclick="show()">显示div</button>
  
<br>
<br>
  
<div id="d">
  
这是一个div
  
</div>
  
<script>
function hide(){
 var d = document.getElementById("d");
 d.style.display="none";
}
  
function show(){
 var d = document.getElementById("d");
 d.style.display="block";
}
  
</script>

在这里插入图片描述

练习17

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>排序</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<p><strong>单击标题对表格进行排序。</strong></p>
<p>第一次单击时，排序方向为升序（A 到 Z）。</p>
<p>再次点击，排序方向为降序（Z to A）：</p>

<table id="myTable">
  <tr>
   <!--点击标题时，运行sortTable函数，参数为0表示按名称排序，1表示按国家排序:-->  
    <th onclick="sortTable(0)">id</th>
    <th onclick="sortTable(1)">name</th>
        <th onclick="sortTable(2)">blood</th>
    <th onclick="sortTable(3)">disaster</th>
  </tr>
  
</table>

<script>

    var data = [
        {
            "id":"1",
            "name":"gareen",
            "blood":"340",
            "disaster":"58",
        },
        {
            "id":"2",
            "name":"teemo",
            "blood":"320",
            "disaster":"76",
        },
        {
            "id":"3",
            "name":"annine",
            "blood":"380",
            "disaster":"38",
        },
        {
            "id":"4",
            "name":"deadbrother",
            "blood":"400",
            "disaster":"90",
        }
    ];

        // 获取文档中id = "demo"的元素
    var tbody = document.querySelector('tbody');
    for(var i=0;i<data.length;i++){
        var tr = document.createElement('tr'); // 创建一个tr元素 行元素
        tbody.appendChild(tr);//将行tr放到tbody里
        for(var k in data[i]){
            var td = document.createElement('td'); //创建列
            td.innerHTML = data[i][k]; 
            tr.appendChild(td); //将td放到tr里
        }
    }



function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //设置排序方向为升序：
  dir = "asc"; 
  /*创建一个循环，直到没有切换完成：*/
  while (switching) {
    //开始说：没有切换完成：
    switching = false;
    rows = table.rows;
    /*遍历所有表格行（除了第一行，它包含表格标题）：*/
    for (i = 1; i < (rows.length - 1); i++) {
      // 首先说不应该有切换：
      shouldSwitch = false;
      /*获取要比较的两个元素，一个来自当前行，一个来自下一行：*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*检查两行是否应该交换位置，基于方向，asc 或 desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // 如果是这样，标记为一个开关并打破循环：
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // 如果是这样，标记为一个开关并打破循环：
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*如果已经标记了一个开关，则进行开关并标记一个开关已经完成：*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //每次完成切换，将此计数增加 1：
      switchcount ++;      
    } else {
      /*如果没有进行切换并且方向为“asc”，则将方向设置为“desc”并再次运行 while 循环。*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

</body>
</html>

在这里插入图片描述

参考资料

https://www.cnblogs.com/liyihua/p/12393342.html

https://www.jb51.net/article/240730.htm

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/536118.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

002 数据提取工具 WebPlotDigitizer 使用教程

002 数据提取工具 WebPlotDigitizer 使用教程

一、WebPlotDigitizer 安装方法 直接在官网上进行下载 automeris.io&#xff0c;选择右上角的下载按钮&#xff0c;再根据电脑位数选择对应版本进行下载。 下载后将得到一个压缩包&#xff0c;直接解压缩&#xff0c;双击WebPlotDigitizer-4.7.exe即可运行&#xff0c;得到如下…
阅读更多...
02 - Git 之命令 +

02 - Git 之命令 +

1 Git相关概念 1.1 以下所谈三个区&#xff0c;文件并不只是简单地在三个区转移&#xff0c;而是以复制副本的方式转移 使用 Git 管理的项目&#xff0c;拥有三个区域&#xff0c;分别是 Working area工作区&#xff08;亦称为 工作树Working Tree&#xff09;、stage area …
阅读更多...
贪心算法|435.无重叠区间

贪心算法|435.无重叠区间

力扣题目链接 class Solution { public:// 按照区间右边界排序static bool cmp (const vector<int>& a, const vector<int>& b) {return a[1] < b[1];}int eraseOverlapIntervals(vector<vector<int>>& intervals) {if (intervals.siz…
阅读更多...
Go gorm库(详细版)

Go gorm库(详细版)

目录 01. 什么是ORM 02. 环境搭建 03. 连接数据库 高级设置 gorm 的命名策略 创建表 日志显示 04. 模型定义 定义一张表 自动生成表结构 修改表字段大小 字段标签 05. 单表查询 5.1 表结构 5.2 添加单条记录 5.3 批量插入 5.4 单条数据查询 5.5 根据主键查询…
阅读更多...
微服务-7 Docker

微服务-7 Docker

一、镜像、容器、仓库 容器是镜像的实例&#xff0c;仓库中存储着镜像。 二、镜像的操作 三、容器的操作 创建容器停止容器&#xff0c;查看后发现没有了(docker ps 默认只展示没有停止的) docker ps -a (可以展示运行中和停止的镜像)删除容器&#xff1a;(docker rm 不能删除…
阅读更多...
新手尝试硬件买单片机还是树莓派？

新手尝试硬件买单片机还是树莓派？

新手尝试硬件买单片机还是树莓派&#xff1f; 新手的话&#xff0c;先学单片机吧&#xff0c;51&#xff0c;stm32&#xff0c;都可以&#xff0c;很多学习平台给的例子比较多&#xff0c;程序相对都比较简单&#xff0c;更贴近硬件&#xff0c;玩起来比较容易做出小东西&…
阅读更多...
【简明图文教程】Node.js的下载、安装、环境配置及测试

【简明图文教程】Node.js的下载、安装、环境配置及测试

文章目录 前言下载Node.js安装Node.js配置Node.js配置环境变量测试后言 前言 本教程适用于小白第一次从零开始进行Node.js的下载、安装、环境配置及测试。 如果你之前已经安装过了Node.js或删除掉了Node.js想重新安装&#xff0c;需要先参考以下博客进行处理后&#xff0c;再根…
阅读更多...
HarmonyOS实战开发-图片编辑、使用 TextArea 实现多文本输入

HarmonyOS实战开发-图片编辑、使用 TextArea 实现多文本输入

介绍 本示例使用 TextArea 实现多文本输入&#xff0c;使用 ohos.app.ability.common 依赖系统的图库引用&#xff0c;实现在相册中获取图片&#xff0c;使用 ohos.multimedia.image 生成pixelMap&#xff0c;使用pixelMap的scale()&#xff0c;crop()&#xff0c;rotate()接口…
阅读更多...
学习云计算HCIE选择誉天有什么优势？

学习云计算HCIE选择誉天有什么优势？

誉天云计算课程优势实战性强 课程注重实践操作&#xff0c;通过实际案例和实验操作&#xff0c;让学员深入了解云计算的应用场景和实际操作技能。课程内容全面 涵盖所有云计算涉及的IT基础知识、服务器、存储、网络等方面的基础知识&#xff0c;开源操作系统Linux&#xff0c;开…
阅读更多...
HarmonyOS实战开发-拼图、如何实现获取图片，以及图片裁剪分割的功能。

HarmonyOS实战开发-拼图、如何实现获取图片，以及图片裁剪分割的功能。

介绍 该示例通过ohos.multimedia.image和ohos.multimedia.mediaLibrary接口实现获取图片&#xff0c;以及图片裁剪分割的功能。 效果预览 使用说明&#xff1a; 使用预置相机拍照后启动应用&#xff0c;应用首页会读取设备内的图片文件并展示获取到的第一个图片&#xff0c;…
阅读更多...
【muzzik 分享】3D模型平面切割

【muzzik 分享】3D模型平面切割

# 前言 一年一度的征稿到了&#xff0c;倒腾点存货&#xff0c;3D平面切割通常用于一些解压游戏里&#xff0c;例如水果忍者&#xff0c;切菜这些&#xff0c;今天我就给大家讲讲怎么实现3D切割以及其原理&#xff0c;帮助大家更理解3D中的 Mesh(网格)&#xff0c;以及UV贴图和…
阅读更多...
机器学习和深度学习--李宏毅（笔记与个人理解）Day11-12

机器学习和深度学习--李宏毅（笔记与个人理解）Day11-12

Day11 when gradient is small…… 怎么知道是局部小 还是鞍点&#xff1f; using Math 这里巧妙的说明了hessan矩阵可以决定一个二次函数的凹凸性 也就是 θ \theta θ 是min 还是max&#xff0c;最后那个有些有些 哈 是一个saddle&#xff1b; 然后这里只要看hessan矩阵是不…
阅读更多...
Element-UI 下拉框单选转多选回显不清空绑定的值

Element-UI 下拉框单选转多选回显不清空绑定的值

需求 根据radio切换来更改下拉框是否多选 原因 单选和多选这两个 input 看上去没差别&#xff08;自身和层级都一致&#xff09;&#xff0c;vue出于提高性能&#xff0c;所以 vue 给复用了 解决方案 <template><section><el-radio-group v-model"radi…
阅读更多...
风储微网虚拟惯性控制系统simulink建模与仿真

风储微网虚拟惯性控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 风储微网虚拟惯性控制系统simulink建模与仿真。风储微网虚拟惯性控制系统是一种模仿传统同步发电机惯性特性的控制策略&#xff0c;它通过集成风力发电系统、储能系统和其他分…
阅读更多...
聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗？

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗？

聚丙烯PP它的化学特性是什么? UV胶水能够粘接聚丙烯PP吗&#xff1f; 聚丙烯&#xff08;Polypropylene&#xff0c;简称PP&#xff09;是一种热塑性聚合物&#xff0c;属于聚烯烃类塑料之一。以下是聚丙烯的一些化学特性&#xff1a; 1. 分子结构&#xff1a; 聚丙烯是由丙烯…
阅读更多...
再说vue响应式数据

再说vue响应式数据

请说一下你对响应式数据的理解 如何实现响应式数据据 对象 vue2 响应式核心代码 数组 vue2 处理缺陷Vue3则采用 proxy - vue3 响应式核心代码 请说一下你对响应式数据的理解 如何实现响应式数据据 数组和对象类型当值变化时如何劫持到。 对象 对象内部通过defineReactive方…
阅读更多...
如何将普通maven项目转为maven-web项目

如何将普通maven项目转为maven-web项目

文件-项目结构&#xff08;File-->Project Structure &#xff09; 模块-->learn&#xff08;moudle-->learn&#xff09; 选中需要添加web的moudle&#xff0c;点击加号&#xff0c;我得是learn&#xff0c;单击选中后进行下如图操作&#xff1a; 编辑路径 结果如下…
阅读更多...
Centos7 k8s 集群 - Rook Ceph 安装

Centos7 k8s 集群 - Rook Ceph 安装

环境准备 基础环境 系统名称操作系统CPU内存硬盘Kubernete 版本Docker版本IPmasterCentos74c4gsdb 20G1.17.023.0.1192.168.1.128node01Centos74c4gsdb 20G1.17.023.0.1192.168.1.129node02Centos74c4gsdb 20G1.17.023.0.1192.168.1.130node03Centos74c4gsdb 20G1.17.023.0.1…
阅读更多...
OpenHarmony4.0分布式任务调度浅析

OpenHarmony4.0分布式任务调度浅析

1 概述 OpenHarmony 分布式任务调度是一种基于分布式软总线、分布式数据管理、分布式 Profile 等技术特性的任务调度方式。它通过构建一种统一的分布式服务管理机制&#xff0c;包括服务发现、同步、注册和调用等环节&#xff0c;实现了对跨设备的应用进行远程启动、远程调用、…
阅读更多...
3d怎么按路径制作模型---模大狮模型网

3d怎么按路径制作模型---模大狮模型网

在3D建模中&#xff0c;按路径制作模型是一种常见的技术&#xff0c;特别适用于创建曲线、管道、绳索等线性形状的物体。虽然这项技术可能对初学者来说有些复杂&#xff0c;但通过一步步的指导和实践&#xff0c;你将能够掌握它。本文将详细介绍按路径制作模型的步骤&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023