中国结、倒写的乘法口诀表、简易的计算器

最新推荐文章于 2024-09-10 11:20:27 发布
最新推荐文章于 2024-09-10 11:20:27 发布
阅读量257 收藏 2
点赞数 6
文章标签： html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BHGVGHJK/article/details/120321404
版权

1、中国结

（1）确定中国结的构成【一个正方形+十字架+四个拱形+两个尖角圆】

（2）建立对应的盒子并给予对应的class标签

（3）给对应的标签进行css样式

<body>
<div class="k1">
    <div class="fang">
        <div class="y1"></div>
        <div class="y2"></div>
        <div class="y3"></div>
        <div class="y4"></div>
        <div class="y5"></div>
        <div class="y6"></div>
        <div class="s1"></div>
        <div class="s2"></div>
    </div>

</div>
</body>
<style type="text/css">
        body{
            background-color: aquamarine;
        }
        .k1{
            width: 200px;
            height: 200px;
            top: 200px;
            left: 200px;
            position: absolute;
            background-color: aquamarine;
        }
        .fang{
                width:80px;
                height:80px;
                top: 55px;
                left: 55px;
                border:5px solid red;
                position: absolute;
                transform:rotate(45deg);
        }
        .y1{
            width: 37px;
            height: 40px;
            top: -50px;
            left: -5px;
            border: 5px solid red;
            border-radius:50% 50% 0 0 ;
            position: absolute;

        }
        .y2{
            width: 38px;
            height: 38px;
            top: -5px;
            left: -48px;
            border: 5px solid red;
            border-radius:50% 0  0 50%  ;
            position: absolute;

        }
        .y3{
            width: 35px;
            height: 37px;
            top: 38px;
            left: 80px;
            border: 5px solid red;
            border-radius:0 50% 50%  0  ;
            position: absolute;

        }
        .y4{
            width: 38px;
            height: 35px;
            top: 80px;
            left: 37px;
            border: 5px solid red;
            border-radius:0  0 50% 50%  ;
            position: absolute;

        }
        .y5{
            width: 38px;
            height: 35px;
            top: -45px;
            left: 80px;
            border: 5px solid red;
            border-radius:50% 50% 50% 0;
            position: absolute;

        }
        .y6{
            width: 38px;
            height: 35px;
            top: 80px;
            left: -48px;
            border: 5px solid red;
            border-radius:50% 0 50% 50%  ;
            position: absolute;

        }
        .s1{
            width:90px;
            height:90px;
            top: -5px;
            left: 37px;
            border:5px solid red;
            border-bottom: none;
            border-top: none;
            border-right: none;
            position: absolute;
        }
        .s2{
            width:90px;
            height:90px;
            top: 38px;
            left: -5px;
            border:5px solid red;
            border-bottom: none;
            border-left: none;
            border-right: none;
            position: absolute;
        }
    </style>

2、倒写的乘法口诀表

//设置样式，防止口诀表靠在一起，影响美观 
   <style type="text/css">
        span{
            font-size:20px ;
            background-color: #ef05cf;
            margin-top: 10px;
            margin-left: 10px;
            display: inline-block;
        }
    </style>
<script type="text/javascript">
//行
    for(var i=9;i>0;i--){
//列
        for(var j=1;j<=i;j++){
//利用sum来存储ixj的值
            var sum=i*j;
            document.write('<span>'+j+"*"+i+"="+sum+" "+'</span>');
        }
        document.write("<br />")
    }
</script>

3、简易的计算器

（1）、外观

 <div class="ke"><!--外壳-->
        <!-- <h2>简易版计算器</h2> -->
        <div class="ke2">
            <input type="text" id="input"><!--显示屏-->
            <div class="kuangqilai"><!--按键区-->
                <div class="shang"><!--上层 / * - -->
                    <button class="button" onclick="qing()">清除</button>
                    <button class="button" onclick="shu('/')">/</button>
                    <button class="button" onclick="shu('*')">*</button>
                    <button class="button" onclick="shu('-')">-</button>
                </div>
                <div class="zhong"><!--中层 7 8 9 4 5 6 + -->
                    <div class="bao">
                        <button class="button shu" onclick="shu(7)">7</button>
                        <button class="button shu" onclick="shu(8)">8</button>
                        <button class="button shu" onclick="shu(9)">9</button>

                        <button class="button shu" onclick="shu(4)">4</button>
                        <button class="button shu" onclick="shu(5)">5</button>
                        <button class="button shu" onclick="shu(6)">6</button>
                    </div>
                    <button id="jia" onclick="shu('+')">+</button>  
                </div>
                <div class="xia"><!--下层 1 2 3 0 .  确定-->
                    <div class="bao2">
                        <button class="button shu" onclick="shu(1)">1</button>
                        <button class="button shu" onclick="shu(2)">2</button>
                        <button class="button shu" onclick="shu(3)">3</button>
                        <button id="ling" class="shu" onclick="shu(0)">0</button>
                        <button id="dian" class="shu" onclick="shu('.')">.</button>
                    </div>

                    <button id="end" onclick="suan()">enter</button>

（2）、css样式

<style>
    h2{
    text-align: center;
    padding-bottom: 200px;
}
.ke{
    width: 400px;
    height: 600px;
    border-radius: 7%;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -200px;

}
.ke2{
    width: 300px;
    height: 500px;
    background: rgb(186, 181, 181);
    border-radius: 7%;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -150px;
}
input{
    margin-top: 5%;
    margin-left: 9%;
    width: 80%;
    height: 7%;
    border-radius: 20%;
}
.kuangqilai{
    width: 80%;
    height: 79%;
    margin-left: 9%;
    margin-top: 20px;
}

.button{
    width: 55px;
    height: 76px;
    margin-left: 1px;
    margin-top: 3px;
}

.shang{
    margin-top: -2px;
    margin-left: 1px;
}
.zhong{
    margin-left: 1px;
    width: 100%;
    height: 155px;
}
.bao{
    margin-top: 5px;
    width: 178px;
    float: left;
}
#jia{
    margin-top: 8px;
    margin-left: 5px;
    float: left;
    width: 55px;
    height: 153px;

}
.xia{
    margin-left: 1px;
    width: 100%;
    height: 160px;
}
.bao2{
    margin-left: -1px;
    width: 178px;
    float: left;
}
#ling{
    margin-left: 1px;
    margin-top: 8px;
    margin-right: 5px;
    float: left;
    width: 115px;
    height: 63px;
}

#dian{
    width: 55px;
    height: 63px;
    margin-left: 1px;
    margin-top: 8px;
}
#end{
    margin-top: 5px;
    margin-left: 5px;
    width: 55px;
    height: 148px;
}
</style>

（3）、js计算部分

    <script>
        function shu(s){
            $("#input").val($("#input").val()+s);
        }
        function suan(){
            $("#input").val(eval($("#input").val()))
        }
        function qing(){
            $("#input").val(" ");
        }
    </script>

AKA悍匪-洋洋
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
九九乘法表运算
qq_43267265的博客
01-23 418
九九乘法表：
C++Builder的基本功能
huang714的专栏
05-07 4497
C++Builder的基本功能 我们用高级语言写程序，我们很得意，因为高级语言比较接近人类的语言，使我们用起来得心应手，所以我们当然得意。但我们更得意的一定是让程序代码赶快变成可执行文件。 无论是在写代码的过程，还是最后要编译成可执行文件，都需要有一个工具存在。这一工具一般称为编程集成环境（IDE）。之所以称为集成，是因为从写代码到最后软件的出炉，我们需要它的地方实在太多了，这里列出其中...
计算机发展简史
lywstuding的博客
02-09 8100
计算机发展简史
程序员考公指南1-59
菜鸡成长站
04-03 8068
4 篇材料，每个材料 5 个选择题，一共 20 题资料分析特别注重“结合选项分析”的能力考查加减法占比 20%；乘法占比 10%；除法占比 70%左右关键词——主体、客体主体：行为、活动发出者客体：行为、活动承受者常考主客体1.行政机关：各级政府（国务院……街道办/乡镇政府、公安等）。涉及“局”都是行政机关，如公安局。2.权力机关：全国人大、地方人大3.司法机关：司法机关只有两个，为法院、检察院4.事业单位：学校、医院、科研所、广播新闻出版等。
JavaScript基础总结
zzzhhhy的博客
05-20 2518
一. 计算机基础 bit < byte < kb < GB < TB<..... 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位） 字节(Byte)：1B = 8b 千字节(KB)：1KB = 1024B 兆字节(MB)：1MB = 1024KB 吉字节(GB): 1GB = 1024MB 太字节(TB): 1TB = 1024GB 二. 初识 JavaScript 1.初识 JavaScript 1.1 JavaScri......
电脑史话
hunterzone的专栏
11-16 1万+
1、计算机始祖 从1980年8月到1981年8月，在整整一年的时间里，埃斯特奇领导着“国际象棋”工程计划13人小组奋力攻关。“当时很少有人体会到，这一小组人即将改写全世界的历史。”（英特尔华裔副总裁虞有澄语）据说，IBM公司后来围绕PC机的各项开发，投入的力量逐步达到450人，英特尔公司也组成“特殊客户部”为PC机供应高质量的芯片。  　　根据协定，微软公司应该为PC机提供包括BA
Shell-基础部分
热门推荐
weixin_41547423的博客
09-08 2万+
1. Shell脚本介绍 文章目录1. Shell脚本介绍1. Shell脚本1. 什么是Shell2. shell作用详析3. 常用的shell类型4. shell脚本格式2. shell和shell脚本的区别3. 交互式shell和非交互式shell4. 运行shell脚本的两种方法1. 作为可执行的程序2. 作为解释器参数5. 查询指令是否为内建命令2. shell脚本常用的命令1. 常用命令1. cat,head,tail命令2. find命令3. 计划任务crond和crontab4. &
【转】告诉你外语学习的真实方法及误区分析(精编版)-part 3
weixin_30645617的博客
08-26 4280
今天逛itpub，发现了一篇很好的文章，漏屋老师在天涯写的，八戒兄转到itpub的。太长了，看得我头疼，所以ctrl+V到此，以后慢慢看。原帖地址是：http://www.itpub.net/viewthread.php?tid=845347&extra=&page=1 =================================================...
计算机简史
weixin_30258027的博客
05-12 8474
1、计算机始祖 从1980年8月到1981年8月，在整整一年的时间里，埃斯特奇领导着“国际象棋”工程计划13人小组奋力攻关。“当时很少有人体会到，这一小组人即将改写全世界的历史。”（英特尔华裔副总裁虞有澄语）据说，IBM公司后来围绕PC机的各项开发，投入的力量逐步达到450人，英特尔公司也组成“特殊客户部”为PC机供应高质量的芯片。 　　根据协定，微软公司应该为PC机提供包括BASIC在内的系列...
二年级数学上册 4.3信息窗3学做中国结8的乘法口诀导学案2 青岛版 学案.doc
10-21
《二年级数学上册 4.3信息窗3学做中国结8的乘法口诀导学案2 青岛版 学案》是针对小学二年级学生的数学教学资料，旨在通过“学做中国结”的情境，帮助学生巩固8的乘法口诀，深化对乘法意义的理解，并提升他们的应用...
新江苏苏教版二年级上册数学 第9课时 乘法口诀表 教学课件.pptx
10-12
课堂小结时，老师引导学生回顾整个学习过程，检查他们对乘法口诀表的掌握程度，鼓励学生自我评估，以此促进自主学习和反思。 总的来说，本课时以乘法口诀表为核心，通过多种教学手段和活动，旨在帮助二年级学生深入...
二年级数学上册 4.3信息窗3学做中国结8的乘法口诀导学案1 青岛版 学案.doc
10-21
二年级数学上册 4.3信息窗3学做中国结8的乘法口诀导学案1 青岛版 学案.doc
16的乘法口诀
11-19
- 使用口诀写出两个乘法算式：3×6=18 和 6×3=18； - 填写表格并说出相应的口诀：给出部分乘积结果，让学生填写缺失的部分，并说出对应的乘法口诀。 这些练习题的设计既检验了学生对乘法口诀的理解程度，也有助于...
【2024】前端学习笔记1-HTML主体框架-文本标签
最新发布
皮皮的博客
09-10 1092
本文讲了HTML主题框架，标签含义及标题、段落、加粗、斜体、下划线、上标、下标、内置容器、换行等标签的基本使用。
【HTML】置换元素（替换元素）
衣乌安、随笔
09-06 307
● 它的内容不是由元素的标签内的内容决定的，而是由元素的属性决定的。● 可以通过CSS设置宽度和高度。
HTML 基础知识详解与代码示例
weixin_63556308的博客
09-05 1094
用于输出一些特殊的字符，因为有些特殊字符不能直接在网页中显示。默认情况下打开新网页时老网页会关闭，可使用。用于传递参数和数据，使用。
用HTML写一个动态的的电子相册实战详细案例
weixin_47139678的博客
09-05 631
用HTML写一个动态的的电子相册实战详细案例
Java学习Day37：HTML 第六章：黄金国（项目思路梳理）
weixin_51721783的博客
09-05 334
数据库设计使用一张表（course）设计。
Java课程设计：构建简易计算器
"Java课程设计----简易计算器.doc" 这篇文档是关于使用Java语言进行面向对象课程设计的一个项目，目标是创建一个简易计算器的图形用户界面（GUI）应用程序。设计者需要利用学到的Java知识，包括GUI编程，实现计算器...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值