Web前端——JavaScript扩展补充
JS补充
document也是windows的一个子对象
a标签点击事件
要想设置点击a标签,执行某种方法,推荐在a标签的herf属性使用JavaScript伪协议,实现点击之后执行的js方法,而不是设置click
例如:
alertwin()是一个方法
<a href="javascript:alertwin()">hello</a>
windows对象对话框
windows自带的几个弹出对话框方法
- 可输入内容的对话框 alert(message)
- 只含确定按钮的对话框 prompt(message) 返回输入string
- 含确定和取消的对话框 confirm(message) 返回一个Boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对话框</title>
<script type="text/javascript">
function alertwin() {
alert('信息');
}
function promptWin() {
//prompt()弹出一个输入对话框
//如果输入,prompt()方法就会返回用户输入信息
var inputMsg = prompt('请输入名字');
console.log(inputMsg);
}
function confirmMsg(){
//confirm()返回一个boolean
var flag = confirm("确定删除?");
console.log(flag);
}
</script>
</head>
<body>
<button type="button" onclick="alertwin()">对话框</button>
<button type="button" onclick="promptWin()">输入对话框</button>
<button type="button" onclick="confirmMsg()">确认对话框</button>
<br /><br />
</body>
</html>
location对象
- location.href = ''; 会使浏览器留下历史记录
- location.replace(); 浏览器不会留下历史记录
- location.reload(); 刷新效果
编码和解码URI
function encode_decode() {
var uri = '19_encodeURI_decodeURI.html?name1=老王&name2=如花&key=jack marry john';
//编码
var encodeURI1 = encodeURI(uri);
//结果为name1=%E8%80%81%E7%8E%8B&name2=%E5%A6%82%E8%8A%B1&key=jack%20marry%20john
console.log(encodeURI1);
//解码
var decodeURI1 = decodeURI(encodeURI1);
console.log(encodeURI1);
}
Json工具类
- stringify json数据转为string
- parse 把string类型的json数据转为一个object
let json = {empno: 1000, ename: "scott", job: "CLERK"};
var stringify = JSON.stringify(json);
var otherJson = JSON.parse(stringify);
//通过"."来获取内容
console.log(otherJson.empno, otherJson.ename, otherJson.job);
模拟进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟进度条</title>
<style>
.processbar{
overflow: hidden;/*超出的自动隐藏*/
width: 800px;
height: 20px;
border: 1px solid skyblue;
border-radius: 5px;
}
.block{
float: left;/*从左到右排列*/
height: 20px;
width: 0px;
background-color: skyblue;
}
</style>
<script>
var length=0;//进度条的长度
function startDownload(){
const processbar =document.querySelector(".processbar");
let width = Math.random()*30;//随机获取宽度
//创建一个div元素
let block = document.createElement("div");
length += width;
//当前的进度长度是否大于800
if(length>800){
//获取最后剩余的宽度
width =800-(length-width);
block.classList="block";
block.style.width = width+"px";
processbar.appendChild(block);
return;//停止
}else{
block.style.width = width+"px";
block.classList="block";//设置类样式为block
processbar.appendChild(block);//添加元素
setTimeout(startDownload,100);//每400毫秒执行一次startDownload方法
}
}
</script>
</head>
<body>
<button type="button" onclick="startDownload()">开始下载</button>
<br /><br />
<div class="processbar">
</div>
</body>
</html>
Web前端——JavaScript扩展补充的更多相关文章
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- web前端+javascript+h5电子书籍和实战分享
有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...
- web前端----jQuery扩展(很重要!!)
1.jQuery扩展语法 把扩展的内容就可以写到xxxx.js文件了,在主文件中直接导入就行了. 用法1.$.xxx() $.extend({ "GDP": function () ...
- WEB前端--JavaScript
JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...
- web前端----Bootstrap框架补充
一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等- 响应式怎 ...
- web前端----JavaScript的DOM(三)
一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...
- web前端----JavaScript的BOM
一.引入 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和 ...
随机推荐
- 获取bing图片并自动设置为电脑桌面背景(使用 URLDownloadToFile API函数)
众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...
- System.Data.SQLite 中GUID的处理
原文:System.Data.SQLite 中GUID的处理 项目中正好用到System.Data.SQLite,在手持上使用这个数据库,因为要做数据同步,所以表中的主键都是Guid的数据类型. 在数 ...
- WP8.1的shell:SystemTray去哪了?
WP8.1 中的SystemTray被 StatusBar 代替了.在Windows.UI.ViewManagement 命名空间下,而且只能在后台代码中设置,XAML中不行.用法是这样的: Stat ...
- Unicode 7.0.1中文支持非常好
简单测试了一下,7.0.1中文支持非常好.Delphi7下将UniConnection的useUnicode设置为False,Tokyo下设置为True,Charset空着即可. 问题要点:1.建数据 ...
- 青云QingCloud宣布完成C轮融资,金额1亿美元
本轮融资由两家人民币基金领投,蓝驰创投跟投. 企业级基础云服务商青云QingCloud正式宣布完成金额为1亿美元的C轮融资,本轮融资由两家人民币基金领投,蓝驰创投跟投. 青云QingCloud公司成立 ...
- 2016最受欢迎国产开源软件评选,2016 年度开源中国新增开源软件排行榜 TOP 100
http://www.oschina.net/news/80154/2016-cn-open-source-software-top http://www.oschina.net/project/to ...
- Arcgis Server 10.4.1 搭建集群环境
1.准备工作 Arcgis Server 10.4.1 以及许可一枚 共享存储(通过UNC路径访问,如"\\server1\arcgisserver\") 服务器两台(虚拟机也可 ...
- LCN自动补偿
LCN自动补偿 1当出现需要补偿的数据的时候,LCN将请求tm.compensate.notifyUrl配置的通知地址, 请求补偿的样例数据格式: {"groupId":" ...
- Python自学day-2
一.模块 模块分两种:标准库和第三方库,标准库是不需要安装就可以使用的库. import [模块名]:导入一个库,优先是在项目路径中寻找.自定义模块名不要和标准库模块名相同. sy ...
- HBase 学习之路(六)——HBase Java API 的基本使用
一.简述 截至到目前(2019.04),HBase 有两个主要的版本,分别是1.x 和 2.x ,两个版本的Java API有所不同,1.x 中某些方法在2.x中被标识为@deprecated过时.所 ...