java前端
一切会更好
这个作者很懒,什么都没留下…
展开
-
CSS选择器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div p{ color: #f00; } div>p{ font-...原创 2019-07-23 21:57:25 · 106 阅读 · 0 评论 -
随机数点名
原理分析:先设置一个随机数函数setInterval(function( ){},时间),然后使用Math.random()产生随机数,Math.floor()函数向下取整, clearInterval();为停止可取消由 setInterval() 设置的 timeout。完整代码<!DOCTYPE html><html> <head> <...原创 2019-08-04 18:46:15 · 316 阅读 · 1 评论 -
计算器优化
在原先的计算器系统上,加入了如果输入值为空,以及输入字符时会提示错误,isNaN(x) 函数用于检查其参数是否是非数字值。如果是x特殊字符会返回 true。如果 x 是数字则返回 false。完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>...原创 2019-08-04 18:55:58 · 472 阅读 · 0 评论 -
简单的时钟实现
用setInterval(function(){},1000)让其每格1秒刷新一次时间,1000毫秒=1秒;在获取时间时,先要定义函数 var d=new Date();var month=d.getMonth()+1;获取月份,因为返回值是 0(一月) 到 11(十二月) 之间的一个整数,所以要获取正确的月份都要+1;var week=d.getUTCDay(); 获取周,该值是 0(星期...原创 2019-08-04 19:09:47 · 276 阅读 · 0 评论 -
简单的微博发布程序
能实现简单的上传和删除,以及显示发布的时间。主要是先创建个文本节点,然后将所要发布的信息追加在文本节点上。代码实现<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g...原创 2019-08-04 19:16:00 · 672 阅读 · 0 评论 -
简单的注册页面
一个简单的注册页面,还未连接数据库,当打开程序时,将会随机产生一组10位数的账号(不能改动),如果点击注册,尚框内尚还有未填,或者数据错误提示错误,如果未发生错误将会跳转到新页面。实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></...原创 2019-08-04 19:36:53 · 1521 阅读 · 0 评论 -
条件选择语句
条件选择语句A 或者Bif(条件表达式){函数;}else{函数;}A 或者B 或者C …或者 nif(条件表达式){函数:}else if(条件表达式){函数;}…else{函数;}switch函数switch(条件){case “”: 语句; break;case “”: 语句; break;…default:语句;}...原创 2019-07-27 16:42:29 · 664 阅读 · 0 评论 -
99乘法表和简单的计算器实现
**x=document.getElementById(“id”);x=document.getElementById(“id”).value;的区别**x=document.getElementById(“id”)只是获取某元素ID为id的对象。x=document.getElementById(“id”).value;是获取某元素ID为id的对象的value值,一般只是获取in...原创 2019-07-27 16:49:38 · 193 阅读 · 0 评论 -
类似于百度的隐藏登录显示
主要是用到KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲modal").fadeIn(…("#modal").fadeOut(500);对样式进行显示。代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2019-08-05 19:46:01 · 120 阅读 · 0 评论 -
横向导航以及 jq实现鼠标跟随
当鼠标移入时,导航显示,移出就隐藏代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;...原创 2019-08-13 10:00:48 · 181 阅读 · 0 评论 -
鼠标跟随的实现
鼠标跟随主要根据X,Y轴来计算主要代码函数是span[0].style.left = event.clientX + “px”; 计算X轴span[0].style.top = event.clientY + “px”; 计算Y轴<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g...原创 2019-08-04 18:36:19 · 610 阅读 · 0 评论 -
系统常用的布局
一个块元素 ,不写宽度的情况下 ,写边距 ,浏览器会自动计算宽度,用100%的宽度 - 边距的宽度如果我们利用定位和边距做了百分百高度的 边栏 要注意被顶部挡住的内容的尺寸左边固定宽度 200px 右边自适应宽度 高度做200px<!DOCTYPE html><html> <head> <meta charset="UTF-8">...转载 2019-07-23 22:03:12 · 641 阅读 · 0 评论 -
特殊布局方式(宽度可变的正方形,三角形,垂直居中)
宽度可变的正方形padding-bottom和定位配合 实现宽度可变的正方形,要设两个divcss.box{ position: relative; width: 30%; padding-bottom: 30%; background: red; /*overflow: hidden;*/ } .position-box{ ...原创 2019-07-23 22:47:58 · 309 阅读 · 0 评论 -
HTML标签详解
网页名字 标题 标题 标题 标题 标题 标题 <p>段落</p> <h1>列表标签</h1> <hr size="5" color="#0000FF"/> <!-- size是水平线的粗细 hr直线--> <!--li 特有属性控制前...原创 2019-07-20 15:22:19 · 146 阅读 · 0 评论 -
盒模型
盒子模型有两种分为标准盒模型跟非标准盒模型,两者的区别在盒子的大小计算方式不同1.标准盒模型w/h=w+2*(margin+padding+border).box{ width:300px; height: 300px; margin: 50px;/*外边距*/ padding: 50px;/*内边距*/ border:10px solid bla...原创 2019-07-20 15:48:09 · 415 阅读 · 0 评论 -
盒模型异常处理
异常1:子元素写在外边距显示却在父元素上外边距处理异常方式1.尽量在父元素上加内边距2.如果没有弹层 可以在父元素上加overflow: hidden;异常2;两个盒子都写边距时会被叠加当两个挨着的盒子都写边距的时候会被叠加 取距离大的那个盒子的间距在父元素上加内边距.box1{ width: 150px; height: 150px; bac...原创 2019-07-20 16:06:10 · 142 阅读 · 0 评论 -
表单元素
表单元素 (form)用来收集客户的资料表单原素不同的标签 使用属性type做分类action 提交的路径method 提交方式 数据传输的方式两个值 get/postget 明文的 255字节 传输数据量比较小post 加密的 并且能传输的数据量较大–>属性(input)单行文本框(密码框)的属性 name id value(可以用来展示内容) disable...原创 2019-07-20 16:36:38 · 432 阅读 · 0 评论 -
表单样式
表单元素的样式表单元素中除了可以设置简单的尺寸大小的样式 文本框类的元素可以设置边框等简单的样式修饰外 是做不了更复杂的,所以单复选框 单选框 需要复杂样式修饰的时候 需要借助其他标签来实现.实现的办法可以是在元素外层加上一个标签然后调整父元素的样式 将单元框或者复选框的透明度设置成0select只能设置宽高 边框等样式 所以想做复杂样式 可借助框架中提供的组件的样式行内元素 内联元素 ...原创 2019-07-20 19:46:29 · 1383 阅读 · 0 评论 -
表格制作
表格不能用来做页面布局 只能做报表border:控制边框cellspacing:单元格之间的间距cellpadding:单元格的内边距thead是表头tbody是表格的主体部分tr是行 td th都是单元格 th同时默认字体加粗colspan:合并行rowspan:合并列colgroup :控制列宽代码<!DOCTYPE html><html...原创 2019-07-20 19:51:31 · 174 阅读 · 0 评论 -
回到顶部以及吸顶 jq实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .top{ ...原创 2019-08-13 10:08:17 · 176 阅读 · 0 评论