queryselector

sessionStorage存储

匿名 (未验证) 提交于 2019-12-03 00:28:02
简单说明 ( 1 )在存储用户数据的时候,因为cookie可以存储的数据比较小才 4 KB左右 所以也可以考虑使用sessionStorage来存储,大小限制为 2 M左右 ( 2 )该技术和localStorage是h5推出的,因此在使用的时候,需要考虑到兼容性的问题 ( 3 )相关资料:http://www .w 3school .com .cn /html5/html_5_webstorage .asp ( 4 )简单介绍和使用: 001 sessionStorage:会话存储技术(session-会话) 002 该技术和cookie一样,一样浏览器退出了,那么保存的数据就会 003 演示sessionStorage技术的相关操作 添加|获取|更新|删除|清空 示例代码 < input type = "text" > < button class = "btn1" > 添加 </ button > < button class = "btn2" > 获取 </ button > < button class = "btn3" > 更新 </ button > < button class = "btn4" > 删除 </ button > < button class = "btn5" > 清空 </ button > < script > window

杂七杂八-01

匿名 (未验证) 提交于 2019-12-03 00:25:02
1. getElementById和querySelector方法的区别 getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。 简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后就和文档的改变无关了。 详细参考: https://www.cnblogs.com/leaf930814/p/6660305.html 文章来源: 杂七杂八-01

es6的class类封装轮播图

匿名 (未验证) 提交于 2019-12-03 00:11:01
话不多说,直接上代码 <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <title> Title </title> <script></script> <style> * { margin : 0 ; padding : 0 ; } . box { width : 400px ; height : 350px ; border : 1px solid red ; overflow : hidden ; margin : auto ; margin - top : 50px ; position : relative ; top : 0 ; left : 0 ; } . outer { list - style : none ; position : absolute ; top : 0 ; left : 0 ; transition : . 3s all linear ; } . img { width : 400px ; height : 350px ; float : left ; } . left { position : absolute ; top : 200px ; right : 0 ; display : none ; } . right { position :

【webrtc】获取设备权限(12)

匿名 (未验证) 提交于 2019-12-03 00:09:02
注意:之前直接获取音视频设备的时候,设备的label数据并没有;但是,在获取音视频流的时候,浏览器会弹窗提醒权限允许,之后再去获取音视频设备的label等是有数据的 'use strict' ; var videoplay = document . querySelector ( 'video#player' ) //设备的展示与选择 var audioSource = document . querySelector ( "select#audioSource" ) ; var audioOutput = document . querySelector ( "select#audioOutput" ) ; var videoSource = document . querySelector ( "select#videoSource" ) ; function gotDevices ( deviceInfos ) { //参数deviceInfos是设备信息的数组 deviceInfos . forEach (( deviceInfo ) = > { console . log ( deviceInfo . kind + ':label = ' + deviceInfo . label + ':id = ' + deviceInfo . deviceId + ':groupId

拖动的模态框

匿名 (未验证) 提交于 2019-12-03 00:02:01
案例分析: 1,点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。 2,点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3,鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4,鼠标松开,可以停止模态框移动 mouseup 5, 拖拽过程,鼠标移动过程中,获得最新的值赋给模态框的left 和 top 值,这样模态框就可以跟着鼠标走了。 6,鼠标按下触发的事件源是最上面一行,就是 id 为 title 7, 鼠标的坐标减去 鼠标在盒子内的坐标,才是模态框真正的位置 8,鼠标按下,要得到鼠标在盒子的坐标 鼠标移动,就让模态框的坐标设置为 : 鼠标坐标减去鼠标在盒子内的坐标即可,注意移动事件写 到按下事件的里面 鼠标松开:就停止拖拽,就是可以让鼠标移动事件解除 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } .login { display: none; width:

JS === Download 模态框

匿名 (未验证) 提交于 2019-12-02 23:49:02
a)页面初始只有一个button,上面显示文字【start Download】 b)点击button后,button文字变为【Downloading】,并弹出模态对话框 ģ̬ 对话框的body部分,显示下载进度的文字表示【Current Progress】和进度条表示(文字和进度条的进度要一致)button显示【Cancel Download】 d)点击【close】按钮,关闭对话框,页面上的button文字显示回【Start Download】,如最初所示 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin:0;padding:0;} html,body{width: 100%;height: 100%;} .mask{width: 100%;height: 100%;background:black;opacity: .4;position: absolute;left:0;top:0;display: none;} .dialog{width: 400px;height: 300px;position: absolute;top:0;left:0;right: 0;bottom: 0;margin:auto;border:2px solid #eee;background

会飞的小鸟小游戏 原生js

左心房为你撑大大i 提交于 2019-12-02 23:35:40
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #fbWrap { width: 350px; height: 480px; background: url("img/bg.jpg"); background-size: 100% 100%; position: relative; overflow: hidden; margin: 0 auto; } #head { position: absolute; left: 50px; top: 150px; } #head span { background: url("img/bird0.png"); position: absolute; right: 0; top: 20px; width: 40px; height: 26px; background-size: 100% 100%; } #scoring { position: absolute; left: 50%; top: 40px; z-index: 2; font-size: 50px; } #menu { position:

原生js实现放大镜效果

匿名 (未验证) 提交于 2019-12-02 21:53:52
思路分析:   1.鼠标切换图片列表时,.pic盒子中的图片相对应切换   2.在.pic中生成一个.zoom的盒子,移动该盒子时类似对.pic盒子中的图片进行剪切     2.1 动态获取.zoom盒子相对.pic盒子的background-positin属性值     2.2 对.zoom盒子的移动范围进行限制(只在.pic盒子中移动)   3.将剪切的图片按比例放大显示到.details的盒子中 注:放大比例 = 左边盒子的大小 / 里面进行剪切的盒子大小,该比例值作为右边盒子显示内容的大小 代码如下 : 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>原生js实现图片放大镜</title> 8 <link rel="stylesheet" href="./css/style.css"> 9 </head> 10 11 <body> 12 13 <div id="wrap"> 14 <div class="pic

安卓和ios键盘挡住输入内容

匿名 (未验证) 提交于 2019-12-02 21:53:52
<script>let iosUser = window.navigator.userAgent.indexOf('iPhone')let inp = document.querySelector('#inp');//input输入框if (iosUser != -1) { var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度 inp.focus(function () {//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件 interval = setInterval(function () {//设置一个计时器,时间设置与软键盘弹出所需时间相近 document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度 }, 100) }).blur(function () {//设定输入框失去焦点时的事件 clearInterval(interval);//清除计时器 document.body.scrollTop = bfscrolltop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度 });} else { inp.onclick = function

手绘风格的 JS 图表库:Chart.xkcd

╄→尐↘猪︶ㄣ 提交于 2019-12-02 21:26:58
本文作者:HelloGitHub- kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库:一个手绘风格的 JS 图表库 —— Chart.xkcd,快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。 一、介绍 项目地址:https://github.com/timqian/chart.xkcd Chart.xkcd 是一个图表库,可绘制“非精细”、“卡通”或“手绘”样式的图表。 效果是不是很可爱?那下面就跟着 HelloGitHub 发起的 《讲解开源项目》 的教程一起学习、上手使用起来吧! 二、快速入手 使用 Chart.xkcd 很容易,只需页面中包含库的引用和一个用于显示图表的 <svg> 节点即可。 2.1 代码示例 先用一段简短的代码,让大家了解下基本的参数和代码的样子,后面会有可运行的代码示例片段供大家学习和使用 😁。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--将 SVG 元素直接嵌入 HTML 页面中--> <svg class="line-chart"></svg> <!--引入 JS 库--> <script src="https://cdn