HTML/CSS/JS
关注
分享
扫一扫
文章平均质量分 83
scwMason
一个怀揣梦想的有志青年
展开
-
js项目----贪吃蛇项目总结
1.transform按照一定角度转动一个元素具体见：transform 2.键盘事件document.onkeydown = function (e) {} 3.绝对居中：top: 0;bottom: 0;left: 0;right: 0;margin: auto;这样就会把一个元素显示在网页中间位置 4.z-index属性这是一个元...原创 2018-08-13 21:13:36 · 845 阅读 · 0 评论 -
正则表达式
RegExp两种创建方法：一.var str=/abc/;var str2="abcd";/abc/表示一种规则在控制台我们test是str这个表达式自带的方法，表示str2中有没有str里面的字符串“abc”，结果为true其中有三种附加情况：1.var str=/abc/i;加上i表示忽略大小写 2.var str=/abc/g...原创 2018-08-07 12:42:33 · 140 阅读 · 0 评论 -
jQuery后代（children方法）
jQuery children() 方法children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。下面的例子返回每个 <div> 元素的所有直接子元素：比如下面的例子：<!DOCTYPE html><html><head><meta charset="utf-8">&l..原创 2018-08-14 20:36:43 · 1825 阅读 · 0 评论 -
js时间线
这个时间线对于后期优化dom很重要原创 2018-08-06 20:54:59 · 425 阅读 · 0 评论 -
js----使用正则表达式进行简单的表单验证
<h1>表单验证</h1> <form action="" method="post" name="myform" onsubmit="judge()"> <tr> 姓名：<input type="text" name=&quo原创 2018-08-10 14:49:19 · 548 阅读 · 0 评论 -
异步加载JS
异步加载的方法：异步加载就相当于是添加了一条线程，与HTML和CSS并行加载，不会阻塞 1.defer：<script type="text/javascript" src="demo.js" defer="defer"></script>这样这个JS就是异步加载形式的了但是只能IE来用，其他浏览器不支持可以引入外部文件 ...原创 2018-08-04 18:24:57 · 1819 阅读 · 0 评论 -
json
简单来说，json就是前后端交流的一种形式，一般来说，前端传给后端一个对象，是字符串形式的，所以需要用到parse：比如现在有一个对象：var obj={ "name":"aaa", "age":123 }我们需要把他转换成这种形式才能发送给后台 同样后端发给前端的，我们也要利用parsevar obj={ ...原创 2018-08-04 12:16:05 · 145 阅读 · 0 评论 -
文本类事件、窗口事件
input:<body> <input type="text"> <script type="text/javascript"> var input=document.getElementsByTagName("input")[0]; input.oninput=function(e){ ..原创 2018-07-22 15:47:35 · 254 阅读 · 0 评论 -
键盘事件
我们写上：<script type="""text/javascript"> document.onkeydown=function(e){ console.log(e); } document.onkeypress=function(e){ console.log(e); ...原创 2018-07-22 14:28:16 · 243 阅读 · 0 评论 -
鼠标事件----移动小方块
<body> <div style="width: 100px;height: 100px;background-color: red;position:absolute;left: 0;top: 0;"></div> <script type="text/javascript"> var div = docum...原创 2018-07-22 10:26:10 · 649 阅读 · 0 评论 -
事件（下）
这是可以获取点击对象的方法： <script type="text/javascript"> var wrapper=document.getElementsByClassName("wrapper")[0];var oppset=document.getElementsByClassName("oppset")[0];var dirren=do...原创 2018-07-22 10:20:45 · 146 阅读 · 0 评论 -
脚本化css
一.获取属性<div style="width: 100px; height: 100px; background-color:red;"></div> <script type="text/javascript"> var div=document.getElementsByTagName("div")[0]; &原创 2018-07-05 23:23:02 · 240 阅读 · 0 评论 -
前端开发面试题（转载）
菜鸟教程 -- 学的不仅是技术，更是梦想！首页 笔记首页 ANDROID 互联网 程序员人生 程序员笑话 编程技术前端开发面试题分类 编程技术本文收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！也是不可能的！不可能的！不可...转载 2018-08-13 21:14:04 · 893 阅读 · 0 评论 -
魔方照片墙总结
这个旋转的魔方我们必须先创建一个舞台，并且写上属性： transform-style: preserve-3d; 1.属性perspective这是景深，就是一个定义舞台和屏幕之间距离的属性 2.关于transform属性主要就是配合两个属性使用：rotate()和translate()属性，一个是定义旋转的方向和角度，另一个是移动的方向，都是配合xyz三个轴实现 ...原创 2018-08-26 20:01:14 · 1170 阅读 · 0 评论 -
js项目----2048经验总结
1.a标签<a href="javascript:newgame();" id="newgamebutton"></a>里面的href可以是添加一个函数，表示点击这个a标签的时候就会自动调用这个函数 2.在网页title上插入一张图片<link rel="shortcut icon" type="image/x-icon" href=&原创 2018-08-17 16:43:56 · 1179 阅读 · 0 评论 -
css-----box-sizing属性
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。content-box，border和padding不计算入width之内：padding-box，padding计算入width内border-box，border和padding计算入width之内，其实就是怪异模式了： ...原创 2018-10-09 19:46:18 · 270 阅读 · 0 评论 -
js中的bind
最近在看一些大牛的Blog的时候自己总结了一下判断this的方法，举几个例子：例一：var a = { b : function(){ var func = function(){ console.log(this.c); } func(); }, c : 'Hello!'}a.b();//打印undefined首先要看方法的调用者，这里面是a，所以看a...原创 2018-10-07 16:39:25 · 360 阅读 · 0 评论 -
获取鼠标坐标的的方法（兼容性）
JavaScript 获取鼠标点击位置坐标在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容 鼠标点击位置坐标相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠...转载 2018-10-13 20:30:24 · 329 阅读 · 0 评论 -
canvas----绘制坐标轴
<body> <canvas width="600" height="400" style="border-color: #eee"></canvas></body><script> /* 默认的线条宽度1px 默认的颜色是黑色 产生的原因是 */原创 2018-10-13 12:42:05 · 771 阅读 · 0 评论 -
jQuery播放器总结
1.TweenMax动画库推荐一个比较好的学习记录 2.setAttribute设置属性值的方法 audio.setAttribute('src', $('.active_song').attr("data-oringe")); 3.audio标签的一些特性：audio.addEventListener("timeupdate", function () {var...原创 2018-10-12 22:12:15 · 199 阅读 · 0 评论 -
css3------Creative Link(2)
我们模仿的是这个3D按钮（链接）这是这一块的结构<section class="secondLink"> <nav class="effect2"> <a href=""> <span class="ratatouille"原创 2018-10-05 17:10:54 · 229 阅读 · 0 评论 -
canvas------绘制虚线
var myCanvas=document.querySelector('canvas'); //获取上下文 var ctx=myCanvas.getContext('2d'); ctx.beginPath(); ctx.lineWidth=5; ctx.moveTo(200,200); ctx.lineTo(450,200); ctx.s...原创 2018-10-02 23:53:57 · 1876 阅读 · 0 评论 -
canvas-------绘制镂空的正方形+非零环绕规则
var myCanvas=document.querySelector('canvas'); //获取上下文 var ctx=myCanvas.getContext('2d'); ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.lineTo(300,300); ctx.lineTo(100,300); ...原创 2018-09-24 16:34:54 · 1521 阅读 · 1 评论 -
canvas-----绘制平行不同样式线段+填充三角形的绘制
<canvas width="600" height="400"></canvas>var myCanvas=document.querySelector('canvas'); //获取上下文 var ctx=myCanvas.getContext('2d'); ctx.beginPath();//每次画不同样式的直线都开始新的路径，这样才不...原创 2018-09-24 11:22:22 · 722 阅读 · 0 评论 -
canvas-----线条迷糊问题
转载原创 2018-09-23 23:23:22 · 272 阅读 · 0 评论 -
3D轮播图案例总结
思路：先搭出一个长方体，然后把这个长长方体切割成很多个li，然后每个li都有四个面（用div表示），然后利用background-position-x属性将图片平移不同的距离从而拼凑成一张完整的图片，然后将每个li的旋转时间都设定成不同的额，就形成了波浪翻转的效果 1.document.querySelectorAll()querySelectorAll() ...原创 2018-09-02 20:59:31 · 770 阅读 · 0 评论 -
旋转照片墙---不熟悉的知识点
1.css3弹性盒子,用于布局多个子元素display:flex 2.CSS justify-content 属性结合弹性盒子进行布局 3.$(this).index()index()方法是获取当前的索引值，可以用再点击事件上 4.CSS3 transform属性可以进行不同方向不同角度的转动 5.CSS3 transition 属性 ...原创 2018-08-24 16:33:51 · 402 阅读 · 0 评论 -
DOM
<style type="text/css"> div.content{ width:200px; height:100px; border:2px solid red; border-radius: 50%; text-align: center; ...原创 2018-06-27 18:57:43 · 2113 阅读 · 0 评论 -
事件（上）
obj.onlick:<div style="width: 100px; height: 100px; background-color:red;position: absolute;left: 0px;"></div> <script type="text/javascript"> var div=document.getE...原创 2018-07-09 20:18:07 · 278 阅读 · 0 评论 -
文字溢出处理 | | 背景图片处理
单行文本溢出处理：/*单行文本溢出处理*/p {width:200px;height:20px;line-height:20px;border:1px solid black;/*下面三行是模板 */white-space:nowrap;/*这句话是用来实现超过文本框后文集继续往后，而不是换行*/overflow:hidden;/*溢出部分隐藏*/text-overflow:el...原创 2018-05-12 23:24:32 · 422 阅读 · 0 评论 -
第九章 在网页中使用图像
9.3 HTML内嵌图像<img src="image.jpeg">图片的格式有很多、9.3.1 给图像添加代替文本<img src="image.jpeg" alt="This is an apple">alt属性可以用来描述图片的内容，而且不会显示在网页上9.4.1 文本和图像对齐要修改内嵌图像与文本的对齐关系，可以使用CSS属性vertical-align这个属性的取...原创 2018-04-27 22:28:56 · 265 阅读 · 0 评论 -
浮动元素整理
float元素：一.可以实现排序没有加浮动元素之前，三个<div>标签就会这样排列，加了float:left以后二.文字围绕图片加了浮动元素以后就能实现文字环绕图片...原创 2018-05-12 19:15:27 · 190 阅读 · 0 评论 -
CSS(二)
absolute 是绝对定位，一定配合left、top,这两个坐标值，并且可以是负数opecity:透明度，用0-5之间的值来表示透明程度这个是标准的将一个框框放在网页中心z-index: 这是设置z轴的位置，也就是设置第几层，z轴是沿屏幕垂直的，数字越大，你就越先看到这个这样设置就会生成一个圆：这个content包含在wrapper里面，但是content的margin-top比wrapper...原创 2018-05-12 16:54:01 · 122 阅读 · 0 评论 -
CSS（一）
*{color:...}默认本页面所有元素都是这么一个颜色.c1+p{color:..}表示紧随class="c1"的标签的一个标签的颜色是这个比如：<div class="c1"> <p>hellow</p><p>world</p></div>这里显示这种颜色的只是hellow.c1~p原创 2018-05-10 18:53:39 · 150 阅读 · 0 评论 -
第八章 使用CSS设置网站格式（二）
8.7 边框a {border width:1px;border-style:solid;border-color}border-style是设置边框的格式的还可以设置边框一条边的样式：a{border-left-width:3px;border-left-color:green;border-left-style:dotted;}8.7.2 外边距和内边距 .outer{border...原创 2018-04-25 20:15:50 · 150 阅读 · 0 评论 -
第六章 使用链接
6.1.1 链接标签<a> 中间可能会跳过一些简单的小节<a href="链接地址">balalalalaa</a>这里点击balalalalaa就会跳到指向的网址<ul> <li><a href=".....">This is a link</a> &原创 2018-04-21 16:27:03 · 193 阅读 · 0 评论 -
第五章 使用列表组织信息（一）
因为HTML的内容和知识点太多了，所以必须记下来，然后自己经常看看我直接从这本书的第五章写起来了，因为前面的都是简单的介绍5.2.1定制有序列表<ol> <li>.......</li> <li>.......</li></ol>CSS相关属性<ol style="list-style-type:deci原创 2018-04-21 16:07:17 · 224 阅读 · 0 评论 -
第八章 使用CSS设置网站的样式
8.1 创建页面级样式 <style type="text/css"> <h1> { font-size:x-large; font-weight:bold; }</style>现在创建一个设置标题字体的样式表然后下面使用<h1>的时候就会自动调用这个样式表但是把样式表放在另外一个.css文件里面就要在html文...原创 2018-04-24 14:39:37 · 317 阅读 · 0 评论 -
使用HTML和CSS设置文本格式（二）
7.8.2 规定HTML文档的字符编码 <head><meta charset="UTF-8"><tiitle>....</title></head><meta charset="UTF-8">这句就是规定了字符编码<cite>......</cit原创 2018-04-23 18:07:17 · 334 阅读 · 0 评论 -
第十二章 设计表单
12.1 理解表单<form action="/form-processing-script" method="post">action属性指定了表单提交后，将对其进行处理的服务器端脚本的urlmethod属性有两个取值：post和get，post将表单数据包含在表单主体中，并将其发送给Web服务器。get就是将输入的数据以明文的方式显示在url的尾部<form action="...原创 2018-04-30 14:41:28 · 172 阅读 · 0 评论