Js使用---入门逻辑训练------

发布时间：2024年01月21日

js中变量的使用：！！！

<!-- 定义一个四位数的1234，计算各个位数的总和(total) -->

 ? <script>
 ? ? ? ?<!-- 方法一： -->
 ? ? ? ?var total;
 ? ? ? ?var number = 1234;
?
 ? ? ? ?var ge = number % 10;
 ? ? ? ?var shi = number / 10 % 10;
 ? ? ? ?var bai = number / 100 % 10;
 ? ? ? ?var qian = number / 1000 % 10;
 ? ? ? ?var total = (ge + shi + bai + qian)
 ? ? ? ?console.log("total=" + total)
 ? ? ? ? ? ?// 结果为：total=10.974000000000006
 ? ?</script>
 ? ? ? 
 ? ?<!-- 方法二： -->
 ? ? <script>
 ? ? ? ?var total;
 ? ? ? ?var number = 1234;
?
 ? ? ? ?var ge = parseInt(unmber % 10);
 ? ? ? ?var shi = parseInt(number / 10 % 10);
 ? ? ? ?var bai = parseInt(number / 100 % 10);
 ? ? ? ?var qian = parseInt(number / 1000 % 10);
 ? ? ? ?var total = (ge + shi + bai + qian)
 ? ? ? ?console.log("total=" + total)
 ? ?</script>
 ? ? ? ? ? ? ? ? ? ? 
猜字游戏：
 ? ? ? ?<script>
 ? ? ? ?function guessNumber() {
?
 ? ? ? ? ? ?var randomNamber = 0;
?
 ? ? ? ? ? ?if (Number == randomNamber) {
 ? ? ? ? ? ? ? ?alert("恭喜你答对了，就是这个数")
 ? ? ? ? ?  } else
 ? ? ? ? ? ?if (Number > randomNamber) {
 ? ? ? ? ? ? ? ?alert("不好意思！！！猜大了哦！!!,请再猜一个")
 ? ? ? ? ?  } else if (Number < randomNamber) {
 ? ? ? ? ? ? ? ?alert("猜大了哦")
 ? ? ? ? ?  }
?
 ? ? ?  }
 ? ? ? ?//如果都不是就从新玩一遍
 ? ?</script>
 ? ? ? ?
 ? randomNamber = Math.random();
 ? ?<br> 用户输入数据:
 ? ?<input type="0b" />
 ? ?<button οnclick="" class=""></button>
 ? ?<button οnclick="" class=""></button>
 ? ?<span id="res"></span>

2.表格

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? td{
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? background-color: bisque;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? }
? ? ? ? td:hover{
? ? ? ? ? ? background-color: blueviolet;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <table align="center" border="1" cellspacing="0" cellpadding="3px">
? ? ? ? <tr>
? ? ? ? ? ? <td colspan="2"></td> ? ? ? ? ? ?
? ? ? ? ? ? <td rowspan="2"></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td rowspan="2"></td>
? ? ? ? ? ? <td></td> ? ? ? ? ??
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td colspan="2"></td>
? ? ? ? </tr>
? ? </table>
</body>
</html>

3.热点图及视频

map+img
? ? img:usemap = #map的name
? ? map:name
? ? ? ? <area shape="rect/circle/poly" ?coords="坐标" href="这个形状对应的资源路径">?
? ??
audio
video
? ?src,controls,muted,autoplay,loop,source

4、表单

前端往后台发送数据的

我们今天的学习需要掌握十种input的表单形式，select,textarea。

form ?
? ?action:提交的后台地址
? ?method:get/post 请求提交的方法 ?
? ? ? ?get:参数传递是放在地址栏上通过url传送，不安全，有长度限制
? ? ? ?post:参数通过请求体发送，相对安全
?input:
? ? ?type:text,password,radio,checkbox,submit,button,reset,image,file,hidden
? ? ?name:传递数据
? ? ?value:值
? ? ?placeholder,required,readonly,disabled,checked....
?button:自带提交的按钮
?select~option
?textarea:多行文本域
5.框架

frameset和iframeset

页面布局

国字型 拐角型

<frameset rows="20%,50%,*" frameborder="0" >
? ? ?<frame src="hot.html" scrolling="no"/>
? ? ?<frameset cols="30%,40%,*">
? ? ? ? <frame src="hot.html" scrolling="no"/>
? ? ? ? <frame src="login.html" scrolling="no"/> ?
? ? ? ? <frame src="music.html" scrolling="no"/> ?
? ? ?</frameset>
? ? ?<frame src="music.html" scrolling="no"/> ? ? ? ?
</frameset>

1.2 iframe

内联框架：既保留框架作为模块分隔的优势，又能够和body和平共处

<!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>
? ? <p>
? ? ? ? <a href="login.html" target="fr">login</a>
? ? ? ? <a href="music.html" target="fr">music</a>
? ? ? ? <a href="hot.html" target="fr">hot</a>
? ? </p>
? ? <iframe name="fr" src="login.html" frameborder="0" scrolling="no" width="100%" height="400px"></iframe>
? ? <p>8888</p>
? ? &nbsp;&copy;2024
</body>
</html>

行内元素和块级元素的问题

块级：独占一行

行内：共占一行

注意：块级元素里面可以放行内元素，但是行内元素里面不要放块级元素

块级：div p ?h1-h6 ?ul-li ol-li ?dl-dt-dd ?table
行内：span ?a ? strong ?em ? img ? iframe

文章来源:https://blog.csdn.net/2301_77565910/article/details/135640286
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章