一起学CC3200系列教程之跑马灯---库


版权所有,欢迎转载,请注明出处http://blog.csdn.net/hytgab

PDF下载:http://pan.baidu.com/s/1kTkSxmB

能力有限,英语不怎么好,难免有错,有问题请联系我,

QQ1519256298     [email protected]

实现跑马灯实验需要对CC3200设置,分成4个步骤


1、 引脚映射成GPIO模式,上拉下拉等

2、 使能GPIO的时钟

3、 配置GPIO:输入输出,

4、 向GPIO的端口写入数据

CC3200共有64引脚,共32个GPIO,分成4组,每组有8个,

所以CC3200的1个引脚有3中名称,

一种是基于引脚的,编号从0-63

一种是是基于总的GPIO,编号从0-31

一种是基于分组的GPIO,编号A0 –A3(或者A B C D)加(0-7)

引脚64的对应关系  :  PIN_64  ==   GPIO9   == GPIO A1_1

 

1、 设置引脚的映射,

库函数示例 PinModeSet(PIN_64, PIN_MODE_0);

<
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要实现Vant组件中的notice-bar的跑马灯效果,可以使用原生JS的定时器和CSS3动画来实现。具体步骤如下: 1. 首先,在HTML中创建notice-bar的DOM结构,例如: ``` <div class="notice-bar"> <div class="notice-bar-content">这里是跑马灯内容</div> </div> ``` 2. 在CSS中设置notice-bar的样式,例如: ``` .notice-bar { overflow: hidden; white-space: nowrap; } .notice-bar-content { display: inline-block; animation: notice-bar-scroll 10s linear infinite; } @keyframes notice-bar-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ``` 其中,设置overflow为hidden,可以隐藏超出notice-bar宽度的部分;设置white-space为nowrap,可以保证内容不换行;设置notice-bar-content为display:inline-block,可以让内容水平排列;设置animation为notice-bar-scroll,可以启用CSS3动画;设置transform为translateX,可以让内容水平移动。 3. 在JS中使用定时器来动态修改notice-bar的内容,例如: ``` const noticeBar = document.querySelector('.notice-bar'); const noticeBarContent = document.querySelector('.notice-bar-content'); const contentArr = ['这里是跑马灯内容1', '这里是跑马灯内容2', '这里是跑马灯内容3']; let index = 0; setInterval(() => { noticeBarContent.textContent = contentArr[index]; index = (index + 1) % contentArr.length; }, 5000); ``` 其中,使用setInterval来定时修改notice-bar的内容;使用textContent来设置内容(可以避免XSS攻击);使用index来轮流显示contentArr数组中的内容。 通过以上步骤,就可以实现Vant组件中的notice-bar的跑马灯效果了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值