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 ...
随机推荐
- 第三个Sprint冲刺第三天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:增强了界面的效果,改善了视角
- 阿里 RocketMQ 安装与简介
一.简介 官方简介: l RocketMQ是一款分布式.队列模型的消息中间件,具有以下特点: l 能够保证严格的消息顺序 l 提供丰富的消息拉取模式 l 高效的订阅者水平扩展能力 l 实时的 ...
- Python 决策树的构造
上一节我们学习knn,kNN的最大缺点就是无法给出数据的内在含义,而使用决策树处理分类问题,优势就在于数据形式非常容易理解. 决策树的算法有很多,有CART.ID3和C4.5等,其中ID3和C4.5都 ...
- web移动端input获得光标Fixed定位失效解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输 ...
- Remove Element
Given an array and a value, remove all instances of that value in place and return the new length. T ...
- 项目中如果管理前端文件CSS和JS
如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...
- JAVA中精确计算金额BigDecimal
package com.chauvet.utils; import java.math.BigDecimal; import java.text.DecimalFormat; import java. ...
- Vue知识点
1. Vue生命周期图示: 2.插值: 文本:{{ message }}: 纯html:v-html="xxx"; 属性:v-bind:id="xxx"; 使用 ...
- PHP DES 加解密
代码很简单,如下: <?php $key = 'very important data'; function jiami($key, $str) { /* Open module, and cr ...
- ios 开发小技巧一
对于UITableViewCell中的textField/textView,你肯定想让它编辑时可以把所在行滚动到键盘上方.如果你的VC是UITableViewController或者子类,那么只要在o ...