![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
程序媛zcx
这个作者很懒,什么都没留下…
展开
-
html、css、原生js 构建移动端页面简单功能,切换页面、下拉框联动,模拟数据列表渲染、自定义弹框等
html、css、原生js 构建移动端页面,简单功能,页面显示隐藏、下拉框联动,模拟数据列表渲染、自定义弹框等原创 2023-04-04 14:09:57 · 640 阅读 · 1 评论 -
html实现ip输入框功能代码
【代码】html实现ip输入框功能代码。原创 2022-12-30 15:08:38 · 1050 阅读 · 0 评论 -
css 实现自定义遮罩层模态框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html、css自定义实现模态框遮罩层</title> <style> html,body { width: 100%; height: 100%; margin: 0; .原创 2021-07-15 17:48:38 · 1321 阅读 · 0 评论 -
jquery使滚动条滚动到最底部 scrollTop
需求:当div 中 内容过多出现滚动条时,让滚动条滚动到最下面。scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。scrollHeight网页内容实际高度代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style> .out-.原创 2021-07-15 16:38:38 · 6442 阅读 · 1 评论 -
js 使用HTML5 Websoket通信,发送和接收数据案例代码
HTML5 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。原创 2021-03-03 15:25:24 · 6660 阅读 · 1 评论 -
css、js实现进度条
css、js实现进度条代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css 实现进度条</title> <style> .myProgress { width: 100%; background-color: #e2e2e2;.原创 2021-02-19 17:02:00 · 506 阅读 · 0 评论 -
js、jquery输入框input限制只能输入数字 0 和 正整数、负整数(第一位输入0,第二位输入大于0的数字时候自动清空第一位的0)
需求:输入框只能输入0、 正整数 、负整数;只能输入一个负号且只能在最前面输入负号;第一位输入0,第二位输入大于0的数字时候自动清空第一位的0(例如:01为 1;00 为 0;-0 为 0)。1、使用onkeyup 只能输入0、正整数、负整数,只能输入一个负号且只能在最前面输入负号,但不能控制 输入0时的情况 。<input type="text" name="phone" class="layui-input" onkeyup="value=value.match(/^-?[0-9..原创 2021-01-14 10:52:44 · 3024 阅读 · 0 评论 -
js、jquery输入框input限制只能输入数字 0 和 正整数(第一位输入0,第二位输入大于0的数字时候自动清空第一位的0)
输入框只能输入数字0 和 正整数(第一位输入0,第二位输入大于0的数字时候自动清空第一位的0), 我想在页面多地方调用就在input 里面加 num-input类名就可以了。<input type="text" name="email" autocomplete="off" class="layui-input num-input">//输入框只能输入数字 0 正整数$(document).on('input', '.num-input', function () {//也可以..原创 2021-01-14 10:40:40 · 2154 阅读 · 0 评论 -
js、jquery下拉框select操作总结(获取值,设置默认值)
<select id="test"><option value="1">选项一<option><option value="2">选项一<option> ...<option value="n">选项N&am原创 2018-06-14 15:46:17 · 9325 阅读 · 0 评论 -
layer弹层组件PC版介绍以及使用方法示例代码
1、layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。PC版的layer弹层 官网地址:https://layer.layui.com/PC版的layer弹层 API地址:https://www.layui.com/doc/modules/layer.html前端UI框架layui 官网地址:https://www.layui.com/layer移动版弹层 官网地址:https://layer...原创 2020-12-29 11:21:06 · 760 阅读 · 0 评论 -
layer弹层组件移动版介绍以及使用方法示例代码
1、layer mobile是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层UI。由于是采用原生 JavaScript编写,所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer,您需要按照场景选择使用。和layer PC版不同的是,只提供一个核心调用方法,即:layer.open(options)官网地址:https://layer.layui.com/mobile/API地址:https://layer.layui.com/mob...原创 2020-12-29 10:12:41 · 4231 阅读 · 5 评论 -
js 实现倒计时效果setTimeout
我使用的是bootstrap 里的警告框,设置倒计时20秒后自动关闭警告框。样式截图:代码:1、html <div id="tip" class="alert alert-info alert-dismissible fade show" role="alert"> <strong>温馨提示:</strong><span id="sNum">20 </span>秒后自动关闭)。 <but原创 2020-12-25 17:35:43 · 1075 阅读 · 0 评论 -
iconfont字体库详细html使用方法
1、登录 iconfont 官网,地址:https://www.iconfont.cn/plus在首页 图标搜索处填写需要搜索的图标关键字,回车2、列出许多图标,挑选喜欢的点击购物车,添加入库3、购物车里会有所有选择的图标,点击添加至项目4、没登录的要先登录,3种方式4、登录后将购物车里的图标添加至项目,可以添加到之前的项目,也可以新建项目5、点击资源管理--我的项目,进入项目管理6、进入项目后点击 下载至本地7、下载后把文件夹修改一个名字,我修改原创 2020-12-25 17:23:30 · 1228 阅读 · 1 评论 -
js、jquery动态修改项目<title>
动态修改项目的title:方法如下:1.原生js//<title>原始</title>document.title = '我的title';document.getElementsByTagName("title")[0].innerText = '我的title';2.jquery$('title').html('我的title');$('title').text('我的title');...原创 2020-12-25 15:36:39 · 880 阅读 · 0 评论 -
html5 Dom全屏,取消全屏requestFullscreen()
requestFullscreen()方法用来在全屏模式下打开一个元素。此方法需要特定的前缀才能在不同的浏览器中工作(请参考下面的浏览器兼容性)。使用document.exitFullscreen()方法取消全屏模式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head>原创 2020-12-21 16:56:21 · 1712 阅读 · 0 评论 -
js监听鼠标滚动事件并判断鼠标滚轮是向下还是向上
js监听鼠标滚动事件并判断鼠标滚轮是向下还是向上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>判断鼠标滚动向下还是向上</title> <style> .box { width: 600px; height: 600px;原创 2020-12-15 15:39:27 · 7176 阅读 · 1 评论 -
js实现鼠标滚轮放大缩小页面指定区域(css3 scale)
一、需求鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。点击还原按钮:绿色盒子里所有元素还原为初始值。二、相关知识点1、CSS3 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。scale(x[,y]?) 定义 2D 缩放转换。2、CSS3 transform-Origin属性允许您更改转换元素的位置。transform-origin:x-axis y-a..原创 2020-12-15 15:29:06 · 9375 阅读 · 1 评论 -
使用html5 video标签不自动播放视频问题(静音播放)
谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放。<video id="myvideo" controls width="270" autoplay="autoplay" muted> <source src="m1.mp4" type='video/mp4'></video>...原创 2020-12-15 14:11:07 · 9959 阅读 · 0 评论 -
html5的video自动播放视频(静音),canvas绘制视频案例代码
一、HTML5 canvas drawImage() 方法浏览器支持Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。注释:Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。定义和用法drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。JavaScript原创 2020-12-15 14:06:31 · 4084 阅读 · 0 评论 -
HTML基础知识学习资料整理
把之前的课程整理记录:HTML基础:1、快捷键Ctrl+c 复制Ctrl+x 剪切Ctrl+v 粘贴Ctrl+z 撤销 返回上一步操作Ctrl+s 保存Ctrl+a 全选alt+tab(windows+tab) 切换ctrl+tab 软件内部的切换windows+e 快速打开本地磁盘notepad+回车 快速打开记事本F2 重命名F5 刷新2、网页介绍2.1、网页的组成网页:文字、图片、按钮、输入框、视频……元素组成1:html 用..原创 2020-12-14 17:50:33 · 1195 阅读 · 1 评论 -
表格多选框checkbox的全选反选,获取选中值
<table><thead><tr><th><input type="checkbox" id="selectAll"></th></tr></thead>&原创 2018-06-14 15:41:59 · 1522 阅读 · 0 评论 -
js使用两种拼接字符串的方式循环数据动态生成HTML
js使用两种拼接字符串的方式循环数据动态生成HTML,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; }原创 2020-12-09 17:46:52 · 2286 阅读 · 1 评论 -
label标签使用,点击文字就能选中或取消选中复选框checkbox/单选框radio的两种方法
效果是点击文字就能选中复选框checkbox/单选框radio 或者是取消选择复选框checkbox/单选框radio。一、单选框第一种方法:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。<div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder1" value="1"/> <lab原创 2020-12-08 09:43:02 · 5705 阅读 · 1 评论