js节点，我要发贴示例

效果图片：

全部代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}li {list-style: none;}#box {width: 600px;margin: 0 auto;position: relative;}#btn1,#btn2 {margin: 10px;width: 200px;height: 50px;line-height: 50px;font-size: 20px;color: white;border: none;border-radius: 20px;background-color:seagreen;}#box ul {margin-top: 10px;border-top: 1px solid lightgrey;}.content {display: none;position: absolute;top: 100px;left: 100px;width: 500px;height: 350px;background-color: white;border: 1px solid darkgrey;}.content>input:nth-of-type(1) {margin: 20px;width: 80%;text-indent: 10px;font-size: 18px;}#opt{font-size: 18px;}#te {margin: 10px;}#alltex>li>div {float: left;}#alltex>li>div>img {width: 60px;border-radius: 50%;}#alltex>li{height: 60px;padding-bottom: 10px;border-bottom: 1px dashed lightgrey;}#alltex>li>h4{margin:10px 0px 20px 70px;}#alltex>li>span{font-size: 14px;color:grey;margin-left:10px;}#alltex>li>span:nth-of-type(2){margin-left: 70px;}</style></head><body><div id="box"><button id="btn1">我要发贴</button><ul id="alltex"></ul><div class="content"><input type="text" placeholder="请输入标题（1-15个字符）" id="ipt" value=""><br>&nbsp;&nbsp;&nbsp;&nbsp;所属板块：<select name="" id="opt"><option value="">请选择板块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select><textarea name="tex" id="te" cols="55" rows="11"></textarea><button id="btn2" onclick="basicOperation()">我要发布</button></div></div><script>var _btn1 = document.getElementById("btn1");// 获取点击发布按钮var _content = document.querySelector(".content");// var _content = document.getElementsByClassName("content");_btn1.onclick = function() {_content.style.display = "block";}// onclick点击事件，点击显示发布框#content中的内容function basicOperation() {// 创建函数基本操作_content.style.display = "none";// 隐藏发布框#content中的内容var _ipt = document.getElementById("ipt");// 获取#iptvar _alltex = document.getElementById("alltex");// 获取#alltexvar newLi = document.createElement("li");// 创建<li>标签_alltex.insertBefore(newLi, _alltex.firstChild);// 添加<li>标签，使其始终是#alltex第一个孩子的位子var _tu = document.createElement("div");// 创建<div>标签newLi.appendChild(_tu);// 添加到上面创建的<li>标签中var img = ['../img/01.jpeg', "../img/02.jpeg", "../img/03.jpeg", "../img/04.jpeg"];// 创建数组存放图片var index = Math.floor(Math.random() * 4);// 任意下标0，1，2，3var imgs = img[index];// 随机图片_tu.innerHTML = `<img src='${imgs}'>`;// 把图片放到<li>标签里的<div>中var _hhh = document.createElement("h4")newLi.appendChild(_hhh);_hhh.innerText = _ipt.value;// 获取input中输入的值var _span1 = document.createElement("span");// 创建<span>标签newLi.appendChild(_span1);var _opt = document.getElementById("opt")_span1.innerText = "所属板块：" + _opt.value;// 把option中的值存放到了<li>中的<span>标签中;var _span2 = document.createElement("span");// 创建第二个<span>标签newLi.appendChild(_span2);_span2.innerText=getTime();//将获取的时间存放在<li>中的第二个<span>标签中 }// 获取时间function getTime(){date = new Date();                 _year = date.getFullYear();        // 获取年分，下同_month = date.getMonth() + 1;if (_month < 10) {_month = "0" + _month;}// 获取月份_days = date.getDate();if (_days < 10) {_days = "0" + _days;}// 获取日// 如果月数、日期小于10,数字前加上0；下同_day = date.getDay();             // _day获得的值是0-6if (_day == 0) {_day = `星期日`;} else if (_day == 1) {_day = `星期一`;} else if (_day == 2) {_day = `星期二`;} else if (_day == 3) {_day = `星期三`;} else if (_day == 4) {_day = `星期四`;} else if (_day == 5) {_day = `星期五`;} else {_day = `星期六`;}_hours = date.getHours();_minutes = date.getMinutes();if (_minutes < 10) {_minutes = "0" + _minutes}_seconds = date.getSeconds();if (_seconds < 10) {_seconds = "0" + _seconds;}if (_hours < 10) {_hours = "0" + _hours;}if (_hours <= 12) {_today = `发布时间是 ${_year}年${_month}月${_days}号 ${_day} ${_hours}:${_minutes}:${_seconds} am`;} else {_hours -= 12;// 转化输入12时制if (_hours < 10) {_hours = "0" + _hours;}_today = `发布时间是 ${_year}年${_month}月${_days}号 ${_day} ${_hours}:${_minutes}:${_seconds} pm`;}// 上午输出am，下午输出pm;return    _today; // 返回输出值}</script></body>
</html>

js节点，我要发贴示例相关推荐

.net 2.0 点击按钮用js控制是否回发关于vs2005的webproject补丁
.net 2.0 点击按钮用js控制是否回发点击按钮,对用户输入进行判断,如果用户输入的没有问题,就提交,反之就不能提交,这个可以用下面的js函数来完成 function check() { if( ...
js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) {// 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本var req ...
mock.js 在html中使用demo示例代码
mock.js 在html中使用demo示例代码 <!DOCTYPE html> <html lang="en"> <head><meta ...
node.js搭建文件服务器,Node.js创建HTTP文件服务器的使用示例
Node.js创建HTTP文件服务器的使用示例发布时间:2020-08-26 01:41:13 来源:脚本之家阅读:103 作者:foruok HelloWorld示例只有演示意义,这次我们来搞一 ...
微信小程序实现通过js操作wxml的wxss属性示例
微信小程序实现通过js操作wxml的wxss属性示例前言实现思路实现代码前言在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行 ...
JS节点（node）
什么是节点: 页面中所有的东西都是节点,所有的节点都是对象节点名 nodeType nodeName nodeValue 元素节点 1 大写的标签名 null 文本节点 3 '#text' 文本的内 ...
js节点都有哪些类型？怎么判断是哪种节点类型？
说起节点,就要说HTML DOM树,因为HTML页面每一部分都是由节点(12种类型)组成的,常用的有文本,元素,属性节点. 节点都有以下类型: 元素节点 Node.ELEMENT_NODE(1) 属性 ...
JavaScript（js)节点--父节点、子节点、兄弟节点
JavaScript(js)节点–父节点子节点一般节点至少拥有nodeType(结点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType为1 ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...

js节点，我要发贴示例

js节点，我要发贴示例相关推荐

最新文章

热门文章