js-杂记
js可计算传值
<p>点击按钮计算 x 的值.</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
y=5;
z=2;
x=y+z;
document.getElementById("demo").innerHTML=x;
}
判断并显示数据
<p>点击按钮检测年龄。</p>
年龄:<input id="age" value="18" />
<p>是否达到投票年龄?</p>
<button onclick="myFunction()">点击按钮</button>
<p id="demo"></p>
<script>
function myFunction()
{
var age1,vote;
age1=document.getElementById("age").value;
vote=(age<18)?"年龄太小":"年龄已达到";
document.getElementById("demo").innerHTML=vote;
}
</script>
if else判断提示
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
switch判断
<p>点击下面的按钮，会显示出基于今日日期的消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default:
x="上班周，期待周末";
}
document.getElementById("demo").innerHTML=x;
}
</script>
for循环输出
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
while循环输出
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
document.write(cars[i] + "<br>");
i++;
}
break 语句可用于跳出循环。
continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。 该例子跳过了值 3：
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
操作符类型
<p> typeof 操作符返回变量、对象、函数、表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof NaN + "<br>" +
typeof false + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof {name:'john', age:34} + "<br>" +
typeof new Date() + "<br>" +
typeof function () {} + "<br>" +
typeof myCar + "<br>" +
typeof null;
</script> 结果
string
number
number
boolean
object
object
object
function
undefined
object
catch检测错误
<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
</script>
表单提交显示结果
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
验证输入值
<p>输入数字并点击验证按钮:</p> <input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button> <p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p> <p id="demo"></p> <script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "输入的值太大了";
} else {
txt = "输入正确";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
代码规范
变量名推荐使用驼峰法来命名(camelCase): 通常运算符 ( = + - * / ) 前后需要添加空格: 通常使用 4 个空格符号来缩进代码块： 一条语句通常以分号作为结束符。 复杂语句的通用规则:
将左花括号放在第一行的结尾。
左花括号前添加一空格。
将右花括号独立放在一行。
不要以分号结束一个复杂的声明。 对象定义的规则:
将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号。 短的对象代码可以直接写成一行: 一般很多代码语言的命名规则都是类似的，例如:
变量和函数为驼峰法（ camelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE ) 使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的): HTML 文件后缀可以是 .html (或r .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。 大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格，我们建议统一使用小写的文件名。
鼠标监听
<body> <p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script> </body>
js-杂记的更多相关文章
- 关于node.js杂记
https://gitlore.com/page/gitlore-git/nodejs/index.html[node.js中文文档] ////// https://gitlore.com/in ...
- js杂记：x:function(){}
发现问题于jQuery源码,整理问题于百度知道: 如下: x:function(){} 这代表一个对象的函数 例如: var ooo = { p1:0, p2:'xxx', f1:function(p ...
- jquery.fileupload.js 杂记
通过$your_jq_dom.fileupload({},donf:function...,fail:function..., ...) 得到的只是一个支持上传的控件,当然绑定了各种事件. 传参给ur ...
- JS杂记
jQuery(function($) {等于<body onload ='rickk()'>function rickk() }
- css+js杂记
css的盒子模型分:ie盒子模型和标准盒子模型 区别: 2.选择器 .id选择器(# myid) .类选择器(.myclassname) .标签选择器(div, h1, p) .相邻选择器(h1 + ...
- 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法
1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...
- js问题杂记
1.如何把字符串数组 转成数组对象? eval妙用 var str = "[\"UserName=1,Pwd=1\",\"UserNmae=1,Pwd=1,Sa ...
- 关于js闭包杂记
闭包:一个函数oneF里return了另一个函数innerF,然后在oneF外面运行了函数innerF,如果innerF里有用到在oneF里定义的变量,则此时依然可以引用到, 但是变量值不是定义函数i ...
- js动画杂记
在画布上做动画 方法有 setIntervel(function(){},time); setTimeout(function(){},time); 新方法 window.requestAnimati ...
- 5天揭秘js高级技术-第一天
一.基础杂记 1. document.write() <script type="text/javascript"> document.write('<h2> ...
随机推荐
- centos 6.X 安装nodejs v6.11.0和npm
下载nodejs wget -c https://nodejs.org/dist/v6.11.0/node-v6.11.0-linux-x64.tar.xz 安装gcc++ yum install - ...
- 开源数据采集组件比较: scribe、chukwa、kafka、flume
针对每天TB级的数据采集,一般而言,这些系统需要具有以下特征: 构建应用系统和分析系统的桥梁,并将它们之间的关联解耦: 支持近实时的在线分析系统和类似于Hadoop之类的离线分析系统: 具有高可扩展性 ...
- 了解ARM+Android
第一部分 认识ARM,方案商,GPU , 芯片 1.1 ARM ARM(Advanced RISC Machines)是微处理器行业的一家知名企业,设计了大量高性能.廉价.耗能低的RISC处理器.相关 ...
- java cp命令
java -cp .;c:\dir1\lib.jar Test -cp 和 -classpath 一样,是指定类运行所依赖其他类的路径,通常是类库,jar包之类,需要全路径到jar包,windo ...
- Azure REST API (3) 使用REST API，操作Azure ARM VM
<Windows Azure Platform 系列文章目录> 笔者之前遇到一个客户,需求是当发生某一个特定条件的时候,对多台Azure ARM VM执行开机或者关机操作,这个时候就需要使 ...
- Django--bug--ImproperlyConfigured: The SECRET_KEY setting must not be empty.
Django配置Restframework后,建立用户模型,执行迁移的时候报如下错误: django.core.exceptions.ImproperlyConfigured: The SECRET_ ...
- 数据仓库专题（5）-如何构建主题域模型原则之站在巨人的肩上（二）NCR FS-LDM主题域模型划分
一.前言 分布式数据仓库模型的架构设计,受分布式技术的影响,很多有自己特色的地方,但是在概念模型和逻辑模型设计方面,还是有很多可以从传统数据仓库模型进行借鉴的地方.NCR FS-LDM数据模型是金融行 ...
- SQL Server的分页优化及Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...
- jQuery :has() 选择器
实例 1.选取所有包含有 <span> 元素在其内的 <p> 元素: $("p:has(span)") 2. <!DOCTYPE html ...
- mybatisz中一个可以替代between..and 的技巧
用mybatis进行时间段筛选时,如果,查询本日,本月的信息量,我们可以使用like concat()函数来替换between..and <select id="queryMyStaf ...