网页高级许愿墙开源代码

最新推荐文章于 2023-12-31 14:45:14 发布
最新推荐文章于 2023-12-31 14:45:14 发布
阅读量6k 收藏 13
点赞数 3
分类专栏： 前端学习 web前端 前端
web前端 同时被 3 个专栏收录
32 篇文章 0 订阅
订阅专栏
前端学习
15 篇文章 0 订阅
订阅专栏
前端
4 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>

<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <title>许愿墙</title>

 <style>

         *{

                   margin:0px;

                   padding:0px;

         }

         body{

                   background:-webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

                   background:-moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

                   font-family:'微软雅黑',

                   font-size:16px;

                   position:relative;

                   top:0px;

                   left:0px;

                   bottom:0px;

                   right:0px;

         }

         .item{

                   width:200px;

                   height:200px;

                   line-height:30px;

                   -webkit-border-bottom-left-radius:20px 500px;

                   -webkit-border-bottom-right-radius:500px 30px;

                   -webkit-border-top-right-radius:5px 100px;

                   -moz-border-bottom-left-radius:20px 500px;

                   -moz-border-bottom-right-radius:500px 30px;

                   -moz-border-top-right-radius:5px 100px;

                   box-shadow:0 2px 10px 1px rgba(0, 0, 0, 0.2);

                   -webkit-box-shadow:0 2px 10px 1px rgba(0, 0, 0, 0.2);

                   -moz-box-shadow:0 2px 10px 1px rgba(0, 0, 0, 0.2);

         }

         #containerp{

                   height:80px;

                   margin:30px 10px;

                   overflow:hidden;

                   word-wrap:break-word;

                   line-height:1.5;

         }

         #containera{

                   position:relative;

                   left:150px;

                   coler:red;

                   font-size:14px;

         }

         input{

                   display:block;

                   height:30px;

                   padding:0 1em;

                   line-height:30px;

                   width:300px;

                   margin:85px auto;

                   font-size:20px;

         }

 </style>

 <scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

 </head>

 <body>

 <div id="container" style="height:520px;">

 </div>

 <input id="input" type="text" placeholder="随便说说吧..."/> 

 <script>

 (function ($) {

        

         varcontainer;

        

         //可选颜色

         varcolors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];

        

         //创建许愿页

         varcreateItem = function(text){

                   varcolor = colors[parseInt(Math.random() * 5, 10)]

                   $('<divclass="item"><p>'+ text +'</p><ahref="#">关闭</a></div>').css({ 'background': color}).appendTo(container).drag();

         };

        

         //定义拖拽函数

   $.fn.drag = function () {

                  

       var $this = $(this);

       var parent = $this.parent();

                  

       var pw = parent.width();

       var ph = parent.height();

       var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10)+ parseInt($this.css('padding-right'), 10);

       var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10)+ parseInt($this.css('padding-bottom'), 10);

 

       var x, y, positionX, positionY;

       var isDown = false;

 

       var randY = parseInt(Math.random() * (ph - thisHeight), 10);

       var randX = parseInt(Math.random() * (pw - thisWidth), 10);

 

 

       parent.css({

           "position": "relative",

           "overflow": "hidden"

       });

                  

       $this.css({

           "cursor": "move",

           "position": "absolute"

       }).css({

           top: randY,

           left: randX

       }).mousedown(function (e) {

           parent.children().css({

                "zIndex":"0"

           });

           $this.css({

                "zIndex": "1"

           });

           isDown = true;

           x = e.pageX;

           y = e.pageY;

           positionX = $this.position().left;

           positionY = $this.position().top;

           return false;

       });

                  

                  

       $(document).mouseup(function (e) {

           isDown = false;

       }).mousemove(function (e) {

           var xPage = e.pageX;

           var moveX = positionX + xPage - x;

 

           var yPage = e.pageY;

           var moveY = positionY + yPage - y;

 

           if (isDown == true) {

                $this.css({

                    "left": moveX,

                    "top": moveY

                });

           } else {

                return;

           }

           if (moveX < 0) {

                $this.css({

                    "left":"0"

                });

           }

           if (moveX > (pw - thisWidth)) {

                $this.css({

                    "left": pw -thisWidth

                });

           }

           if (moveY < 0) {

                $this.css({

                    "top":"0"

                });

           }

           if (moveY > (ph - thisHeight)) {

                $this.css({

                    "top": ph -thisHeight

                });

           }

       });

   };

        

         //初始化

         varinit = function () {

                  

                   container= $('#container');

                  

                   //绑定关闭事件

                   container.on('click','a',function() {

                            $(this).parent().remove();

                   }).height($(window).height()-204);

 

                   vartests = ['web前端学习部落22群与你风雨同舟？', 'I have adream...', '路漫漫其修远兮。。。', '需要web前端资料，加群120342833', '既然选择了远方，便只顾风雨兼程！'];

                   $.each(tests,function (i,v) {

                            createItem(v);

                   });

                  

                   //绑定输入框

                   $('#input').keydown(function(e) {

                            var$this = $(this);

                            if(e.keyCode== '13') {

                                     varvalue = $this.val();

                                     if(value){

                                               createItem(value);

                                               $this.val('');

                                     }

                            }

                   });

                  

         };

        

         $(function(){

                   init();

         });

        

})(jQuery);

 </script>

 </body>

</html>

需要web前端课程工具和电子书，可以加群120342833，或者扫码

 

 

fanyuenan
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP实现许愿墙（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
05-21 91
PHP实现许愿墙（附完整源码）
HTML许愿墙特效代码
03-20
HTML许愿墙代码，需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改；需求2：点击内容，提高层级；点击关闭按钮，删除tip标签；双击顶部，删除标签.....
HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码
Python代码大全
12-31 1276
HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码。
虎年来了，快来许愿吧，听说愿望会成真哦
qq_44793090的博客
02-11 497
虎年来了，小朋友，大朋友们都有大大小小的愿望。来吧，作为前端小小白的我用css+js写了一个新春许愿墙，大家快来许愿吧**
许愿墙HTML+CSS
jiang5678900的博客
10-11 912
HTML5+CSS3
许愿墙源代码
09-24
许愿墙源代码是一种用于构建在线互动平台的编程资源，让用户可以在网站上发布自己的愿望、心声或祝福，形成一种虚拟的许愿墙效果。这种源代码通常由一系列编程语言如HTML、CSS、JavaScript和后端语言（如PHP、Python...
HTML许愿墙代码.zip
05-16
HTML许愿墙是一种常见的网页互动元素，用户可以在上面发布自己的愿望或者留言，为网站增加趣味性和参与性。这个"HTML许愿墙代码.zip"压缩包很可能是包含了一组实现此类功能的HTML源代码，用于创建一个基本的许愿墙...
php原生许愿墙代码
09-22
5. **安全与性能优化**：在实现这些功能的同时，许愿墙代码还需考虑安全性，例如使用预处理语句防止SQL注入，对用户输入进行过滤和转义防止XSS攻击。此外，性能优化也是关键，比如合理使用索引提高查询效率，限制...
响应式web开发chapter1/许愿墙
weixin_54042448的博客
02-25 1773
index.html文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>许愿墙</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div cla
许愿墙源代码（jsp）
03-10
这个是一个简单的jsp实现的许愿网站，可以简单的实现与数据库的交互，但是在交互的过程中要使用自己的数据库和Tomcat6.0版本的服务器
互联网免费许愿墙源代码
03-18
本程序有ASP开发完成。 后台地址admin.asp 后台管理用户 admin 密码：admin
js代码实现许愿墙
weixin_49697978的博客
09-26 774
使用js简单完成许愿墙 let bodyEle = document.getElementsByTagName("body")[0]; let secEle = document.querySelector("section"); let inputEle = document.querySelectorAll("input")[0]; function fasong() { let arr = inputEle.value //获取输入 // console.log(arr);
在固定框高内图片剧中显示，不变形
12-05 500
<!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-Com...
react简单实现一个心愿清单
想好了再写！
04-20 271
demo如下图： 标题实现需求如下： 1.全选，取消全选； 2.反选，每一项都选中的时候，全选勾上，反之； 3.搜索框里面输入内容追加到原数组； 4.每一项移入显示当前样式； 5.点击删除按钮删除当前项； 6.展示总条数以及前当前选中的条数； 注意：此处父传子，子传父没有通过发布和订阅来进行，后续再通过发布订阅来优化 1.创建目录（此处用了四个组件），在App.js中引入的 逻辑代码如下： App.js import React, { Component } from 'react' import
许愿墙效果
Dear
06-13 1131
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { position:
许愿墙jquery
了缺的专栏
12-26 1510
该许愿墙并不是原创的,修改自后盾网的许愿墙 需要的做一些准备工作: 1.我使用的是jquery.1.7.2.js 2.获取input或textarea中鼠标索引的jquery插件,这是我从网上 jQuery.extend($.fn, { //获取文本框内光标位置 getSelectionStart: function() { var e = this[0]
HTML新年代码之新年快乐新年大吉
宇宙超粒终端控制中心的博客
12-31 1708
【代码】HTML新年代码之新年快乐新年大吉。
html新年许愿墙代码,网页版春节许愿墙代码,龙年许愿墙代码
最新发布
02-07
HTML新年许愿墙代码： ```html <!DOCTYPE html> <html> <head> <title>新年许愿墙</title> </head> <body> <h1>新年许愿墙</h1> <form> <input type="text" id="wish" placeholder="输入你的新年愿望"> <button type="button" onclick="makeWish()">许愿</button> </form> <ul id="wishList"> <!-- 这里将显示许愿列表 --> </ul> <script> function makeWish() { var wish = document.getElementById("wish").value; var wishList = document.getElementById("wishList"); var li = document.createElement("li"); li.appendChild(document.createTextNode(wish)); wishList.appendChild(li); } </script> </body> </html> ``` 网页版春节许愿墙代码： ```html <!DOCTYPE html> <html> <head> <title>春节许愿墙</title> </head> <body> <h1>春节许愿墙</h1> <form> <input type="text" id="wish" placeholder="输入你的春节愿望"> <button type="button" onclick="makeWish()">许愿</button> </form> <ul id="wishList"> <!-- 这里将显示许愿列表 --> </ul> <script> function makeWish() { var wish = document.getElementById("wish").value; var wishList = document.getElementById("wishList"); var li = document.createElement("li"); li.appendChild(document.createTextNode(wish)); wishList.appendChild(li); } </script> </body> </html> ``` 龙年许愿墙代码： ```html <!DOCTYPE html> <html> <head> <title>龙年许愿墙</title> </head> <body> <h1>龙年许愿墙</h1> <form> <input type="text" id="wish" placeholder="输入你的龙年愿望"> <button type="button" onclick="makeWish()">许愿</button> </form> <ul id="wishList"> <!-- 这里将显示许愿列表 --> </ul> <script> function makeWish() { var wish = document.getElementById("wish").value; var wishList = document.getElementById("wishList"); var li = document.createElement("li"); li.appendChild(document.createTextNode(wish)); wishList.appendChild(li); } </script> </body> </html> ``` 以上是三个不同主题的许愿墙的HTML代码，用户可以在输入框中输入自己的许愿，点击“许愿”按钮后，许愿内容会以列表的形式显示出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值