html+css+js
关注
分享
扫一扫
kaolagirl
这个作者很懒，什么都没留下…
展开
-
实现随鼠标移动显示大图的功能
效果图示例代码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">原创 2022-02-19 11:12:43 · 770 阅读 · 0 评论 -
水果列表的增加删除(js)
效果图示例代码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">原创 2022-02-19 10:43:18 · 842 阅读 · 0 评论 -
使用css3实现简单的轮播图效果
实现功能点击按钮，进行图片轮播代码示例<!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"&g原创 2022-02-18 21:18:01 · 669 阅读 · 0 评论 -
图片预览
1.js2.wxml原创 2021-01-22 18:32:43 · 122 阅读 · 0 评论 -
回到顶部
效果图页面样式js原创 2021-01-14 18:41:36 · 101 阅读 · 0 评论 -
如何实现div等块级元素水平垂直居中
块级元素 水平垂直居中 的方法(六种方法)<body> <div class="container"> <div class="box"></div> </div></body>方法一：（宽高要确定）要让div等块级元素水平垂直居中重要的因素：父级元素要设置相对定位第一步：就要知道div等块级元素的高度和宽度第二步：设置 位置position为绝对位置，并设置距离页面窗口 左边框和上边原创 2020-09-07 00:10:37 · 711 阅读 · 0 评论 -
用原型方法为数组去重
var arr = [1,3,5,2,1,3,7,9,5]; Array.prototype.getDistination = function(){ var newArray = []; for(var i=0;i<this.length;i++){ if(newArray.indexOf(this[i])==-1){ newArray.push(this[i]); }原创 2020-09-07 00:01:30 · 616 阅读 · 0 评论 -
用js实现随机选取10-100之间的不同的10个数字，存在一个数组，并降序排序
var newAarry = []; //创建个空数组，存放元素 //封装一个函数，用来获取10-100的随机数 function getRandom(num1,num2){ var transition = num2-num1+1; //加1是为获取100 var ran = Math.floor(Math.random()*transition+num1); return ran; } for(var i=0;i<10;i++){原创 2020-09-06 23:58:30 · 1171 阅读 · 0 评论 -
简单的秒表制作
一. 效果图二. 整体思路当点击开始按钮时，计时开始当点击暂停按钮时，暂停计时器当点击结束按钮时，暂停计时器并把数据清零三. 整体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-06-24 11:28:53 · 648 阅读 · 0 评论 -
弹幕效果实现 jQuery
效果图主要实现功能：点击弹幕按钮，开启弹幕编辑框编辑好文本，点击发送按钮，文本就显示在弹幕框中运用到的知识Math.random( ) 随机获取parseInt( ) 把字符串转换成数字append( ) 添加元素animate({ },1000) 设置自定义动画overflow: hidden 文本超出的部分隐藏white-space:nowrap ...原创 2020-04-12 14:21:19 · 296 阅读 · 0 评论 -
跑马灯效果实现
一.效果图视频上传不了，只能看图片了二. 设计思路使用截取字符串的方法，首先获取文本的值，再分别截取文本的第一个字符串和剩余的字符串，然后重新拼接一个新的字符串，最后把这个新字符串赋值给文本，代码如下： var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring(1);//截取剩余的字符串 var result=end+start;//拼接一个新的字符串 co原创 2020-05-13 11:57:42 · 901 阅读 · 2 评论 -
圣杯布局和双飞翼布局的区别
两者功能相同，都是实现两侧定宽，中间自适应宽度的三栏布局一. 圣杯布局：1.DOM结构<body> <div class="header">header</div> <div class="container"> <div id="center" class="column">center</d...原创 2020-05-07 12:16:27 · 293 阅读 · 0 评论 -
仿 Lenovo商城首页
效果图还有动态效果噢，图片看不出来代码如下(有些长):html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2020-04-26 16:05:50 · 1092 阅读 · 4 评论 -
用户登录和注册界面的实现
实现的效果整体代码html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-04-14 21:36:12 · 10753 阅读 · 0 评论