js模拟alert,confirm,prompt Demo

目的

如果使用原生alert、confirm 等,若用户设置禁止弹窗会影响网页功能,所以使用模拟alert等更为合适。

思路

新建个构造函数,在其上加上属性方法来实现 alert、confirm、prompt功能。

部分代码

css部分

css 部分不多陈述,主要就是把这几个弹出框设置成 position:fixed 就行了,其余样式自己解决。

html部分

这里我对三个弹出框用了三个容器包裹,大部分样式相同。页面基础样式为了方便使用了 flex 布局,详细flex布局可以参照我之前的文章。 flex布局语法简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="alert layout">
<div class="title">提示</div>
<div class="close">+</div>
<div class="content"></div>
<div class="control">
<a href="#" class="enter" id="alertEnter">确定</a>
</div>
</div>
<div class="confirm layout">
<div class="title">提示</div>
<div class="close">+</div>
<div class="content"></div>
<div class="control">
<a href="#" class="enter" id="confirmEnter">确定</a>
<a href="#" class="cancel" id="confirmCancel">取消</a>
</div>
</div>
<div class="prompt layout">
<div class="title">输入内容</div>
<div class="close">+</div>
<input type="text" id="userInput">
<div class="control">
<a href="#" class="enter" id="promptEnter">确定</a>
</div>
</div>
<div class="container">
<div>alert</div>
<button id="oAlert">原生alert</button>
<button id="iAlert">模拟alert</button>
<div>confirm</div>
<button id="oConfirm">原生confirm</button>
<button id="iConfirm">模拟confirm</button>
<div>prompt</div>
<button id="oPrompt">原生prompt</button>
<button id="iPrompt">模拟prompt</button>
</div>

javascript部分

使用vh vw来做页面适配

vw vh 概念

vwviewport width 的简写,意思是屏幕的宽度。100vw等于屏幕宽度。
vhviewport height 的简写,意思是屏幕的高度。100vh等于屏幕高度。

vmax vmin

vmaxvwvh 中比较大的那个。
vmminvwvh 中比较小的那个。

浏览器兼容性

浏览器兼容性

页面适配思路

rem 做页面适配相似。这里 10vw 等于十分之一屏幕宽度,和这篇文章中使用rem来做页面适配 1rem 等于 10vw
剩下的不变,而且不需要js判断来更改根元素的字体大小。

flex布局语法简介--转自阮一峰网络日志

阮老师这篇flex布局语法篇讲述的非常详细,我对flex布局入门全靠这篇文章。
原文地址

我把这篇文章保存成了pdf 预览/下载

使用websocket 的ws库构建聊天室

更新

现在开发了新版本 多房间聊天室

websocket

html5 新api,用于实现持久化连接,且不收跨域影响。通过HTTP 的Updrade头来升级协议。

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//创建实例
var socket=new WebSocket("ws://localhost:xxxx");
//发送数据
socket.send("hello world");
//接受数据
socket.onmessage=function(event){
console.log(event.data)
}
//初始化事件
socket.onopen=function(){}
//关闭事件
socket.onclose=function(){}
//关闭连接
socket.close()

服务端

服务端这篇文章我使用了 ws 这个库。

1
npm install ws --save

Demo

新窗口打开
服务端随时可能关闭,仅供测试。 已关闭

tips

这里我使用了 vw vh 来做屏幕适配,之后我的博客会有专门文章来写这个

Demo 问题

使用media query 实现响应式布局

media query 概念

media query 即是媒介查询,可以根据浏览器的不同特性来应用不同的css样式。
例如:

1
2
3
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者

1
2
3
4
5
<style type="text/css" media="screen">
*{
padding: 0px;
}
</style>

以下我只讨论使用 screen 特性

media query screen

例子

例如

1
<link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:1080px)">

或者

使用rem来做页面适配

思路

因为rem单位的特殊性,其是根据根元素<html>的字体大小来作为单位的,所以只需修改根元素的字体大小即可改变整个页面大小甚至是布局。

根据 mediaquery来设置

通过css mediaquery 来限定不同屏幕宽度而设置根元素的字体大小来实现适配。

使用javascript判断

js获得浏览器宽高、屏幕宽高

高度有关

1
2
3
4
5
6
7
8
9
10
11
12
13
//浏览器窗口高度
window.outerHeight
//浏览器可视区域高(包括滚动条)
window.innerHeight
//ps:在部分版本QQ浏览器上innerHeight和outerHeight值相同
//浏览器可视区域高(不包括滚动条)
document.documentElement.clientHeight
//网页总高度
document.body.clientHeight
//显示器可视高度
window.screen.height
//显示器可用高度(例如去除底部任务栏)
window.screen.availHeight

宽度有关

1
2
3
4
5
6
7
8
9
10
11
12
//浏览器窗口宽度
window.outerWidth
//浏览器可视区域宽度(包括滚动条)
window.innerWidth
//浏览器可视区域宽度(不包括滚动条)
document.documentElement.clientWidth
//网页总宽度
document.body.clientWidth
//显示器可视宽度
window.screen.width
//显示器可用宽度(例如去除侧边任务栏)
window.screen.availWidth

图片高度示意

CSS3 3D立方体

演示

新窗口打开

思路

首先需要给这个正方体的父容器设置 transform-style 属性为 preserve-3d 这样才能保证子元素是在一个三位空间内,再给父元素的 position 设置为 relative,然后给子元素正方体这6个面改变角度和位置使其在正确的位置并更改其 positonabsolute 相对于父元素定位。
改变角度和位置都使用 transform 属性,之后在三维坐标系通过 rotate3d() 改变角度,通过 translate3d() 改变位置。就ok了。
tips 微信目前无法展示此效果,请选择使用浏览器打开。

代码

html

1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="box">
<div id="front">front</div>
<div id="back">back</div>
<div id="top">top</div>
<div id="bottom">bottom</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>

CSS

用vue简单实现知乎日报

前言

使用版本vue1.x。
想用vue构建知乎日报原因很简单,作为一个vue小白很需要亲手做个项目来提升提及以及更加深入了解vue,也希望这个小项目能给刚学习vue的同学一点启发。

准备工作

首先要找到知乎日报的api,这里感谢 @izzyleung 总结的知乎日报api以及说明 因为原来的api不支持跨域嘛,需要自己代理这些api并允许跨域,这里我只代理了8个接口,接口以及参见本项目github的readme。之后再用nginx来反向代理接口。

开发过程

项目参考了vue官方提供的参考项目,使用了 vue-routervue-resource 这两个插件,并且使用了vue-cli 这个脚手架工具来搭建webpack项目。之后就可以正式开发了,UI我大致模仿了知乎日报安卓客户端的UI但是没有实现其全部功能,以后会慢慢完善。对于vue的核心,组件部分,我这里写了6个组件,分别是导航栏组件、侧边栏组件、主页组件、轮播组件、主题列表组件、文章组件,考虑到要模仿客户端UI,这里组件样式全是用sass/css写的。我这里偷懒,响应式布局只写了最外面的container在屏幕宽度大于640px时候宽度调整为640px并且水平居中,所以建议在手机或F12手机模式下浏览demo,另外由于采用了flex布局,请使用现代浏览器。之后就是规划路由啦,然后做做简单的CSS3动画效果,demo就完工了,之后把demo上传到我1M带宽的小水管服务器上,静态文件挂在七牛云上,解决。

Tips:使用sublime的同学可以下载vue syntax highlight 这个插件来语法高亮.vue文件,但是,当你把 <style>加上lang="sass "时,emmet语法会失效,我的解决方式是sublime右下角暂时更改语法模式为html,另外格式化.vue代码用HTML-CSS-JS Prettify插件并在其配置文件中加上vue即可)。

图片防盗链

当我遇到知乎日报图片防盗链时候我是拒绝的,因为一直提示403,我不能确定是webpack-dev-server出问题还是nginx出问题或者是知乎封了我等等,后来发现如果我挂上ss,或者直接本地打开项目文件,图片是能正常打开的,然后我就意识到是防盗链问题,我的解决方式是用node来转发这些图片并更改请求referer头为www.zhihu.com然后问题就解决了,这里有个**花絮**:开始我把node http.Request 里面url对象的pathname写成了pathnnme然而我还没有发现导致返回的图片一直是本图片仅限在知乎内使用balabala的,我以为是服务器ip被封都放弃了,在上次检查时发现了这个bug然后图片就能正常显示了。

作业上传+学生互评打分系统

安装

1
npm install
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×