实现许愿墙小程序

最新推荐文章于 2024-07-10 10:14:49 发布
最新推荐文章于 2024-07-10 10:14:49 发布
阅读量466 收藏
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SikML/article/details/122887163
版权
本文将指导你如何使用HTML、CSS和JavaScript实现一个功能齐全的许愿墙小程序。通过创建动态交互界面，用户可以发布、查看和管理他们的愿望，同时体验到美观的视觉效果。
摘要由CSDN通过智能技术生成 
<!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>Document</title>
</head>
<style>
    * {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
}

body,
p {
    margin: 0;
}

.paper {
    width: 170px;
    height: 170px;
    background: rgb(97, 229, 238);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    position: fixed;
    left: 100px;
    top: 100px;
    cursor: move;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    opacity: 0.4;
    
}

.paper span {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 2px;
    color: white
}

input {
    po
最低0.47元/天 解锁文章
2485695542
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
教你用JavaScript制作进度条
小院里的霍大侠
12-07 1609
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
Odoo owl 学习笔记之11—slots 目录 插槽概述... 1 命名槽... 2 渲染上下文
05-10
Odoo owl 学习笔记之11—slots 目录 插槽..... 1 概述... 1 命名槽... 2 渲染上下文... 3 默认插槽... 3 默认内容... 4 动态插槽... 5 插槽和道具... 5 插槽参数... 5 插槽范围... 7 单个插槽 | 默认插槽 | 匿名插槽... 9 概述 Owl 是一个基于模板的组件系统。因此需要能够制造通用组件。例如，想象一个通用Navbar 组件，它显示一个导航栏，但有一些可定制的内容。由于具体内容只有 的用户知道Navbar，所以最好在使用的模板中指定它Navbar
css 圆形扩散特效 水波
笔记库
10-16 2079
<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=...
JS实现简单进度条
热门推荐
苏灵均的博客
06-01 1万+
思路： 1.定义一个外框+内部进度框+显示； 2.定义i从0加到100； 3.循环的i的大小作为参考修改内部框的颜色样式的宽度，记得加上px； 4.显示与循环保持一致，记得加上%； 5.外部考虑用定时器，每0.1秒更新一个i，不然只显示‘100%’，当i<100时，执行2、3，否则，退出当前进程。 ...
利用JavaScript实现进度条加载界面(让你最简单最轻松学会+详写注释+完整代码)
Tang_jibin的博客
04-01 2965
在此之前，你需要对制作进度条有一个大概框架，只有框架构思好，才能完成心之所想。下面我就来给大家分析一下搭建思路思路分析首先我们需要明白进度条的组成：一个容器+一个内容区+定时器然后我们只需要把容器设置一个固定宽高，而内容区只需要一个高度足矣.接下来我们需要考虑的就是定时器的设置，让它能从0%-100%，最后显示加载完成。
js实现进度条
qq_64037242的博客
06-21 636
【代码】js实现进度条。
thinkphp 实现许愿墙功能的小程序
05-17
以下将详细介绍如何利用ThinkPHP来设计和实现这样一个许愿墙小程序。 首先，我们需要了解ThinkPHP框架的基础知识。ThinkPHP是一个轻量级的MVC（Model-View-Controller）框架，它支持面向对象编程，提供了一套完整的...
HTML许愿墙特效代码
03-20
了解各种JavaScript事件，如`click`、`dblclick`等，以及它们的工作原理，是实现许愿墙交互功能的基础。 6. **数组操作**： 在模拟数据库获取信息时，会用到JavaScript的数组方法，如`push`、`pop`、`forEach`等...
许愿留言墙.rar
07-03
这个程序提供了一个在线许愿留言的功能，用户可以在此墙上发布他们的愿望或者留言，从而实现信息的共享与交流。 在PHP中，数据结构是存储和组织数据的关键部分。在这个程序中，可能会使用到常见的数据结构如数组、...
xuyuanqiang.rar_许愿墙
09-22
【许愿墙】是一款仿照QQ爱墙设计的在线许愿应用，主要功能是让用户能够发布自己的愿望或者祝福，与其他用户分享，形成一种互动社区。该应用为V15免费版，表明它已经经过多次迭代优化，具备一定的稳定性和用户友好性...
许愿墙模块.zip
05-10
许愿墙模块是一种常见的Web应用程序，它允许用户在网站上发布他们的愿望或留言，从而增强互动性和社区感。本项目是基于SQL Server数据库管理和Tomcat应用服务器进行开发的，这两大技术是构建高效、稳定Web服务的基础...
js实现页面动态加载进度条(类似电池)
这个人很懒，没有博客简介...
11-09 1596
第二种：百分比显示随着进度条的长度变化，到最大时候影藏。
加载loading动画
qq_40289557的博客
08-22 7829
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
js实现页面显示加载进度条效果
CodingNoob
10-11 3552
我们上网的时候经常会看到一些平台或者网站顶部在页面加载的时候显示加载的进度条，这样用户可以知道还有多少没有加载完，给用户比较友好的用户体验效果，现在我们就来模拟一下这个效果是如何去实现的。 页面加载一般来说是资源加载的问题，资源主要还是css、js、img、视频等资源，这些资源加载完成后都会触发一个onload事件，这样我们就可以在事件里面做一些事情，主要原理是计算页面资源的总数，然后资源载入的...
css 制作一个 加载中 动画
小二丶的博客
05-18 591
创建 一个 css 文件 load.css 文件名 然后在 使用 加载动画中 进行引入。js 、 Jq 调试 显示 隐藏就可以了。这里使用的 jq 的方法。
请使用插槽vm.$slots实现一个导航栏结构
weixin_47518648的博客
10-25 2604
运行结果如下： 话不多说，直接开整： 样式如下： <style> #navga{ top:0; left:0; right: 0; display: flex; justify-content: space-between; align-items: center; padding:..
Vue 使用插槽vm.$slots实现一个导航栏结构
qq_47119426的博客
10-23 5734
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> </head> <script src="./JS/vue.js"></script> <style> .Navbar{ display: flex; height: 44
scss概念及使用
最新发布
m0_74293254的博客
07-10 1136
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
HMTL许愿墙系统代码
02-01
HTML许愿墙系统是一个简单的Web应用程序，允许用户在页面上发布和查看许愿。以下是一个基本的HTML许愿墙系统代码示例： ```html <!DOCTYPE html> <html> <head> <title>许愿墙</title> <style> .wish { margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; } </style> </head> <body> <h1>许愿墙</h1> <form id="wishForm"> <input type="text" id="wishInput" placeholder="输入你的愿望"> <button type="submit">发布</button> </form> <div id="wishList"></div> <script> // 许愿墙数据 var wishes = []; // 获取表单和许愿列表元素 var form = document.getElementById('wishForm'); var wishInput = document.getElementById('wishInput'); var wishList = document.getElementById('wishList'); // 监听表单提交事件 form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 var wishText = wishInput.value.trim(); // 获取输入的愿望文本 if (wishText !== '') { wishes.push(wishText); // 将愿望添加到数组中 // 创建愿望元素并添加到许愿列表中 var wishElement = document.createElement('div'); wishElement.classList.add('wish'); wishElement.textContent = wishText; wishList.appendChild(wishElement); wishInput.value = ''; // 清空输入框 } }); </script> </body> </html> ``` 这段代码创建了一个简单的许愿墙系统。用户可以在输入框中输入愿望，点击发布按钮后，愿望将会显示在许愿列表中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值