案例
关注
分享
扫一扫
文章平均质量分 55
错言语
这个作者很懒，什么都没留下…
展开
-
跟随鼠标的天使
天使图片跟随鼠标移动而移动鼠标不断的移动，使用鼠标移动事件： mousemove在页面中移动，给document注册事件图片要移动距离，而且不占位置，我们使用绝对定位即可核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片核心代码：var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {var x原创 2021-11-06 02:32:04 · 161 阅读 · 0 评论 -
动态生成表格
动态生成表格因为里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好数据。 数据我们采取对象形式存储。所有的数据都是放到tbody里面的行里面。因为行很多，我们需要循环创建多个行（对应多少人）每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）最后一列单元格是删除，需要单独创建单元格。最后添加删除操作，单击删除，可以删除当前行。href="javascript:;’'阻止链接跳转效果图：<!原创 2021-11-03 05:45:00 · 205 阅读 · 0 评论 -
简单版发布留言
简单版发布留言核心思路： 点击按钮之后，就动态创建一个li，添加到ul 里面。创建li 的同时，把文本域里面的值通过li.innerHTML 赋值给 li如果想要新的留言后面显示就用 appendChild 如果想要前面显示就用insertBefore当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li阻止链接跳转需要添加 javascript:void(0); 或者 javascri原创 2021-11-03 01:25:06 · 259 阅读 · 0 评论 -
新浪下拉菜单
新浪下拉菜单导航栏里面的li 都要有鼠标经过效果，所以需要循环注册鼠标事件核心原理： 当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏效果图参考新浪下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2021-11-03 01:23:17 · 122 阅读 · 0 评论 -
tab栏切换(十分好用)
tab栏切换布局效果当鼠标点击上面相应的选项卡（tab），下面内容跟随变化分析：Tab栏切换有2个大的模块上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的原创 2021-10-31 17:21:24 · 996 阅读 · 1 评论 -
排他思想（十分常用）
排他思想首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想<!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-Compatibl原创 2021-10-31 21:30:00 · 265 阅读 · 0 评论 -
循环精灵图
循环精灵图背景首先精灵图图片排列有规律的核心思路： 利用for循环 修改精灵图片的 背景位置 background-position让循环里面的 i 索引号 * 44 就是每个图片的y坐标效果图：实现代码：<style> * { margin: 0; padding: 0; } li { list-style-type: non原创 2021-10-29 09:00:00 · 223 阅读 · 0 评论 -
分时间显示问候图片
分时间显示问候图片<!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"> <t原创 2021-10-29 01:48:32 · 145 阅读 · 0 评论 -
点击按钮显示明文密码
点击按钮将密码切换成文本框，并可以查看密码明文核心思路： 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1 <style> .box { position: relative; width: 40原创 2021-10-29 01:46:57 · 1198 阅读 · 0 评论 -
案例---点击获得当前时间
点击按钮会获得当前时间<!DOCTYPE html><html lang="en"><head> <title>点击按钮会获得当前时间</title> <style> div, p { width: 250px; height: 25px; line-height: 25px; colo原创 2021-10-29 01:45:29 · 359 阅读 · 0 评论 -
案例----点击按钮更换图片
点击按钮更换图片<!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"> <ti原创 2021-10-29 01:44:14 · 250 阅读 · 0 评论 -
案例---模块math
定义一个模块math -在该模块中提供两个方法 add（a,b）//求a+b mul (a,b) //求a,b的积math.js:exports.add = function (a,b){ return a+b;};exports.mul = function (a,b){ return a*b;};在module.js中使用math.jsvar math = require('./math');//引用math.jsconsole.log(math.ad原创 2021-10-28 15:03:16 · 133 阅读 · 0 评论 -
CSS案例---新闻
效果图：实现代码：<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>Document</title> <style原创 2021-10-25 22:00:00 · 104 阅读 · 0 评论 -
CSS案例---搜索记录
效果图：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 整个搜索记录的块 */ div { width: 268px; height: 350px; background-color: #ccc; } /* 输入框的大小原创 2021-10-25 22:45:00 · 355 阅读 · 0 评论 -
CSS案例---个人简历
效果图：实现代码：<head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ text-align: center; } .info{ color: green; } em{ color: red; } p{ text-indent: 2em; } </style></head>原创 2021-10-25 21:30:00 · 1011 阅读 · 0 评论 -
CSS案例---百度首页
效果图：实现代码：<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度一下，你就知道</title> <style type="text/css"> /* 百度logo */ .logo { text-al原创 2021-10-25 21:15:00 · 472 阅读 · 0 评论 -
HTML表格（三）--小说排行榜
效果图：实现代码：<!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">原创 2021-10-25 20:30:00 · 946 阅读 · 0 评论 -
HTML表格（二）---成绩单
效果图：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table id="tab" cellpadding="1" cellspacing="1" border="1"> <tr>原创 2021-10-25 20:15:00 · 800 阅读 · 0 评论 -
HTML表格（一）---简历
效果图：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table border="1" cellspacing="0px" align="center" width="800px" height="1000px">原创 2021-10-25 20:00:00 · 75 阅读 · 0 评论 -
HTML案例（三）---编辑页
这是一个仿世纪佳缘做的编辑页，只使用了HTML中的form表单<table></table>``<select></select>等表单控件。效果图如下：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>修改页面</title></head><body&g原创 2021-10-24 07:00:00 · 154 阅读 · 0 评论 -
HTML案例（二）---登录页
这是一个仿世纪佳缘做的登录表，只使用了HTML中的form表单<table></table>表单控件。效果图如下：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录页面</title></head><body> <form> <!-- 请输入手原创 2021-10-24 06:45:00 · 174 阅读 · 0 评论 -
HTML案例（一）---注册表
这是一个仿世纪佳缘做的注册表，只使用了HTML中的form表单<table></table>``<select></select>等表单控件。效果图如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vN6jPDLc-1635007819909)(HTML+CSS案例.assets/image-20211024002406756.png)]<!DOCTYPE html><html lang="en">原创 2021-10-24 00:57:46 · 477 阅读 · 0 评论