PHP开发-js

原创于 2021-05-24 20:07:41 发布 · 434 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#开发

PHP 开发专栏收录该内容

15 篇文章

订阅专栏

文章目录

js引入

内部引用
<script type="text/javascript">
alert("hello js");
</script>

外部引用
<script type="text/javascript" src="test.js"></script>

js变量

js变量是临时存储的，js是弱类型语言，不需要定义数据类型，使用的时候区分数据类型

var x = 1;
var x = 2,name = "admin"

var x;
var = 1;

js调试

alert弹窗 or console.log

var y;
var x;
x = '123';
y = '1231';
alert(y + 1 );
console.log(x+1);

在这里插入图片描述

js数据类型

序号	类型	作用
1	number	数值类型，整形，浮点
2	string	字符串类型，单引号内
3	boolean	布尔
4	underfine	未定义(异常)，一般指声明为赋值变量
5	null	空类型
6	object	对象类型
7	NaN	Numberis，NaN()，数字返回false，不是返回true

类型转换

parselnt()：整形
parseFloat()：浮点
Number()：数值
Boolean()：布尔
强制类型转换，自动类型转换

var str = "123";
console.log(str+1); //字符串拼接
console.log(str*1+1); //自动类型转换
console.log(parseInt(str)+1);   //强制类型转换

JS控制表单

通常，name 是给后端用的，id是给js用的。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script type="text/javascript" src = js.js></script>
<form>
    用户名
    <input type="text" id="username" name="username"/><br/>
    <input type="radio" name="sex" value="1" checked> 男
    <input type="radio" name="sex" value="0"> 女<br/>
    <input type="button" id="but" onclick="show()" value="提交"/>
</form>
</body>
</html>

function show() {
    var sex = document.getElementsByName("sex");
    var sext;
    if (sex[0].checked){
        sext = sex[0].value;
        alert(sext);
    }else {
        sext = sex[1].value;
        alert(sext);
    }
}

在这里插入图片描述

JS控制列表框

三级联动

<!doctype html>
<html lang="en">
<head>
    <script type="text/javascript" src = js.js></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body onload="ymd()">
<form>
    <select name="yyyy" id="yyyy" onchange="selectYMD()"> </select>年
    <select name="mm" id="mm" onchange="selectYMD()"> </select>月
    <select name="dd" id="dd"> </select>日
</form>
</body>
</html>

function ymd() {
    var yyyy = document.getElementById("yyyy")
    var mm = document.getElementById('mm')
    var dd = document.getElementById('dd')
    var date = new Date();
    var year = parseInt(date.getFullYear());
    initselect(yyyy,1999,year);
    initselect(mm,1,12);
    initselect(dd,1,31);
    var ylen = yyyy.length;
    yyyy.selectedIndex = Math.round(ylen/2)
}
function initselect(obj,start,end) {
    for (var i=start;i<=end;i++){
        obj.options.add(new Option(i,i))
    }
}
function selectYMD() {
    var yyyy = document.getElementById("yyyy")
    var mm = document.getElementById('mm')
    var dd = document.getElementById('dd')
    var m = parseInt(mm.value);
    var dayEnd;
    if (m == 4 || m == 6 || m == 9 || m == 11){
        dayEnd=30;
    }else if (m ==2){
        dayEnd=28;
        var y = parseInt(yyyy.value);
        if ((y % 4 ==0 && y % 100 !=0) || y % 400==0)
            dayEnd=29;
    }else {
        dayEnd=31;
    }
    dd.options.length=0;
    initselect(dd,1,dayEnd);
}