HTML中一些简单的小玩意

最新推荐文章于 2023-12-12 21:15:25 发布
原创 最新推荐文章于 2023-12-12 21:15:25 发布 · 395 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML中一些简单的小玩意

本文介绍如何使用CSS实现平滑的下划线效果，利用JavaScript生成随机数及控制div元素的位置移动，适合前端开发者学习。

  1. 首先弄一个CSS下滑线

  2. CSS下划线是一般网页中必不可少的一份，下面我来教一些简单的CSS下划线效果
    在这里插入图片描述

在这里插入图片描述

  1. 这种简单的CSS下划线主要用hover伪类来实现的
    在这里插入图片描述

  2. 简单的代码就是这样，利用好ul li标签自带的边距来实现下划线之间的间隔，让动画显示的更加流畅。

  3. 再弄一个简单的随机数选择

  4. 先制作一个button按钮用来绑定点击事件，在用input文本框来接收随机数
    在这里插入图片描述

  5. 在通过JavaScript来设置它的效果
    在这里插入图片描述

  6. 最后在点击button按钮来实现随机数的选择
    在这里插入图片描述
    在这里插入图片描述

  7. 再弄一个用js控制div的位置

  8. 先创建一个div并设置它的style
    在这里插入图片描述

  9. 然后通过js来控制它的位置
    在这里插入图片描述

  10. 用js中的css方法来设置它的top值，并且通过setInterval来设置30毫秒来让它的top值继续被修改

在这里插入图片描述

用html和css构建简单的静态网页
qq_47067103的博客
07-10 3092
只用html和css构建了静态网站，选择动漫海贼王为主题构建5个简单页面
HTML+CSS+JS练手小玩意
BIG橙橙滴
03-24 2021
HTML+CSS+JS练手小玩意今天准备给我的小组员布置任务时，找到这个网页，很适合学了JS用来练手。 在这里，分享给大家实例索引
发现的CSS小玩意（类似于轮播变色的小玩意）
weixin_49084104的博客
03-20 109
页面上有一段文本，能否实现这段文本在不同背景色下展示不同的颜色？也就是俗称的智能变色。 文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，让文字智能适配背景颜色 <div></div> div { height: 100vh; background: linear-gradient(45deg, #
非常简单的小玩意，但可以扩展功能哦。
03-20
小demo娱乐娱乐，如果刚入门js可以试试改改玩玩，大神就不必。
超好玩的前端小项目(简单易做)
leoyongyuan的博客
02-17 7467
文章目录前言一、静态页面的构建二、JS动态操作1.创造对象2.用画布画出全部的内容3.碰撞检测总结 成果展示 前言 刚刚学完前端三件套，做一个小项目来试验一下成果，这个项目适合新手入门，非常容易，而且很有意思hhh。先在这里说了，需要的前置知识是基础的html和css还有js，这里面用到了canvas画布的功能，很多动画都是在画布上完成的，如果不懂的话，先去学一下在来吧。 一、静态页面的构建 首先让我们建出一个这么页面，相信对于学过css的同学来说都是小菜一碟吧。 这里我说两点，第一，这里的查看规则是可
前端开发那些不常见但十分有效的小玩意
a158559681的博客
06-10 273
同学们在开发功能的时候可能会遇到这样那样的问题，但可能手中没有什么好的解决办法，那么不妨来看看小千下面介绍的几个代码，说不准就有能够解决你问题的哦。 console.table() 思考一下平时在开发过程中, 我们的代码中出现频率比较高的一段代码是什么 console.log(‘xxx’)，因为各种各样的原因, 我们的代码一旦在浏览器运行总是各种 红色 所以很多小伙伴会选择在控制台打印一下看看。看看我遍历的是个啥，看看我获取的元素是个啥，看看我请求回来的东西是个啥，看看我算的数是不是 NaN。 但是遇到类似
涂鸦板简单实现 Html5编写属于自己的画画板
12-30
最近了解到html5强大的绘图功能让我惊奇，于是，写了个小玩意—涂鸦板，能实现功能有：画画，改色，调整画笔大小 html5的绘图可以分为点，线，面，圆，图片等，点和线，这可是所有平面效果的基点，有了这两个东西，...
一个JS小玩意 几个属性相加不能超过一个特定值.
10-29
整体来看，这个小玩意的实现可以看作是前端JavaScript的一个基础应用案例，涉及到了页面交互、事件处理、数据绑定以及简单的业务逻辑处理。尽管给出的代码片段和描述并未提供完整的实现细节，但已足够让我们理解背后...
websocket实现聊天室，基本小玩意
08-05
在本项目"websocket实现聊天室，基本小玩意"中，开发者利用WebSocket来创建一个简单的聊天室功能，采用了SSM（Spring、SpringMVC、MyBatis）作为后端开发框架，具有良好的扩展性和灵活性。 1. WebSocket基础知识： ...
有趣的HTML实例（四） 旋转菜单
好好读书
02-08 3092
有趣的HTML实例（四） 旋转菜单 一款简单的 HTML+CSS 原生 旋转菜单实例 1、HTML 2、CSS 3、舒适的画面感，代码效果 4、展开折叠效果
使用DIV+CSS技术设计的非遗文化网页与实现制作（web前端网页制作课作业）
最新发布
wx___BJ050106的博客
12-12 342
💗 非遗文化网页设计 、等网站的设计与制作。🏷️HTML非遗文化网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序...
前端的小玩意（9.5）——做一个仿360工具箱的web页面（完结篇，可以跑起来的工具箱）
qq20004604的博客
08-23 2249
前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换） http://blog.youkuaiyun.com/qq20004604/article/details/52216203 前端的小玩意（9.2）——做一个仿360工具箱的web页面（全部工具里面的模板） http://blog.youkuaiyun.com/qq20004604/article/deta
关于js弹出框的一些小玩意
weixin_33895604的博客
07-13 86
今天再看视频中发现视频中引入一个有意思的js弹出框的小文件包决定记录下来方便大家使用http://layer.layui.com/ 这个网站 是参考网站 想要压缩包的来找我 qq：728871942 转载于:https://blog.51cto.com/kangjunfei/1946993...
html旋转立体盒子,前端的小玩意（8）——旋转的盒子（纯CSS动画效果）＋可自由拖动（js）...
weixin_39894473的博客
06-05 1017
效果是一个旋转的盒子，他会展开六个面，展开结束后，会旋转，鼠标移动上去会变色；demo网址：http://jianwangsan.cn/boxDemoHTML代码：这个盒子可以拖动TopBottomLeftRightBackFrontCSS代码：(注：我在demo里使用了bootsrap的.container这个类，以使其居中#Box_Background {position: relative;...
在公司加班没思路时研究的JS小玩意！！
weixin_46661409的博客
03-25 297
前言 我们在项目中，通常为了保证数据安全性和保护用户个人信息，个别页面需要禁用右键、复制、粘贴以及输入框自动填充的功能。所以在此补充和总结几条我们开发中常用的操作方式。 一、禁用鼠标右键 1.1、分析说明 通过禁用右键选项卡的方式来禁用复制粘贴以及其他非法操作。 1.2、操作原理 我们通过 JS 中的 button 事件属性来实现鼠标右键的禁用。通过弹出提示框来代替右键选项卡。 1.3、实现效果 1.4、实现代码 将下列 JS 代码导入需要禁用右键的页面的function click() { if (
js小玩意(三)从数组中找到指定元素并删除
画龍丶的博客
07-13 4690
需求：从数组中找到小明并删除 var sb = '小明' var sbTeam= ['小黄','小绿','小明','小兰'] // 需求 : 从数组中找到 SB 小明并删除 sbTeam.splice(sbTeam.findIndex(item => item ==='小明'),1) //方法一 // sbTeam.splice(sbTeam.indexOf('小明'),1) //方法二 console.log(sbTeam); 运行结.
三年前写的一个JS小玩意
其实我是一个程序员
09-29 639
 以前玩游戏,有给玩家角色分配什么魔法点数,体力点数的功能,而且几个属性相加不能超过一个特定值.最有名的例子就是三国志和太阁里给新武将角色分配属性值啦.在下不才,用javascript做了这么一个功能,顺便把页面中的链接下划线给隐藏掉.大家看看,有什么更好的优化意见,大家尽管提.下面是代码:首先是test.html: New
几个简单的JS小东西
iteye_6091的博客
10-20 262
一、CSS样式提取 &lt;!DOCTYPE&gt; &lt;html&gt; &lt;meta charset="utf-8"&gt; &lt;head&gt; &lt;style&gt; #div1 {width:200px; height:200px; background:red;} &lt;/style&gt; &lt;title&gt;css样式提
前端的小玩意（15）——一步一步仿写三个图标和动画
qq20004604的博客
10-30 1301
（36）一步一步仿写三个图标和动画 ①参照物：360安全卫士PC端软件，左下角三个图标，如图： 具体DEMO见 http://jianwangsan.cn/LooksLike360safe/index.html   代码见： https://github.com/qq20004604/LooksLike360safe /src/components目录下的foot
HTML5跑动的小人：易用扩展的js小demo
标题中提到的小玩意很可能是基于HTML5和JavaScript构建的一个简单网页游戏，通常这样的小游戏会用来展示技术的某些特性。HTML5提供了画布（Canvas）元素，可以用来绘制图形和动画，而JavaScript则用于控制游戏逻辑和...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值