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扩展补充的更多相关文章

  1. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  2. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  3. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  4. web前端+javascript+h5电子书籍和实战分享

    有很多前端伙伴们学习前端很多了,但是如何能成为优秀的程序员呢,前端必学的知识点相信学习前端的伙伴们心里都非常清楚.主要的三要素包括HTML.CSS和JavaScript.那么学好JavaScript是 ...

  5. web前端----jQuery扩展(很重要!!)

    1.jQuery扩展语法 把扩展的内容就可以写到xxxx.js文件了,在主文件中直接导入就行了. 用法1.$.xxx() $.extend({ "GDP": function () ...

  6. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  7. web前端----Bootstrap框架补充

    一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等- 响应式怎 ...

  8. web前端----JavaScript的DOM(三)

    一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in l ...

  9. web前端----JavaScript的BOM

    一.引入 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和 ...

随机推荐

  1. 【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第八章 FluidMoveBehavior完全解析之一漂浮移动 好久没更新博客了,今天如果没急事,准备连发三篇,完全讲解Blend ...

  2. 不要困在自己建造的盒子里——写给.NET程序员(附精彩评论)

    此文章的主旨是希望过于专注.NET程序员在做好工作.写好.NET程序的同时,能分拨出一点时间接触一下.NET之外的东西(例如10%-20%的时间),而不是鼓动大家什么都去学最后什么都学不精,更不是说. ...

  3. qt技巧--使用html导出表格替代excel

            曾经为qt不能直接导出excel而困扰,后来经过深入了解,得知qt支持xml国际语言,html是xml的一种.html是做网页的,相信大家比较熟悉.所以使用html的<table ...

  4. Delphi 编写IC控件

    编写控件的基本步骤 1.确定一个祖先类 2.创建一个组件单元 3.在新控件中添加属性.方法和事件 事件定义方法如下: type private FOnClick:TNotifyEvent ;//( 声 ...

  5. Java Date Calendar DateFormat Details

    From https://www.ntu.edu.sg/home/ehchua/programming/java/DateTimeCalendar.html Date and Time - Creat ...

  6. 用python的curl和lxml来抓取和分析网页内容

    Curl是一个强大的URL语法的客户端,支持DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, PO ...

  7. node应用远程调试教程

    远程调试 所谓远程调试,是指在本地IDE或命令行即时调试服务端代码,这在预发环境的测试阶段可以使用.远程调试避免了服务端环境的模拟,可快速定位bug. node应用调试 本文的教程主要针对采用 VS ...

  8. QT信号槽的六个优点(虽然直接调用函数也可解决问题,但要在具体的函数中传递指针,多对一和解除关系也够麻烦的)

    信号槽是Qt中特有的概念.它使得程序员将不同的object绑定起来,而object对象间并不需要对相互了解. Slots也是普通的c++方法,它们可以是virtual;可以被重载;可以使private ...

  9. QT5.7静态编译(使用VS2013与VS2015编译,XP可用,有详细configure脚本。VS下Qt插件的配置。编译选项加上-mp可以开启多线程编译,编译速度提高2倍以上)

    http://blog.csdn.net/u011964923/article/details/52886908 configure -confirm-license -opensource -pla ...

  10. LigerUI Dialog 滚动条问题

    LigerUI 使用Dialog时,自动显示滚动条无法隐藏.设置css 取消滚动条,不影响页面滚动条 .l-dialog-content { overflow: hidden;}