仿写微博 按照时间顺序发表内容
仿写微博，主要是学习按时间顺序发布
- insertBefore的简单尝试
- 尝试一下创建在前面 并且删除的功能
- 完整代码
这篇文章不要抄袭 不然课程设计雷同容易导致零分
学习一下时间顺序发布就好了 按照原先的思路都是不断生成新的li 就是一直往下面走，不是时间顺序，所以记录一下，欢迎学习，但是不要太抄袭。
insertBefore的简单尝试
Coffee
Tea
开始是上面这种情况 点击了按钮之后变成下面这种情况
ThinkerWing
Coffee
Tea
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>function myFunction(){var newItem=document.createElement("li");var pNode=document.createElement('p');pNode.classList.add("ThinkerWing");pNode.innerText="ThinkerWing";newItem.appendChild(pNode);var list=document.getElementById("myList");list.insertBefore(newItem,list.childNodes[0]);}
</script>
</body>
</html>
尝试一下创建在前面 并且删除的功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<textarea></textarea>
<button>点击</button>
<ul>
</ul>
<script>var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');btn.onclick = function () {if (text.value == '') {alert('请输入内容')} else {var li = document.createElement('li');console.log(text.value);ul.insertBefore(li,ul.children[0]);li.innerHTML = text.value + "<a href='javaScript:;'>删除</a>";var a = document.querySelectorAll('a');for (var i = 0; i < a.length; i++) {// console.log(i);a[i].onclick = function () {ul.removeChild(this.parentNode);// console.log(this);}}}}
</script></body>
</html>
完整代码
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css">body {margin: 0px;background: url('./static/images/bg2.jpg') #EBF1F1;}li{list-style-type: none;}#myBody {width: 800px;height: 200px;border: 1px solid #000;}#myBdLeft {width: 590px;height: 100%;background: #fff;float: left;}#talkBox {text-align: left;margin: 0 0 0 25px;}#msgTxt {width: 540px;height: 80px;overflow: hidden;font-family: Tahoma, Arial;font-size: 14px;border: 1px solid gray;}#talkBox h2 {text-align: left;padding: 0px;margin: 0px;font: normal normal normal 18px/29px 'MicroSoft YaHei', SimHei;}#funBox {width: 540px;}#funBox a {color: #000;text-decoration: none;font-size: 14px;}.countTxt {color: #999;float: right;line-height: 33px;margin: 0 15px 0 0;}.countTxt em {font-family: Georgia, Tahoma, Arial;font-size: 26px;position: relative;top: -5px;vertical-align: middle;}.sendBtn {float: right;margin: 0 20px 0 0;padding: 0px;line-height: 33px;margin-left: 14px;height: 30px;width: 112px;border: 0px;cursor: pointer;}#myBdRight {background: #CCEBF4;width: 210px;height: 100%;float: right;}.list{width: 800px;height: auto;box-sizing: border-box;padding: 40px;background:rgba(0,100,100,0.3);margin-top: 20px;position: relative;word-wrap: break-word;word-break:break-all;}.list a{color: black;position: absolute;right: 10px;top: 10px;font-size: 30px;text-decoration: none;cursor: pointer;}</style></head>
<body><center><div id="myBody"><div id="myBdLeft"><div id="talkBox"><h2>有什么新鲜事告诉大家？</h2><textarea id="msgTxt"></textarea><div id="funBox"><a href="" >☺表情</a><a href="" >
仿写微博 按照时间顺序发表内容相关推荐
- java水浒传血战梁山泊,仿写题（共4分）读《三国演义》，我们可以领略到诸葛亮舌战群儒的风采；读《水浒传》，我们可以感受到众英雄梁山泊聚义的豪情；，。-七年级语文-魔方格...
仿写句子:是指在一定的语言环境中,根据语言表达的需要,参照题干所提供的句式,另写一个或多个句式相同.内容与上下文衔接的句子. 仿句是按照题目已经给出的语句的形式,再另外写出与之相仿的新句,仿句只是句式 ...
- 企业微博发布时间_内容_原则
2019独角兽企业重金招聘Python工程师标准>>> 微博营销服务理念 我们可以针对企业的官方微博提供设计.资源整合.优化等服务.在日常运营中,提供活动及话题设计,提供在线答疑.实 ...
- 1个人，3个月业余时间，采用Flutter，居然仿写了一个淘宝电商开源项目
来源 | https://www.jianshu.com/p/194448388ce9 前言 Flutter现在如火如荼,Google也在大力推广,是到了学习Flutter的时候了,今天推荐一款用Fl ...
- 如何按时间顺序查看微博关注的人发布的信息
描述:如何按时间顺序查看微博关注的人发布的信息 步骤: 首页->关注->最新微博(手机也是找到最新微博)
- android sdk build-tools_从零开始仿写一个抖音App——视频编辑SDK开发(一)
本文首发于微信公众号--世界上有意思的事,搬运转载请注明出处,否则将追究版权责任.交流qq群:859640274. 大家好久不见,又有一个多月没有发文章了.不知道还有哪些读者记得我的 从零开始仿写抖音 ...
- Netty入门与实战:仿写微信IM即时通讯系统
转载自:Netty入门与实战:仿写微信IM即时通讯系统 Netty是互联网中间件领域使用最广泛最核心的网络通信框架,几乎所有互联网中间件或者大数据领域均离不开Netty,掌握Netty是作为初中级工程 ...
- Flutter入门实战：从0到1仿写web版掘金App
2018曾埋下一粒种子,今年一定要写一本小册... 前言 立贴的方向曾今是分析react源码并实现react mini...的确亚历山大,后因团队技术方向探索以及业务压力,没有太多时间来学习源码.当然 ...
- vuecli实现仿写饿了么
点击github获取代码 仿写饿了么是一个不错的用来锻炼vue的方式,我仿写的饿了么还是比较浅显的,没有使用饿了么提供的api,数据就是自己手写的几条json用json-server打开,只是实现基本 ...
- 仿写王者荣耀官方静态网站-腾讯游戏（HTML+CSS）
1.简介 我根据王者荣耀腾讯官方网站仿写的静态网站, 目录 1.简介 2.HTML 部分 3.CSS部分 font.css index.css 2.HTML 部分 <!DOCTYPE html& ...
最新文章
- NR 5G RRC连接重建
- 给QTreeWidget添加右键菜单功能
- HTTPS通信的C++实现
- 编程判断元素归类_编程练习-判断是否为易混淆数
- Intel 64/x86_64/IA-32/x86处理器 - SIMD指令集 - SSE扩展(5) - 算术指令
- 树莓派教程 - 2.2 树莓派CSI摄像头，raspivid、raspistill常用参数
- Kafka必须掌握的核心技术：Java基础入门期末考试
- Docker 方式搭建 Prometheus + grafana
- 变迁是这个时代最好的机遇
- Java中将List转成逗号数组的方案
- [C/C++] ccpuid：CPUID信息模块 V1.02版，支持Mac OS X，支持纯C，增加CPUF常数
- pg库使用dblink连接mysql_PG-跨库操作-dblink
- windows android装应用,以IT之家为例，Win10 Mobile安装安卓APK应用体验如何？
- ecshop+ectouch LANP伪静态
- 机器人开发--D435
- Java设计模式——依赖倒转原则
- 【面向对象应用~.~】——项目开发团队分配管理软件
- 天天优惠第一个版本于6月9日发布
- Kafka从入门到精通（七）分区和副本机制
- 路由器pppoe拨号服务器无响应,pppoe服务器无响应
热门文章