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

最新推荐文章于 2024-05-09 15:15:12 发布

白白♛～

最新推荐文章于 2024-05-09 15:15:12 发布

阅读量741

点赞数 18

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_77565910/article/details/135640286

版权

js中变量的使用：！！！

   <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

页面布局

国字型拐角型

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>
 ©2024
</body>
</html>

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

块级：独占一行

行内：共占一行

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

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

白白♛～

关注

18
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Js使用---入门逻辑训练------

-- 方法一： -->var total;// 结果为：total=10.974000000000006</script>-- 方法二： --><script>var total;
复制链接

扫一扫