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. TThreadList Demo

    type TForm1 = class(TForm) Button1: TButton; Button3: TButton; ListBox1: TListBox; Button2: TButton; ...

  2. 给Delphi程序添加版本信息（EXE和Dll）

    我们在用Delphi编译完程序,准备发布产品时,总希望随产品发布个性信息以标示产品的来源以及开发者等信息,就像windows的程序一样,使我们一看属性就知道他是微软的产品,这些在Delphi中是如何实 ...

  3. 查看 Linux 发行版本的名称以及版本号

    查看LINUX发行版的名称及其版本号的命令: lsb_release -a cat /etc/redhat-release(针对redhat,Fedora)

  4. Windows 10开发基础——启动默认应用的URI

    主要内容:通过指定的URI来启动默认的应用(设置,应用商店,地图,人脉) 方法一:直接在XAML中添加如下代码 <TextBlock x:Name="LocationDisabledM ...

  5. Win10《芒果TV》商店内测版更新至v3.7.65.0：跨平台UI新体验，铺路SP

    Win10<芒果TV - Preview>是Win10<芒果TV>官方唯一指定内测预览版,最新的改进和功能更新将会在此版本优先体验. 春去夏来,初心犹在,Win10<芒果 ...

  6. Android零碎知识之Style and Theme

    Android的styles资源文件中存在了我们在应用中定义的各种style,它们都是以style开始的元素,包含许多属性的集合.但我们一般般它们分为style和theme,那它们有什么区别呢? 一. ...

  7. 演练：创建和使用静态库 (C++)

    我们将创建的下一个库类型是静态库 (LIB). 使用静态库是重用代码的一种绝佳方式. 您不必在自己创建的每个程序中重新实现同一例程,而只需对这些例程编写一次,然后从需要该功能的应用程序引用它们即可. ...

  8. 获取其他进程中StatusBar的文本

    (*// 标题:获取其他进程中StatusBar的文本 说明:Window2000+Delphi6调试通过 设计:Zswang 支持:wjhu111@21cn.com 日期:2005-02-22 // ...

  9. 图形界面编程成就了C++

    听有人说C#.VB比C++好是因为做界面方便还算傻得可爱,听有人说用C++做数值计算而不屑于做界面可就对不起咱C++的恩人了.这我可要说道说道. 想当年C++刚出江湖,名门出身,自立门派,想抢Obje ...

  10. ASP.NET 5 牛刀小試（二）：加入第三方 DI 容器

    上回介绍了 ASP.NET vNext 自带容器的基本用法,这次要试试把 ASP.NET vNext 的自带容器换成 Autofac. 这一次,在编写范例程序的过程中,光是解决 KRE 与相关套件的版 ...