移动应用开发——作业2

最新推荐文章于 2023-10-16 18:54:53 发布
最新推荐文章于 2023-10-16 18:54:53 发布
阅读量364 收藏
点赞数
文章标签： 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45102232/article/details/117389144
版权

一、 内容及目标：

  1. 安装Web网站前端开发工具和服务器软件，推荐使用VSCode和Tomcat9。
  2. 掌握在本地计算机上发布网站的方法，使用手机通过局域网浏览自己的网站。不清楚Tomcat9虚拟目录设置的同学，可参考文件：配置虚拟目录-比较易于调试程序的方法.docx。第一步，将web源代码配置为web应用（虚拟目录），第二步，设置web应用的网站首页（默认文档）。
  3. 使用HTML5中 元素完成一个比较复杂的图形绘制，形状自己定。
  4. 编辑1种便于在手机屏幕上使用的导航栏。
  5. 设计1个html页面，包含三部分内容，实现CSS3 2D转换效果和CSS3 3D转换效果，设计一种适合手机Web网站上展示的CSS 3按钮。

二、 实验结果
1.使用HTML5中 元素完成一个比较复杂的图形绘制，形状自己定。
图形为一个静态的钟，分为表盘和表针两部分完成。
在这里插入图片描述
主要的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业二.1</title>
    <style>canvas {margin: 200px auto;}</style>
</head>
<body>
<canvas id="syh" width="300" height="300"></canvas>
<script>
    init();
    function init(){
        let canvas = document.querySelector("#syh");
        let ctx = canvas.getContext("2d");

        ctx.clearRect(0, 0, 300, 300); 
        ctx.save();

        ctx.translate(150, 150); 
        ctx.beginPath();
        ctx.arc(0, 0, 148, 0, 2 * Math.PI); 
        ctx.stroke();
        ctx.closePath();

        for (let i = 0; i < 60; i++){//绘制刻度。
            ctx.save();
            ctx.rotate(-Math.PI / 2 + i * Math.PI / 30);  
            ctx.beginPath();
            ctx.moveTo(110, 0);
            ctx.lineTo(140, 0);
            ctx.lineWidth = i % 5 ? 2 : 6;
            ctx.strokeStyle = i % 5 ? "red" : "black";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        ctx.restore();

        drawHand(Math.PI, 60, 6, "red", ctx);  //绘制时针
        drawHand(0, 80, 4, "green", ctx);  //绘制分针
        drawHand(Math.PI/2, 100, 2, "blue", ctx);  //绘制秒针   
    }
    function drawHand(angle, len, width, color, ctx){
        ctx.save();
        ctx.translate(150, 150); 
        ctx.rotate(-Math.PI / 2 + angle);  
        ctx.beginPath();
        ctx.moveTo(-4, 0);
        ctx.lineTo(len, 0); 
        ctx.lineWidth = width;
        ctx.strokeStyle = color;
        ctx.lineCap = "round";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
</script>
</body>
</html>

2.编辑1种便于在手机屏幕上使用的导航栏。
采用了宫格式的排列，每行四列，有对移动端做一定适配。
在这里插入图片描述
主要的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业二.2</title>
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <style>
        .daohang{
            overflow:hidden;
            background:#d2d2d2;
            margin:.15rem 0;
            padding-bottom:.5rem;
        }
        .daohang li{
            float:left;
            width:25%;overflow:hidden;
            margin-top:.25rem;
        }
        .daohang li a{
            text-decoration:none;
            display:block;
            text-align:center;
        }
        .daohang li a img{
            width:2rem;
            height:2rem;
            border-radius:100%;
            margin:.2rem 0;
        }
        .daohang li a em{
            display:block;
            font-style: normal;
            font-size: small;
            color:#666;
        }
    </style>
</head>
<body>
<ul class="daohang" >
    <li>
        <a href = "#">
            <img src="1.jpg" />
            <em>手机</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="2.jpg" />
            <em>平板电脑</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="3.jpg" />
            <em>台式机</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="4.jpg" />
            <em>笔记本电脑</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="5.jpg" />
            <em>耳机</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="6.jpg" />
            <em>充电宝</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="7.jpg" />
            <em>手环</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="8.jpg" />
            <em>智能家电</em>
        </a>
    </li>
</ul>
</body>
</html>

3.设计1个html页面，包含三部分内容，三部分内容之间使用“--------------------------”隔开：
(1) CSS3 2D转换效果，截图：
图形为一个动态的钟，分为表盘和表针两部分完成，表针可以根据现实时间转动。
在这里插入图片描述
(2) CSS3 3D转换效果，截图：
图形为六张照片组成的正方形3D动态模型。
在这里插入图片描述
(3) 设计一种适合手机Web网站上展示的CSS 3按钮。截图：
一个button按钮
在这里插入图片描述
主要的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>作业二.3</title>
<style>
    body {
        padding: 0;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.1)
    }

    .wrapper {
        perspective: 1200px;
    }

    .container {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 150px 150px;
        transform-style: preserve-3d;
        animation: boxanimation 10s ease-in-out infinite alternate;
    }

    .container .box {
        width: 200px;
        height: 200px;
        position: absolute;

        display: block;
        background-image: url('1.jpg');
        background-size: 100% 100%;
    }

    @keyframes boxanimation {
        0% {
            transform: rotateY(0deg) rotateX(45deg);

        }

        100% {
            transform: rotateY(360deg) rotateX(45deg);
        }
    }

    .container .box:nth-child(1) {
        transform: translateZ(100px);
    }

    .container .box:nth-child(2) {
        transform: rotateX(90deg) translateZ(100px);
        background-image: url('2.jpg');
    }

    .container .box:nth-child(3) {
        transform: rotateX(180deg) translateZ(100px);
        background-image: url('3.jpg');
    }

    .container .box:nth-child(4) {
        transform: rotateX(-90deg) translateZ(100px);
        background-image: url('4.jpg');
    }

    .container .box:nth-child(5) {
        transform: rotateY(90deg) translateZ(100px);
        background-image: url('5.jpg');
    }

    .container .box:nth-child(6) {
        transform: rotateY(-90deg) translateZ(100px);
        background-image: url('6.jpg');
    }
</style>
</head>
<body>
<canvas id="syh" width="300" height="300"></canvas>
<script>
init();
 
function init(){
    let canvas = document.querySelector("#syh");
    let ctx = canvas.getContext("2d");
    requestAnimationFrame(function step(){
        drawDial(ctx); //绘制表盘
        drawAllHands(ctx); //绘制时分秒针
        requestAnimationFrame(step);
    });
}
/*绘制时分秒针*/
function drawAllHands(ctx){
    let time = new Date();
 
    let s = time.getSeconds();
    let m = time.getMinutes();
    let h = time.getHours();
 
    let pi = Math.PI;
    let secondAngle = pi / 180 * 6 * s;  //计算出来s针的弧度
    let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度
    let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度
 
    drawHand(hourAngle, 60, 6, "red", ctx);  //绘制时针
    drawHand(minuteAngle, 106, 4, "green", ctx);  //绘制分针
    drawHand(secondAngle, 129, 2, "blue", ctx);  //绘制秒针
}
/*绘制时针、或分针、或秒针*/
function drawHand(angle, len, width, color, ctx){
    ctx.save();
    ctx.translate(150, 150); 
    ctx.rotate(-Math.PI / 2 + angle);  
    ctx.beginPath();
    ctx.moveTo(-4, 0);
    ctx.lineTo(len, 0);  
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    ctx.lineCap = "round";
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}
 
/*绘制表盘*/
function drawDial(ctx){
    let pi = Math.PI;
 
    ctx.clearRect(0, 0, 300, 300); 
    ctx.save();
 
    ctx.translate(150, 150);
    ctx.beginPath();
    ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周
    ctx.stroke();
    ctx.closePath();
 
    for (let i = 0; i < 60; i++){//绘制刻度。
        ctx.save();
        ctx.rotate(-pi / 2 + i * pi / 30);  
        ctx.beginPath();
        ctx.moveTo(110, 0);
        ctx.lineTo(140, 0);
        ctx.lineWidth = i % 5 ? 2 : 4;
        ctx.strokeStyle = i % 5 ? "blue" : "red";
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }
    ctx.restore();
}
</script>
<div>----------------------------------------------------</div>
<div class="wrapper">
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</div>
<div>----------------------------------------------------</div>
<button class="one">手机按钮</button>
</body>
</html>

三、 实验心得体会：

  1. 初步掌握了HTML+CSS+JS的前端WEB知识
  2. 熟悉了VSCODE的使用
  3. 开始涉猎移动端开发
赴约如期
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
移动应用开发作业（全）.zip
06-14
本资源为移动应用开发作业，里面有物联网智慧工厂的部分代码，感兴趣的同学可以下载下来玩一玩。
移动应用开发-大作业-项目总结.doc
07-04
Vue_Demo_音乐_电影评论详细报告，是一次Vue大作业时候写的报告，包括设计、需求分析、功能介绍等。
《移动应用开发》作业——HTML、CSS
无限迭代中......
03-19 568
一、内容及目标 安装Web网站前端开发工具和服务器软件，推荐使用VSCode和Tomcat9。 掌握在本地计算机上发布网站的方法，使用手机通过局域网浏览自己的网站。不清楚Tomcat9虚拟目录设置的同学，可参考文件：配置虚拟目录-比较易于调试程序的方法.docx。第一步，将web源代码配置为web应用（虚拟目录），第二步，设置web应用的网站首页（默认文档）。 使用HTML5中<canvas> 元素完成一个比较复杂的图形绘制，形状自己定。 编辑1种便于在手机屏幕上使用的导航栏。 设计1
安卓作业----慕课移动应用开发作业11之运用ViewPager、Handler实现图片自动轮播效果，点击图片跳转到对应activity
baidu_41860619的博客
04-08 1995
本博客运用ViewPager、ImageView、TextView等进行界面布局，运用Handler实现图片的自动轮播效果，当点击相应图片，可以跳转到相对应的Activity。 同时这也是中国大学慕课移动终端应用开发的网课作业11，我会持续更新我的作业，如果有需要关注一下吧 说明 1.此作业涉及的文件较多，我尽量将文件目录和实现方法写清楚，如有实现不出效果的可以评论或私聊我 2.由于很多文件都是重...
Android移动开发第一次作业
追风赶月莫停留，平芜尽处是春山
10-15 248
【代码】Android移动开发第一次作业。
移动应用开发——作业1
weixin_45102232的博客
05-29 2875
题目一：请查找资料，简单描述Web应用开发框架Vue.js、React.js、Angular.js的特点，及在移动应用方面的发展，每种400字至600字。 1. Web应用开发框架——Vue.js： 特点： Vue.js是一套用于构建用户界面的渐进式JavaScript框架。 自带有各种可用于构建用户界面的备选工具，被设计为可以自底向上逐层应用。核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SP
安卓移动应用开发（安卓系统开发教程）
阿利同学的博客
06-04 1370
引导页使用第三方的一个banner框架实现，自动循环播放设置的引导图，程序内置4个图，循环自动播放，点击进入，进入到登陆页面。注册页面，输入手机号后，获取验证码（只是例子），按钮倒计时60s后可再次获取，注册时会检查手机号是否可用。对商品可以发布评价，发布的内容会记录到数据库，其他用户登录后，也可看到，用户名采用*进行脱敏处理。商品详情页，按照要求，展示商品图片、标题、详情。
移动开发作业一
m0_63469711的博客
10-16 383
通过本次作业，我对Android应用程序的开发流程和主要组件有了更深入的理解。实践中我学到了如何处理UI事件、实现不同Fragment之间的通信，并通过整个过程更好地理解了Android开发的一般思路。在这次的Android应用程序开发作业中，我们主要学习了如何使用Android Studio和相关的开发工具，以及如何创建和管理Android应用的不同组件。使用了recycleview组件，还实现了点击弹出文字的功能。的显示和隐藏，实现底部导航栏的点击切换页面。，用于呈现底部Tab的图标和文字。
安卓移动开发课程设计/Android期末大作业- 安卓小游戏-猜数字游戏（支持保存游戏）
最新发布
12-30
安卓移动开发课程设计/Android期末大作业- 安卓小游戏——猜数字游戏（支持保存游戏） - 运行中有什么问题可以私聊博主，本人高级安卓工程师，主页置顶有常见爆红解决的方法，以及更多代码项目 ## 项目备注 1、该...
AndroidStudio移动应用开发任务教程（微课版）_PPT课件和教案.zip
07-10
AndroidStudio移动应用开发任务教程（微课版）_PPT课件和教案.zip
基于移动终端APP平台下混合教学模式的应用研究——以高职院校健美操课程教学为例.pdf
08-26
总结来说，基于移动终端APP平台的混合教学模式在高职院校健美操课程中有着广阔的应用前景。它能激发学生的学习热情，提升教学效果，同时也对教师的教学方式提出了新的挑战，要求教师不仅要精通健美操教学，还要掌握...
Android移动终端开发大作业2019
12-03
Android移动终端开发大作业2019 Android移动终端开发大作业2019
ninder-app:移动应用程序
03-16
ninder-app:移动应用程序
基于移动互联网和APP应用的高职信息课程教学——以PS中蒙版应用教学为例.pdf
08-26
1. APP 应用开发: 文章中提到利用APP作为教学工具，提升学生学习体验。 2. 数据分析: 虽未直接涉及数据分析，但在教育信息化背景下，数据分析可能是改进教学效果的重要手段。 3. 参考文献: 文章可能引用了其他相关...
高校校园APP的设计开发——以武威职业学院为例.pdf
08-26
《高校校园APP的设计开发——以武威职业学院为例》 随着互联网技术的飞速发展和智能手机的普及，移动互联网应用程序已经成为日常生活的重要组成部分，尤其在高校校园中，师生们越来越多地依赖于移动应用来完成各种...
Android综合项目——网上订餐 1.0版 Tomcat安装
weixin_63730566的博客
10-13 2453
准备工作之：安装配置Tomcat服务器 + 解决问题方法
2018-2019-2 20189205《移动平台应用开发实践》第一周作业
weixin_30344995的博客
03-03 104
初识JAVA JAVA基础知识 Java是一种面向对象的编程语言，面向对象程序设计(Object Oriented Programming)，其本质是以建立模型体现出来的抽象思维过程和面向对象的方法。 一个Java程序可以认为是一系列对象的集合，而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。 对象：对象是类的一个实例，有状态和行为。 类：类是一个模板，它描...
手机移动开发大作业 -- 仿淘宝app
森宝的博客
07-21 3065
前言 : 本次大作业因为时间不充裕,所以只做了一部分功能。 PS : 购物车因为没有用数据库存商品,所以有bug。 项目代码: 有空再上传吧... ...
基于微信小程序的计算机类课程教学平台的设计及应用.docx
11-03
"这篇毕业论文详细探讨了基于微信小程序的计算机类课程教学平台的设计与应用。作者通过研究背景、目的和意义，阐述了在移动互联网时代微信小程序在教学中的重要性。论文深入介绍了微信小程序的基础知识，包括开发...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值