WEB APIs day4 (2)

三、M端事件

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>M端事件</title><style>div {width: 300px;height: 300px;background-color: pink;}</style>
</head><body><div></div><script>// 只有移动端才有效果const div = document.querySelector('div')// 1. 触摸div.addEventListener('touchstart', function () {console.log('开始触摸了')})// 2. 离开div.addEventListener('touchend', function () {console.log('离开了')})// 3. 移动div.addEventListener('touchmove', function () {console.log('移动')})</script>
</body></html>

四、JS插件

在M端做轮播图非常麻烦,为了节省事件,我们一般都是用的JS插件去完成
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
然后直接在demos 里面打开序号30 的就可以了
在这里插入图片描述在这里插入图片描述
样式复制完就复制结构,然后再复制js
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>移动端轮播图</title><link rel="stylesheet" href="./css/swiper.min.css"><style>.box {position: relative;width: 800px;height: 300px;background-color: pink;margin: 100px auto;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper {/* 让它不超出 */overflow: hidden;width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><div class="box"><!-- 结构一定要放到box里面去因为我们轮播图就要box这么大 --><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-pagination"></div></div></div><!-- 引入js --><script src="./js/swiper.min.js"></script><!-- 调用js --><!-- Initialize Swiper --><script>// new swiper 实例化var swiper = new Swiper(".mySwiper", {// 小圆点pagination: {el: ".swiper-pagination",},// 自动播放autoplay: {delay: 1000,//1秒切换一次disableOnInteraction: false,   //鼠标点击 触摸之后,自动继续播放},// 可以键盘控制swiperkeyboard: {enabled: true,onlyInViewport: true,},});</script><!-- 我们想要给它添加一个自动播放效果 -->
</body></html>

游乐园案例

第一步引入,一定要将min.js,min.css放在游乐园(FC)的目录下,不能乱放。在这里插入图片描述
复制过来的css代码就不放index.css里面了,直接放在这里,如果要放也是放在less里面,index.css是通过less来写的。把结构复制粘贴到banner盒子里面去。js一定要放在引用的swiper下面,因为这样才能实例化。
小圆点是可以改变掉的,我们可以直接覆盖掉前面的。
在这里插入图片描述
发现选中的小圆点颜色也被覆盖掉了。在这里插入图片描述
滑动最后一张轮播图的时候发现有回弹效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游乐园移动端</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入字体图标 --><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><!-- 引入index.css --><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/swiper.min.css"><style>/* 复制过来的css代码就不放index.css里面了,直接放在这里,如果要放也是放在less里面,index.css是通过less来写的 */html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}/* 小圆点是可以改变掉的,我们可以直接覆盖掉前面的 */.swiper-pagination-bullet {background: #fff;opacity: .8;}/* 发现高亮也被覆盖掉了 */.swiper-pagination-bullet-active {background: pink;}</style>
</head><body><!-- 页面主体部分 --><div class="main"><!-- 轮播图模块 --><div class="banner"><!-- <ul><li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li></ul> --><!-- 轮播图模块 --><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><!-- 这个已经给我们做了定制,有几张图片就会给我们生成几个小圆点,跟bootstrap不一样,bootstrap的小圆点要跟着一起改变 --><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div></div><!-- 标题模块 --><div class="title"><h4>乐园活动</h4></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div></div><!-- 底部盒子 --><footer class="toolbar"><a href="#" class="active"><i class="iconfont icon-index-copy"></i><span>首页</span></a><a href="#"><i class="iconfont icon-youhuiquan"></i><span>卡卷</span></a><a href="#"><i class="iconfont icon-index-copy"></i><span>首页</span></a></footer><!-- 引入js文件 --><script src="./js/flexible.js"></script><script src="./js/swiper.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',},autoplay: {delay: 3000,//3秒切换一次},});</script>
</body></html>

五、综合案例

在这里插入图片描述在这里插入图片描述
这个案例主要练习的是对数据的操作,虽然频繁地去渲染会耗费性能,但是这种开发我们最后都不是用的dom去开发,而是vue,它就没有这种性能问题。
在这里插入图片描述在这里插入图片描述
tbody.appendChild(tr) 因为它是后追加,所以它是数组原来有几条数据,就把几条数据渲染出来,再在原来的基础上往上面放,就会出现下面重复渲染之前的数据的情况。为了解决这样的问题,我们应该把tbody里面的数据清空之后再渲染数据。
在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
删除不是删除的dom元素,而是数组里面的数据。有可能数据很多,所以考虑用事件委托来做,就不用把所有的小a获取过来了。td,tr都很多,再往上找所以事件委托给tbody,tbody只有一个

在这里插入图片描述在这里插入图片描述在这里插入图片描述
非空判断:
表单你想要拿数据,必须要有name,这5个表单的特点是就它们有name,其他的标签都没有name属性。
把所有带有name属性的表单获取过来,是一个数组。然后我们挨个遍历,只要有一个它的value值为空,我们就返回错误,中断这次录入。
中断的关键字是return。因为我们的submit是在一个函数里面的,return是退出函数,一退出函数就不再执行了,所以它退出的是函数。
别一点击就开始判断了,按道理一点击应该先阻止默认行为再进行判断。只要几个表单有一个的值为空都不让通过。
写在创建对象的前面,阻止默认行为的后面。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生信息管理</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名:<input type="text" class="uname" name="uname" />年龄:<input type="text" class="age" name="age" />性别:<select name="gender" class="gender"><option value=""></option><option value=""></option></select>薪资:<input type="text" class="salary" name="salary" />就业城市:<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr></thead><!-- 追加是爸爸追加孩子  追加行就是追加给tbody --><tbody><!-- <tr><td>1001</td><td>欧阳霸天</td><td>19</td><td>男</td><td>15000</td><td>上海</td><td><a href="javascript:">删除</a></td></tr> --></tbody></table><script>// 获取元素const uname = document.querySelector('.uname')const age = document.querySelector('.age')const gender = document.querySelector('.gender')const salary = document.querySelector('.salary')const city = document.querySelector('.city')// 获取tbody元素  标签不需要加.const tbody = document.querySelector('tbody')// 声明一个空的数组, 增加和删除都是对这个数组进行操作const arr = []// 1. 录入模块// 1.1 表单提交事件const info = document.querySelector('.info')// 是提交事件而不是点击事件// 表单有两个按钮,一个提交按钮,一个重置按钮 submit resetinfo.addEventListener('submit', function (e) {// 当点击录入之后,会默认跳转,显示不了打印的内容// 阻止默认行为  不跳转e.preventDefault()// console.log(11)// 非空判断// 这里进行表单验证 如果不通过,直接中断,不需要添加数据// 获取所有带有name属性的元素const items = document.querySelectorAll('[name]')// 一点击就开始遍历循环for (let i = 0; i < items.length; i++) {if (items[i].value === '') {return alert('输入内容不能为空')}}// 点击录入之后我们就可以拿到这些值,拿到值之后就可以把它以对象的形式存到数组里面去// 创建新的对象const obj = {// 序号与数组的长度有关stuId: arr.length + 1,// 第一个uname指的是属性名,第二个uname指的是表单的值,刚好两者的名字一样而已uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value}// console.log(obj)// 追加到数组里面arr.push(obj)// console.log(arr)// 输入完点录入之后表单上面还是有数据,正常情况下我们要清空// 清空表单// info就是表单,表单就是它自己// 表单也有提交事件,它有个事件叫做重置(value都为空的方式太麻烦了stuId,uname...都要设置为空)this.reset()// 函数不调用,自己不执行// 调用渲染函数render()})// 数组添加一条要渲染,删除一条要渲染,相同的代码我们可以选择封装函数 // 2. 渲染函数 因为增加和删除都需要渲染function render() {// 为解决这个bug,应该先清空tbody以前的行,再把最新数组里面的数据渲染完毕 // 代码从上往下执行,每次都能清空tbody之后再渲染tbody.innerHTML = ''// 渲染的第一步是把数组拿过来,看看有几条数据就可以渲染了// 遍历arr数组for (let i = 0; i < arr.length; i++) {// 生成 tr  tr不能为空// 不能是querySelector 因为页面中没有行,行是生成的const tr = document.createElement('tr')// 这个a是通过for循环遍历出来的,在生成这个标签的时候连着自定义属性一块儿写上// 循环是从上往下去遍历,第一次索引号是0,0我们生成第一条数据,所以它的索引号就是 itr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a></td>`// 追加元素  父元素.appendChild(子元素)tbody.appendChild(tr)   //因为它是后追加,所以它是数组原来有几条数据,就把几条数据渲染出来,再在原来的基础上往上面放}}// 3. 删除操作// 3.1 事件委托  tbodytbody.addEventListener('click', function (e) {// 给a绑定一个自定义属性,绑定它的序号,然后拿到0,1,在数组里面删掉即可// a链接的自定义属性,以前我们是手动一个一个添的,其实真正开发中是生成的// tbody里面的元素有很多,有tr,td,等,我们点aif (e.target.tagName === 'A') {// alert(11)// 当我点完a之后要拿到当前元素的自定义属性  data-id// console.log(e.target.dataset.id)// 删除arr 数组里面对应的数据arr.splice(e.target.dataset.id, 1)console.log(arr)// 不管是添加还是删除,数组都发生变化了,要重新渲染, 渲染函数之后,重新执行遍历,遍历的时候少了一条,所以在页面追加的时候就少追加一条// 重新渲染render()}})</script>
</body></html>

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/11767.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

下级平台级联安防视频汇聚融合EasyCVR平台,层级显示不正确是什么原因?

视频汇聚平台安防监控EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTMP、FLV、HLS、WebRTC等…

安全基础 --- html基础标签 + DNS工作原理

html基础标签 &#xff08;1&#xff09;id id属性是元素在网页内的唯一标识符。 比如&#xff0c;网页可能包含多个<p>标签&#xff0c;id属性可以指定每个<p>标签的唯一标识符。 <p id"p1"></p> <p id"p2"></p>…

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jul 2023)

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jul 2023) Windows 11, version 22H2 官方原版&#xff0c;2023 年 7 月 更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作…

vue实现excel数据下载,后端提供的list由前端转excel并下载

前言,因为项目需求需要,我们需要把后端传来的list转成excel模板,并且下载下来) 之前有用的插件,但是会有少0的情况,如下 所以采用另一个项目用过的方法,最终完美实现效果,如下: 1,首先我们来看下后端提供的数据结构 2,具体前端代码如下 封装的组件,需要的同学直接copy就行(这…

苍穹外卖Day01项目日志

1.软件开发流程和人员分工是怎样的&#xff1f; 软件开发流程 一个软件是怎么被开发出来的&#xff1f; 需求分析 先得知道软件定位人群、用户群体、有什么功能、要实现什么效果等。 需要得到需求规格说明书、产品原型。 需求规格说明书 其中前后端工程师要关注的就是产品原…

数据库缓存服务——NoSQL之Redis配置与优化

目录 一、缓存概念 1.1 系统缓存 1.2 缓存保存位置及分层结构 1.2.1 DNS缓存 1.2.2 应用层缓存 1.2.3 数据层缓存 1.2.4 硬件缓存 二、关系型数据库与非关系型数据库 2.1 关系型数据库 2.2 非关系型数据库 2.3 关系型数据库和非关系型数据库区别&#xff1a; 2.4 非…

B076-项目实战--宠物上下架 展示 领养 收购订单

目录 上下架功能提供后台宠物列表实现 前台展示前台宠物列表和详情展示店铺展示 领养分析前台后端PetControllerPetServiceImpl 订单需求分析可能产生订单的模块订单模块额外功能 订单设计表设计流程设计 集成基础代码收购订单创建订单前端后端 上下架功能提供 后台宠物列表实…

深度学习算法的计算量

文章目录 一、FLOPs与FLOPS二、参数量parameters三、Latency与FPS四、结论 一、FLOPs与FLOPS 二、参数量parameters 三、Latency与FPS 四、结论

Spring 项目过程及如何使用 Spring

文章目录 1.创建 Spring 项目步骤1.1 创建 Maven 项目1.2添加 Spring 框架支持1.3 添加启动项2.如何使用 Spring2.1 存储 Bean 对象2.1.1 创建 Bean对象2.1.2 将 Bean对象注册到容器中 2.2 获取并使用 Bean对象2.2.1 使用 ApplicationContext 获取对象2.2.2 使用 BeanFactory 获…

基于LoRA进行Stable Diffusion的微调

文章目录 基于LoRA进行Stable Diffusion的微调数据集模型下载环境配置微调过程 推理WebUI部署 基于LoRA进行Stable Diffusion的微调 数据集 本次微调使用的数据集为&#xff1a; LambdaLabs的Pokemon数据集 使用git clone命令下载数据集 git clone https://huggingface.co/…

快速排序qsort讲解

hello大家好&#xff0c;我是c语言boom家宝&#xff0c;今天为大家分享的博客内容是qsort快速排序&#xff0c;简称快排的一个知识点的讲解。 在讲到快排之前&#xff0c;允许博主先提一嘴冒泡排序。大家在c语言的学习过程中&#xff0c;冒泡排序是必不可少会学习到的一个思想&…

有关合泰BA45F5260中断的思考

最近看前辈写的代码&#xff0c;发现这样一段代码&#xff1a; #ifdef SUPPORT_RF_NET_FUNCTION if(UART_INT_is_L()) { TmrInsertTimer(eTmrHdlUartRxDelay,TMR_PERIOD(2000),NULL); break; } #endif 其中UART_INT_is_L&am…

C++对C的加强(全)

目录 C对C的加强 命名空间 为什么要使用命名空间 怎么使用命名空间 命名空间的定义 命名空间的使用 使用域解析符 :: 使用using声明 内联命名空间 嵌套命名空间 随时将新的成员加入命名空间 命名空间中 函数的声明和实现分开 无名命名空间 命名空间取别名 使用u…

【通讯录】--C语言

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

路由策略(重发布)

要求&#xff1a; 1、使用双点双向重发布 2、所有路由器进行最佳选路 3、存在备份路径&#xff0c;不得出现环路&#xff0c;和路由回馈 1.更改设备名称配置接口IP地址 R1 <Huawei>system-view [Huawei]sysname R1 [R1]interface GigabitEthernet 0/0/0 [R1-GigabitEt…

Python深度学习“四大名著”之一【赠书活动|第二期《Python机器学习:基于PyTorch和Scikit-Learn》】

近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从AlexNet模型在2012年ImageNet大赛被提出以来&#xff0c;机器学习和深度学习迅猛发展&#xff0c;取…

MATLAB与ROS联合仿真(慕羽☆)全套开源资料索引

自2021年9月份开始进行MATLAB与ROS联合仿真相关的研究&#xff0c;至2021年12月份研究基本上结束&#xff0c;至今&#xff0c;已经近两年时间&#xff0c;期间曾收到过很多小伙伴的私信&#xff0c;想让我出点教程&#xff0c;期间我也曾多次想要抽点时间出教程&#xff0c;但…

JMeter 怎么查看 TPS 数据教程,简单易懂

TPS 是软件测试结果的测量单位。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时&#xff0c;收到服务器响应后结束计时&#xff0c;以此来计算使用的时间和完成的事务个数。在 JMeter 中&#xff0c;我们可以使用以下方法查看 T…

华为战略方法论:BLM模型之关键任务与依赖关系

内容简介 在 BLM 模型中&#xff0c;执行部分包括四个模块&#xff0c;分别是&#xff1a; 关键任务与依赖关系&#xff1b;组织与绩效&#xff1b;人才&#xff1b;氛围与文化。 详细内容&#xff0c;大家可以参看下面这张图。 这四个模块其实是可以进一步划分成两个关键点…

MFC自定义控件使用

用VS2005新建一个MFC项目,添加一个Custom Control控件在窗体 我们需要为自定义控件添加一个类。项目,添加类,MFC类 设置类名字,基类为CWnd,你也可以选择CDialog作为基类 类创建完成后,在它的构造函数中注册一个新的自定义窗体,取名为"MyWindowClass" WNDCL…