html+css+js
技术成长ing
有问题评论或私信哈~
展开
-
Less + HTML + JS实现流星划过星空动画
注:该动画主要来自https://100dayscss.com/?dayIndex=41这个网址,只是里面是 scss 实现的。本人比较习惯 less ,就改用 less 了。代码在本人 GitHub 上,GitHub地址:https://github.com/cao-lianhui/CSS100day/tree/master/stars-42在这先说明没有 Less,记得先本地全...原创 2020-01-05 16:59:33 · 2847 阅读 · 2 评论 -
CSS实现催眠动画效
主要使用 CSS 实现的动画效果,其中 CSS 需要使用 Less 编译完成。效果如下图:Html 代码:<!DOCTYPE html><html> <head> <title>Hypnotic Ring</title> <meta charset="utf-8"> ...原创 2019-06-20 18:04:54 · 1833 阅读 · 0 评论 -
JavaScript数组的map()、forEach()、filter()方法
1.map() 方法在 javaScript 里 map 方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。如:var num = [1, 2, 3];var nums = num.map(function(ele){ return ele + 1;});console.log("-----map运行后的数组-----");conso...原创 2019-05-08 12:22:32 · 458 阅读 · 0 评论 -
关于移动端页面在手机调整字体大小后无法正常显示(已解决)
关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到,已经完成的移动端页面,正常情况下在手机上的浏览器端和App端都可以正常显示,可当测试把手机字体调大后,布局就忽然变乱了....盒子里面的内容向内挤了。说实话,刚开始感觉这种问题应该可以忽略,毕竟字体调大后,又可以调回原来的啊,而且大部分手机都是默认显示标准字体吧。而且我在移动端的meta标签里已经给vi...原创 2019-03-01 17:54:05 · 5844 阅读 · 2 评论 -
Javascript的继承方式
面向对象的编程语言有类(class)的概念(也是一种特殊的数据概念),在ES6出来之前,JS还不是面向对象的语言,没有类(class)的概念,但是JS可以模拟面向对象的思想编程,JS中会通过构造函数来模拟类的概念(class)。(注:下面讲的都是ES6之前的语法)例如我们创建一个简单的构造函数Person:function Person(){ //Person的属性 th...原创 2019-02-14 15:19:33 · 283 阅读 · 0 评论 -
Javascript中的原型与原型链
//先定义构造函数 function Person(name, age){ this.name = name; this.age = age; this.sayHi = function(){ console.log("Hello"); }}var per = new Person("xiao", 30);/* 如果想要使用...原创 2019-02-18 16:47:31 · 291 阅读 · 0 评论 -
原生js封装模板引擎template和测试
/* 模板引擎封装template 实现原理: 通过id获取模板中的内容(注:内容为字符串) 调用方式: 找到字符串中特殊的符号.如:标签里的{{name}}用正则表达式替换 使用对象对应的属性进行替换 ...原创 2018-08-20 18:05:01 · 1211 阅读 · 0 评论 -
css选择器总结
关于CSS选择器总结:1.标签选择器:直接找到标签名字的选择器语法:标签名{} 如:p{}2.类名选择器(类名在同一个页面可以出现多次):通过类名找到对应的标签语法:.类名{}如: .first{}3.ID名选择器(ID名在同一个页面只能出现一次)通过ID名找到对应的标签语法:#ID名{}如: #first{原创 2017-12-10 12:18:10 · 321 阅读 · 0 评论 -
html+css+js实现火影背景切换登录页面
1.效果图(代码往下滑)2.html代码3.css代码*{ margin:0px; padding:0px;}/* *号是全部的都外边距和内边距都为0,而body只是主题的外边距和内边距都为0 需要给 html 和 body 同时设宽高 100% 图片才能覆盖浏览器页面*/html,body{ overflow:hidden; width...原创 2017-10-02 17:41:08 · 4483 阅读 · 22 评论 -
HTML5页面的基本框架结构
生成页面的基本框架主要还是在head标签中增加一些基本的标签1.<title></title>标签<title>标签顾名思义,为标题,名字的意思,也就是设置网页在显示栏显示的标题。2.<meta charset="UTF-8">在<meta>里charset="UTF-8"表示该网页的国际编码,也是使网页用浏览器打开时显示...原创 2017-09-28 20:43:37 · 6519 阅读 · 0 评论 -
html+css实现跳动爱心❥(^_-)
跳动爱心主要用了些css3的动画效果@keyframe,实现后的效果如下图(截图效果比较差)。代码再往下滑。1.html代码<html> <head> <title>跳动爱心</title> <meta charset="UTF-8"> </head>...原创 2017-09-29 17:57:45 · 12152 阅读 · 3 评论