jQuery练习题

目录

1.制作QQ简易聊天框

2.制作课工场论坛发帖


1.制作QQ简易聊天框

  <script>$(function () {var touxiang = new Array("images/head01.jpg","images/head02.jpg","images/head03.jpg");var names = new Array("时尚伊人", "六月奇迹", "松松");//send 事件$("#send").click(function () {if ($(".chatText").val().length > 0) {var lt = $(".chatBody").html(); //上方聊天记录//设置头像和昵称var tn = Math.floor(Math.random() * 3);var timg = "<div><img src=" + touxiang[tn] + "></div>";var tname ="<p style='color: red; font-size: 12px;'>" + names[tn] + "</p>";//修饰内容var chatBody = "<div>" + $(".chatText").val() + "</div>";var all = "<section>" + timg + tname + chatBody + "</section>";$(".chatBody").html(lt + all);$(".chatText").val(""); //清除文本框中的内容}});});</script>

----------------------------

body:

 <body><section id="chat"><div class="chatBody"></div><div><img src="images/icon.jpg" /></div><textarea class="chatText"></textarea><div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div></section><script src="js/jquery-1.12.4.js"></script></body>

2.制作课工场论坛发帖

<script>$(function () {$("span").click(function () {$(".post").show();});$(".btn").click(function () {let randomIndex = Math.floor(Math.random() * 4);//创建li标签let li = $("<li></li>");//创建div标签let div = $("<div></div>");//imglet img = $("<img/>");img.attr("src", "images/tou0" + (randomIndex + 1) + ".jpg");//将img放入divdiv.append(img);//创建标题标签let h1 = $("<h1>" + $(".title").val() + "</h1>");//创建p标签let p = $("<p></p>");//创建span//select input  textarea 都是通过 :val()来获取let bankuai = $("select").val();let span1 = $("<span>板块:" + bankuai + "</span>");//创建span标签用存放发布内容let contentValue = $(".content").val();let content = $("<span>" + contentValue + "</span>");//创建日期对象let date = new Date();let str ="发布:" +date.getFullYear() +"-" +(date.getMonth() + 1) +"&nbsp;" +date.getDate() +"-" +date.getHours() +":" +date.getMinutes();//创建span标签用于存放时间let time = $("<span>" + str + "</span>");p.append(span1);content.appendTo(p);p.append(time);li.append(div);li.append(h1);li.append(p);/*$("ul").append(li);*/$("ul").prepend(li);$(".title").val("");$("select").val($(""));$(".content").val("");$(".post").hide();});});</script>

-----------

body:

<body><div class="bbs"><header><span>我要发帖</span></header><section><ul></ul></section><div class="post"><input class="title" placeholder="请输入标题(1-50个字符)" />所属版块:<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select><textarea class="content"></textarea><input class="btn" value="发布" /></div></div><script src="js/jquery-1.12.4.js"></script></body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32476.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nvidia驱动更新导致驱动版本不匹配

关于nvidia驱动自动更新&#xff1a; 和这篇描述类似&#xff1a;https://blog.csdn.net/weixin_43568307/article/details/128187469 记得记录原先版本 sudo dpkg-reconfigure unattended-upgrades 关闭一下自动更新。 当前主机做好快照备份&#xff0c;重新安装之前的驱…

Django路由Router

文章目录 一、路由router路由匹配命名空间反向解析 二、实践创建用户模型Model添加子路由 - 创建用户首页页面跳转 - 使用反向解析和命名空间1. 不使用命名空间的效果2. 使用命名空间的效果 用户详情页面跳转 - 路由传参路由传递多个参数re_path 以前写法,了解即可重定向Redire…

全景图!最近20年,自然语言处理领域的发展

夕小瑶科技说 原创 作者 | 小戏、Python 最近这几年&#xff0c;大家一起共同经历了 NLP&#xff08;写一下全称&#xff0c;Natural Language Processing&#xff09; 这一领域井喷式的发展&#xff0c;从 Word2Vec 到大量使用 RNN、LSTM&#xff0c;从 seq2seq 再到 Attenti…

Cocos Creator的rigidBody.applyForce变成了滚动

序: 1、原因是因为没有调整摩擦系数physics-material 2、摩擦系数调整你要在你的节点 一个物理材料才会有的&#xff0c;教程没跳过去了所以没有 3、扩展阅读第一话&#xff1a;入行程序员的一波三折 最终效果&#xff1a; git录屏会卡&#xff0c;其实过程很平滑 正…

vue项目切换页面白屏不显示解决方案

问题描述 1、页面切换后白屏&#xff0c;同时切换回上一个页面同样白屏 2、刷新后正常显示 3、有警告&#xff1a;Component inside <Transition> renders non-element root node that cannot be animated 解决方法 <Transition>中的组件呈现不能动画化的非元素…

安卓如何快速定位native内存泄露。

步骤1&#xff09;cat /proc/pid/status,观察下面俩个指标 RssAnon: 5300 kB //一直增大说明匿名映射的内存增大&#xff0c;malloc本质就是调用匿名映射分 配内存 RssFile: 26884 kB //文件句柄泄露&#…

mysql之存储过程

目录 一、mysql之存储过程的相关知识 1&#xff09;存储过程的概念 2&#xff09;存储过程的优点 二、存储过程的管理 1&#xff09;创建存储过程 基本格式&#xff1a; 2&#xff09;调用存储过程 格式&#xff1a; call 存储过程名称 3&#xff09;查看存储过程 查…

TVS二极管失效分析

摘要&#xff1a;常用电路保护器件的主要失效模式为短路&#xff0c;瞬变电压抑制器(TvS)亦不例外。TvS 一旦发生短路失效&#xff0c;释放出的高能量常常会将保护的电子设备损坏&#xff0e;这是 TvS 生产厂家和使用方都想极力减少或避免的情况。通过对 TVS 筛选和使用短路失效…

【MFC】11.MFC文档和单文档架构-笔记

MFC文档 之前我们在写字符雨的时候&#xff0c;将数据都存储到了视图类中&#xff0c;这是不合理的&#xff0c;视图类只负责显示&#xff0c;不应该存储任何数据 文档&#xff1a;专门存储数据用的 CDocument 文档与视图的关系&#xff1a; 创建一个文档类 单文档四个类都…

浅谈JavaScript编程过程function函数的几种编程风格

作者来源&#xff1a;https://ost.51cto.com/user/posts/16066420 声明 JavaScript编程过程中函数是一个很有趣的点&#xff0c;JavaScript的函数与其他如:C、Java等语言有很大区别。对于从别的编程语言转来的同学可能会存在一定的“坑”&#xff0c;如function函数与>函数…

vue3 vite gzip

1、首先前端项目里安装 vite-plugin-compression 插件 yarn add vite-plugin-compression 2、在 vite.config.js 中 import vue from vitejs/plugin-vue import { defineConfig } from vite import compressPlugin from vite-plugin-compressionexport default defineConf…

C语言 指针的运算

目录 一、介绍 二、指针 整数 、指针 - 整数 二、指针 - 指针 四、指针的关系运算 一、介绍 在C语言中&#xff0c;指针的运算分为三类 1、指针 整数 、指针 - 整数2、指针 - 指针3、指针的关系运算 二、指针 整数 、指针 - 整数 因为数组在…

桂林小程序https证书

现在很多APP都相继推出了小程序&#xff0c;比如微信小程序、百度小程序等&#xff0c;这些小程序的功能也越来越复杂&#xff0c;不可避免的和网站一样会传输数据&#xff0c;因此小程序想要上线就要保证信息传输的安全性&#xff0c;也就是说各种类型的小程序也需要部署https…

第一次PR经历

第一次PR测试地址&#xff1a;https://github.com/firstcontributions/first-contributions说明文档&#xff1a; https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md

【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 39页论文及python代码

【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 39页论文及python代码 1 题目 B 题 不透明制品最优配色方案设计 日常生活中五彩缤纷的不透明有色制品是由着色剂染色而成。因此&#xff0c;不透明制品的配色对其外观美观度和市场竞争力起着重要作用。…

802.11K/V/R协议介绍

802.11K/V/R协议介绍 1.传统无线漫游介绍 1.1 什么是无线漫游 一台无线终端备&#xff08;STA&#xff09;通过连接Wi-Fi获取上网体验&#xff0c;Wi-Fi名称&#xff08;又称为SSID&#xff09;是由无线接入网&#xff08;AP&#xff09;提供的&#xff0c;因为一台AP设备的覆…

idea如何开启远程调试

一&#xff1a;打包需要部署的jar包上传到服务器 二&#xff1a;服务器&#xff08;开启远程调试接口&#xff09; nohup java -jar -Xdebug -Xrunjdwp:transportdt_socket,servery,suspendn,address8453 xxx.jar > xxx.log 2>&1 & 三&#xff1a; idea配置rem…

web 3d场景构建+three.js+室内围墙,仓库,楼梯,货架模型等,第一人称进入场景案例

翻到了之前的一个案例&#xff0c;基于three.js做的仓库布局模拟&#xff0c;地图元素除了大模型外&#xff0c;其他都是通过JSON数据解析动态生成的&#xff0c;例如墙体&#xff0c;柱子门口&#xff0c;地标等&#xff0c;集成了第一人称的插件可以第一人称进入场景有需要的…

pytorch入门-TensorBoard和Transforms

TensorBoard from PIL import Image from torch.utils.tensorboard import SummaryWriter from torchvision import transforms# python的用法 -》 tensor数据类型 # 通过transforms.ToTensor 去解决两个问题 # 1. transforms该如何使用&#xff08;python&#xff09; # 2. …

vue手写多对多关联图,连线用leader-line

效果如图 鼠标滑动效果 关联性效果 <template ><div class"main" ref"predecessor"><div class"search"><div class"search-item"><div class"search-item-label">部门</div><Trees…