Python 前端之JS
JavaScript由浏览器编译运行
JS的导入方式有两种，一种直接定义，第二种通过src引入；可以存放在<head>头部，但是强烈建议放在<body>的最下面，因为如果你引入外部的JS样式很久都不能出来，会影响到用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
alert('')
</script>
</head>
<body>
<script>
alert('')
</script> <script src="commons.js"></script>
</body>
</html>
JS的变量定义，有var表示局部变量，只能在函数体内被识别，没有var表示全局变量，哪里都可以使用。
<body>
<script>
function f1(){
i = 123
}
f1();
alert(i);
</script> </body>
利用JS实现的跑马灯效果：
<body>
<div id = "i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div> <script> setInterval("f1()",1000); function f1(){
var tag = document.getElementById('i1');
var text = tag.innerText;
// alert(text);
var a = text.charAt(0);
var sub = text.substring(1,text.length);
var new_str = sub + a;
tag.innerText = new_str;
}
</script>
</body>
JS的序列化
dic = {'k1':'123','k2':456}
Object {k1: "123", k2: 456}
dic_str = JSON.stringify(dic) //将字典转换为字符串
"{"k1":"123","k2":456}"
dic_str
"{"k1":"123","k2":456}"
dic_new = JSON.parse(dic_str) //将字符串转为字典
Object {k1: "123", k2: 456}
dic_new
Object {k1: "123", k2: 456}
JS之encode和decode，针对于URL使用
<script>
var site = "http://www.baidu.com?王宝强";
var site_url = encodeURI(site);
console.log(site_url);
var site_de = decodeURI(site_url);
console.log(site_de);
</script>
执行结果：
http://www.baidu.com?%E7%8E%8B%E5%AE%9D%E5%BC%BAs3.html:13
http://www.baidu.com?王宝强
JS之escape和unescape针对字符串进行转义，譬如在cookies的使用中
JS之函数的分类
<script> //普通函数
setInterval('f1()',2000)
function f1(){
alert('123')
}
</script> <script> //匿名函数，调用的过程中不使用函数名
setInterval(function(){
alert('123');
},2000)
</script> <script> //自执行函数，分为两部分，前面是函数，后面是传递的参数()()。
(function(args){
alert(args);
})(123)
</script>
JS的作用域
<body>
<script>
xo = "alex";
function func(){
var xo = "eric";
function inner(){
console.log(xo);
}
xo = "severn";
return inner;
}
var ret = func();
ret();
</script>
</body>
执行结果：
severn
搜索框的实现：
<body>
<div>
<input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
<!--<input id="i2 " type="text" onblur="blur();">-->
</div> <script type="text/javascript">
function Focus(){
var tag = document.getElementById('i1');
if (tag.value == "请输入关键字"){
tag.value = "";
}
} function Blur(){
var tag = document.getElementById('i1');
if (tag.value.trim().length == 0){
tag.value = "请输入关键字";
}
}
</script>
</body>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
} .hide{
display: none;!important;
} .shade{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: aquamarine;
opacity: 0.6;
z-index: 1000;
} .modal{
height: 200px;
width: 400px;
background-color: darkorange;
position: fixed;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
z-index: 1001
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: #F1F1F1;">
<input type="button" value="点我" onclick="Click()"/>
</div> <div id="shade" class="shade hide"></div>
<div id="modal" class="modal hide">
<input type="button" value="取消" onclick="DeClick()"/>
</div> <script>
function Click(){
var t1 = document.getElementById("shade");
var t2 = document.getElementById("modal");
t1.classList.remove("hide");
t2.classList.remove("hide");
} function DeClick(){
var t1 = document.getElementById("shade");
var t2 = document.getElementById("modal");
t1.classList.add("hide");
t2.classList.add("hide");
}
</script>
</body>
</html>
用JS实现checkbox选择框的选择
<body>
<table border="1 solid red" id="tb">
<input type="button" value="全选" onclick="CheckALL()"/>
<input type="button" value="取消" onclick="CancelALL()"/>
<input type="button" value="反选" onclick="ReverseALL()"/>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>
<script>
function CheckALL(){
var tb = document.getElementById("tb");
var tbchild = tb.children;
var trs = tbchild[0].children;
for (var i=1;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
ck.checked = true;
// ck.setAttribute("checked","checked");
}
} function CancelALL(){
var tb = document.getElementById("tb");
var tbchild = tb.children;
var trs = tbchild[0].children;
for (var i=1;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
if(ck.checked) {
ck.checked = false;
// ck.removeAttribute("checked");
}
}
}
function ReverseALL(){
var tb = document.getElementById("tb");
var tbchild = tb.children;
var trs = tbchild[0].children;
for (var i=1;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
if (ck.checked){
ck.checked = false;
}else{
ck.checked = true;
}
}
}
</script>
</body>
JS实现的点赞功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
padding:50px;
position: relative;
} .item span{
position: absolute;
top: 50px;
left:74px;
opacity: 1;
font-size: 24px;
} </style>
</head>
<body>
<div class="item">
<a onclick="Favor(this)">赞1</a>
</div>
<div class="item">
<a onclick="Favor(this)">赞2</a>
</div>
<div class="item">
<a onclick="Favor(this)">赞3</a>
</div>
<div class="item">
<a onclick="Favor(this)">赞4</a>
</div>
<script>
function Favor(ths){
console.log(ths);
console.log(ths.parentElement);
var top = 50;
var left = 74;
var op = 1;
var fontSize = 24;
var tag = document.createElement("span");
tag.innerText = '+1';
tag.style.position = 'absolute';
tag.style.top = top +'px';
tag.style.left = left +'px';
tag.style.opacity = op;
tag.style.fontSize = fontSize +'px';
ths.parentElement.appendChild(tag); // function ftime(){
// top -= 10;
// left += 10;
// op -= 0.1;
// fontSize += 10;
//
// tag.style.top = top +'px';
// tag.style.left = left +'px';
// tag.style.opacity = op;
// tag.style.fontSize = fontSize +'px';
//
// if (op <= 0){
// console.log("KKKK")
//// clearInterval(interval);
//// ths.parentElement.removeChild(tag);
// }
// }
// setInterval('ftime()',50); var interval = setInterval(function(){
top -= 10;
left += 10;
op -= 0.1;
fontSize += 10; tag.style.top = top +'px';
tag.style.left = left +'px';
tag.style.opacity = op;
tag.style.fontSize = fontSize +'px'; if (op <= 0){
clearInterval(interval);
ths.parentElement.removeChild(tag);
}
},50)
}
</script>
</body>
</html>
JS定时器一次执行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "status" style="color:red"></div>
<input type = "submit" onclick="DeleteStatus()" value="删除"/> <script>
function DeleteStatus(){
var s = document.getElementById("status");
s.innerText ="删除成功";
setTimeout(function(){
s.innerText = "";
},5000)
}
</script>
</body>
</html>
JS之返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
right: 20px;
bottom: 20px;
} .hide{
display: none;
}
</style>
</head>
<body onscroll="BodyScroll()">
<div style="height: 2000px;background-color: aquamarine" ></div>
<div id="back" class="back hide" onclick="BackTop()" style="cursor: pointer;color: crimson">返回顶部</div>
<script>
function BackTop(){
document.body.scrollTop = 0;
} function BodyScroll(){
var s = document.body.scrollTop;
var t = document.getElementById("back");
if (s >= 100){
t.classList.remove("hide");
}else{
t.classList.add("hide");
}
}
</script>
</body>
</html>
Python 前端之JS的更多相关文章
- Python 前端 js基础
Javascript 概述 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的 ...
- Python爬虫—破解JS加密的Cookie
前言 在GitHub上维护了一个代理池的项目,代理来源是抓取一些免费的代理发布网站.上午有个小哥告诉我说有个代理抓取接口不能用了,返回状态521.抱着帮人解决问题的心态去跑了一遍代码.发现果真是这样. ...
- 前端05 /js基础
前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
- 如何用python抓取js生成的数据 - SegmentFault
如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...
- 分享非常好用的前端分页js工具类 灵活 简单易懂
分享自己封装的前端分页js工具类 下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
随机推荐
- 18、（番外）匿名方法+lambda表达式
概念了解: 1.什么是匿名委托(匿名方法的简单介绍.为什么要用匿名方法) 2.匿名方法的[拉姆达表达式]方法定义 3.匿名方法的调用(匿名方法的参数传递.使用过程中需要注意什么) 什么是匿名方法? 匿 ...
- Using python to process Big Data
Pandas is a great lib to process BIg Data. 1) pandas.pivot_table(data,values=None,columns=None,aggfu ...
- SOA的概念
面向服务的体系结构(service-oriented architecture,SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.接口是采用中 ...
- (实用篇)PHP递归实现无限级分类
在一些复杂的系统中,要求对信息栏目进行无限级的分类,以增强系统的灵活性.那么PHP是如何实现无限级分类的呢?我们在本文中使用递归算法并结合mysql数据表实现无限级分类. 在一些复杂的系统中,要求对信 ...
- ssh隧道（端口转发）
本地转发: ssh -Nf -L [bind_address:]port:host:hostport sshServer -Nf 后台运行 -L 本地转发 [bind_address] 绑定本地地址, ...
- cocoapod的下载安装解释
本文不提供cocoapod的下载安装的流程,因为那些只要百度一下就有的东西,而是对里面的代码进行解释,希望对iOS小白安装cocoapod有帮助: 一.cocoapod是什么? 开发过程中,我们会用到 ...
- PHP代码标识
1. Echo语句(打印) <?php echo "想学习PHP么"; ?> 2. 计算表达式 <?php echo 12*3; ?> 3. 字符串 < ...
- day17算法
http://www.360doc.com/content/14/0804/11/1073512_399302715.shtml
- Flume+Kafka+Strom基于伪分布式环境的结合使用
目录: 一.Flume.Kafka.Storm是什么,如何安装? 二.Flume.Kafka.Storm如何结合使用? 1) 原理是什么? 2) Flume和Kafka的整合 3) Kafka和St ...
- POI中getLastRowNum() 和getLastCellNum()的区别
hssfSheet.getLastRowNum();//最后一行行标,比行数小1 hssfSheet.getRow(k).getLastCellNum();//获取列数,比最后一列列标大1