博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
慕课网学习手记--炫丽的倒计时效果Canvas绘图与动画基础
阅读量:6457 次
发布时间:2019-06-23

本文共 639 字,大约阅读时间需要 2 分钟。

1.在慕课网上学了免费的前端课程--炫丽的倒计时效果Canvas绘图与动画基础,老师讲的很棒,而且课程是老师通宵录制的,实在是我辈学习的楷模。

2.课程的内容是,绘制倒计时数字--》实现倒计时的动画--》实现炫丽的数字倒计时--》修改成实时时钟--》倒计时进入其他网页

3.该免费课程的视频链接:https://www.imooc.com/learn/133      最终的效果实现代码在最后的练习中都可以获得    实现的倒计时进入其他网页是课程评论中的大神意见   在此多多感谢!

代码详情:

1.屏幕的自适应

首先在countdown.js中计算倒计时数字的大小,将其放在整个画面的合适位置,视频实现了将代码放在屏幕的中间,左右各留出了10%.

具体的代码截图:

但是在html中需要将html body canvas 标签的style属性   都加上height:100%   将整个页面撑开

2.具体的实现代码就不贴出来了  因为都是手动跟着老师的讲解敲出来的  最终的效果截图

3 在countdown.js的代码中将倒计时的结束时间,改成想要的事件间隔  我设置的是倒数10个数   跳转到另一个界面  跳转到了慕课网的主界面

具体代码

在getCurrentShowTimeSeconds中加入判断  确定倒计时的时间为0

调用的Wopen()函数,就是window.open打开一个新的网页

转载于:https://www.cnblogs.com/xiaomai0379/p/8745754.html

你可能感兴趣的文章
使用cookie,点击关闭一天后显示的弹窗
查看>>
锚点盒子随滚动条浮动
查看>>
T4 生成指定DB表实体
查看>>
ASP.NET网站运行常见错误以及解决方法(持续更新)
查看>>
在Visio里加上、下标方法
查看>>
C/C++经典面试题
查看>>
【Python】安装配置Anaconda
查看>>
rem布局下使用背景图片和sprite图
查看>>
团队作业7——第二次项目冲刺(Beta版本)-第一篇
查看>>
iOS - 常用本机URL跳转设置
查看>>
Linux C多线程编程
查看>>
Word2Vec中文语料实战
查看>>
4.5Python数据处理篇之Matplotlib系列(五)---plt.pie()饼状图
查看>>
D3.js v4版本 按住shift键框选节点demo
查看>>
Unity IOC简单认知
查看>>
DIV+CSS规范命名大全集合
查看>>
php ZeroMQ 的使用
查看>>
Codewar python训练题全记录——持续更新
查看>>
Java运行报错问题——Picked up JAVA_TOOL_OPTIONS: -agentlib:jvmhook
查看>>
(二)Struts.xml文件详解
查看>>