js基础随记

L824627453

已于 2024-09-20 17:47:48 修改

阅读量6.1k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-02-18 16:24:10 首次发布

本文链接：https://blog.youkuaiyun.com/L824627453/article/details/123006168

版权

数组：[ 1,2,3]

对象：{a,b,c}

布尔值：true(false)

{

“aaa”:"111" // 111是字符串，aaa是字符名

a:true, //true是布尔值，a是变量

a:1, //1是num

}

Math.round和Math.random取得随机数

Math.round和Math.random取得随机数_百度知道https://zhidao.baidu.com/question/90728507.html?fr=iks&word=Math.round%28Math.random%28%29%2A7%29&ie=gbk

图片随机，例如1-2之间随机

var prize
prize=Math.floor((Math.random()*2)+1);
console.log("奖品:"+prize)
var Img = "img/jiang"+prize+".png"
$(".p2_03").click(function(){
	$(".jiang").attr("src",Img);
})

//判断数字是整数

var a = 3

a % 1 != 0 //变量除以1不余0

//取小数点后两位

var a = 7.119265;
console.log(a.toFixed(2))

//es6 const {aa} = this;

vue 中的 const {XXX } =this 的含义_流楚丶格念的博客-优快云博客

//js防止连点

//倒计时到期JS

//比较日期最佳方案就是比较时间戳（字符串格式）ios端识别日期不能带-，需要更改为/

//html

<span style="color: red;" id="_time"></span>
    <div class="zhezhao_div" style="width: 100%;height:100vh;top: 0;left: 0;background-color: antiquewhite;position: absolute;display: none;"></div>

//js部分

//zhy
        var timeOut = 1000;
        var compareTime = "2022-12-10 00:00:01";
        var compareTime = new Date(compareTime.replace(/-/g,"/"));
        var timestamp2 = (new Date(compareTime)).getTime(); //比较时间
        setInterval((item,index) => {
            var getTime =  (new Date()).Format("yyyy/MM/dd hh:mm:ss")
            var timestamp1 = (new Date(getTime)).getTime(); //现在时间
            console.log(timestamp2);
            if(timestamp1 < timestamp2){
                $(".zhezhao_div").hide();
            }else{
                $(".zhezhao_div").show();
            }
        }, timeOut);
        
         Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

//在html页面之中显示日期

//若不加windows.onload 方法，在页面中不能显示时间
         window.onload = function () {
            var _time = document.getElementById("_time");
            var date = new Date();
            _time.innerHTML = date.toLocaleString();
        }
        //若注释掉这个方法，控制台会报这个错误：_setTime is not defined
        function _setTime() {
            var _time = document.getElementById("_time");
            var date = new Date();
            _time.innerHTML = date.toLocaleString();
            
        }
        var interval_id = window.setInterval("_setTime()", 1000);
        // console.log(interval_id);

//jq控制页面初始化之后的滚动条位置

window.onload = function(){
				    console.log($('#scroll_div')[0].scrollWidth);
				$('#scroll_div').scrollLeft($('#scroll_div')[0].scrollWidth/2.6) //横向滚动条
			}

js控制横向滚动条位置_hy3528的博客-优快云博客_js横向滚动指定位置

//汇总对象中所有的属性形成一个数组

let data = {name:"a",age:1}

//创建一个监视的实例对象，用于监视data中属性的变化
const obs = new oBserver(data)

function oBserver(obj){
    const keys = Object.keys(obj)
}

// js生成数组里面的对象并随机打乱

function addcard(){ //生成数组
	 card_arr = [];
	for(i=1;i<=39;i++){
			var obj = {'id':i,'img':"img/card1.png",'type':0,'name':'天使'+'·'+'正位'+i}
			card_arr.push(obj)
	}
	for(i=40;i<=78;i++){
			var obj = {'id':i,'img':"img/card2.png",'type':1,'name':'天使'+'·'+'逆位'+i}
			card_arr.push(obj)
	}
	card_arr = shuffle(card_arr)
}

function shuffle(array) { // 洗牌函数 随机打断数组排序
	let newArr = array.slice()  // 不改变原数组，将数组剪切一份给newArr
	for (let i = 0; i < newArr.length; i++) {
		const j = getRandomNum(0, i)
		const temp = newArr[i]
		newArr[i] = newArr[j]
		newArr[j] = temp
	}
	return newArr
}

// js抽取数组里面的对象并删除原数组里面的抽取对象形成新的数组

function selectCard(count,time){
	var card_show_arr = [];
	// if(tempArray.length >= 3){
	// 	return false;
	// }
	var push_obj = card_arr[getRandomNum(0, card_arr.length - 1)]; 
	tempArray.push(push_obj);
	card_arr = card_arr.filter((item,index)=>{
	    return item.id !== push_obj.id
	})
	// console.log(card_arr,"card_arr");
	// console.log(tempArray,"tempArray");
	card_show_arr = tempArray;
	console.log(card_show_arr,"card_show_arr");
	setTimeout(function(){
		$(".card"+count).attr("src",card_show_arr[count-1].img)
		$(".card_text"+count).fadeIn(time)
		$(".card_text"+count).text(card_show_arr[count-1].name)
	},time);
}

//jq只点击一次(类似vue的@click.once)

$("p").one("click", function() { 
     $(this).animate({ 
         fontSize: "+=14px" 
      }); 
});

//获取当前body的屏幕宽度

if(document.documentElement.clientHeight>723){
                console.log("iponeX以上");
                $(".r1").css("top","63.5%")
                $(".r2, .r3, .r4").css("top","26.8%")
                $(".r5, .r6").css("top","36.5%")
                $(".r7").css("top","37.4%")
                $(".r8").css("top","32%")
                $(".r9").css("top","35.2%")
}

//js控制滚动条到指定位置js-点击按钮页面滚动到顶部，底部，指定位置https://www.likecs.com/show-308039050.html

// js原生select选择框代码

<select id="select_limit" class="po-ab">
							     <option value="1">全部 </option>
							 <option value="2">黑名单 </option>
							 <option value="3">白名单</option>
						</select>

//获取选择框改变的值
$("#select_limit").change(function() {
		localStorage.setItem("limit",$('#select_limit').val());
		gotopage()
	});

js 获取select的值 / js动态给select赋值https://www.cnblogs.com/renrsh/p/6725999.html

// 在另外一个窗口打开下载

Window open() 方法 | 菜鸟教程

function open_win() {
    window.open("https://www.runoob.com");
}

//jq实现侧边栏点击回底部点击回顶部

JavaScript实现回到顶部/底部的两种方法_js回到底部_henouren的博客-优快云博客

//js简单数组去重

//去重
let arr = [9,12,9,16,10,13];
let item = [...new Set(arr)];
console.log(item); //  [9, 12, 16, 10, 13]

key:value 前面是键名，后面是键值
//键值 
let arr = [9,16,88,10,15];
let sum = 0;
for(item of arr){
    sum += item;
}
138

forEach、for in、for of三者区别：
　　forEach更多的用来遍历数组
　　for in 一般常用来遍历对象或json
　　for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
　　for in循环出的是key，for of循环出的是value

//js对象数组中按 id 查找对象

let e_value = 1
let index =  items.findIndex(x => x.id == e_value);

//js 数组的增加减少去重

/*删除数组中的某一个对象
        _arr:数组
        _obj:需删除的对象
        */
    removeAaary:function(_arr, _obj) {
        var length = _arr.length;
        for (var i = 0; i < length; i++) {
            if (_arr[i] == _obj) {
                if (i == 0) {
                    _arr.shift(); //删除并返回数组的第一个元素
                    return _arr;
                }
                else if (i == length - 1) {
                    _arr.pop();  //删除并返回数组的最后一个元素
                    return _arr;
                }
                else {
                    _arr.splice(i, 1); //删除下标为i的元素
                    return _arr;
                }
            }
        }
    },
    //js 去重
    Deduplicate:function(arr){
        var newarr = []
        for (var i = 0; i < arr.length; i++) {
            if (newarr.indexOf(arr[i]) === -1) {
                newarr.push(arr[i])
            }
        }
        return newarr;
    }

//增加
           that.data.pay_info.push(item)





item是循环遍历出来的object、
arr.forEach((item,index)=>{
})

//jq jquery改变当前元素的样式，同时移除其它兄弟元素的样式

jquery改变当前元素的样式，同时移除其它兄弟元素的样式_jquery 改变当前元素样式_芒果芒果丶的博客-优快云博客

//js防抖（防止多次点击es6语法版本）

let timer:any

function aa(){

    clearTimeout(timer)
    timer = setTimeout( () => {
        timer = null;
    },500)
}

// js 用三元用算符判断奇数和偶数

(number%2==0)? "这个数字是：偶数" : "这个数字不是：偶数"

//js提交表单

<form id="name-phone-form">
					<p class="input_class">
						<span style="color: red;display: block;">*</span>
						<label style="letter-spacing: 0.3rem;white-space: nowrap;">姓名</label>:<input type="text" name="username" id="name" />
					</p>
					<p class="input_class">
						<span style="color: red;display: block;">*</span>
						<label style="white-space: nowrap;">联系方式：</label><input type="tel" name="phone" maxlength="11" id="phone" />
					</p>
					<p class="input_class">
						<span style="color: red;display: block;">*</span>
						<label style="white-space: nowrap;">家庭住址：</label>
						<select name="site" id="site">
							<option value="0" selected>车城一区</option>
							<option value="1">车城二区</option>
							<option value="2">风锦园</option>
							<option value="3">神龙小区</option>
							<option value="4">佳园一期</option>
							<option value="5">佳园二期</option>
							<option value="6">电驱动小区</option>
							<option value="7">车桥小区</option>
							<option value="8">幸福小区</option>
						</select>
					</p>
					<div class="address_content">
						<p class="input_class" >
							<input type="number" name="loudong" id="loudong" maxlength="2">栋
						</p>
						<p class="input_class" >
							<input type="number" name="danyuan" id="danyuan">单元
						</p>
						<p class="input_class">
							<input type="number" name="danyuan_num" id="danyuan_num">号
						</p>
					</div>
					
					<p class="input_class sub_btn">
						<input type="submit" name="" value="提交" onsubmit="submit(event)" >
					</p>
				</form>



$('#name-phone-form').on('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交行为
                var name = $('#name').val();
                var phone = $('#phone').val();
				
				loudong_str = $('#loudong').val();
				danyuan_str = $('#danyuan').val();
				danyuan_str_num = $('#danyuan_num').val();
				if(name == ""){
					alert('请输入姓名')
					return false
				}
				else if(phone == ""){
					alert('请输入联系方式')
					return false
				}
				else if(option_val == "" || loudong_str == "" || danyuan_str == "" || danyuan_str_num == ""){
					alert('请输入你的家庭住址！')
					return false
				}
                // 使用AJAX提交数据
                $.ajax({
                    type: 'POST',
					dataType:"json",
                    url: 'https://wx.whyimingkeji.com/zcivcase/index.php?form-form_20240823  ', // 你的服务器端处理URL
                    data: { truename  : name, phone: phone , address:option_val,building: loudong_str, unit:danyuan_str, number:danyuan_str_num},
                    success: function(response) {
                        console.log('Submission successful:', response);
						if(response.return_code == "success"){
							alert(response.return_msg)
						}
						if(response.return_code == "field"){
							alert(response.return_msg)
							window.location.reload(); 
						}
                        // 处理成功响应
                    },
                    error: function(xhr, status, error) {
                        console.error('Submission failed:', status, error);
						alert(response.return_msg)
						return false
                        // 处理错误
                    }
                });
            });

//jq或者js写可以滑动的音量条

js写的版本

【JavaScript】滑动条slide_javascript 滑动条-优快云博客

jq写的版本

let clickX = 0; //获取手指初始目标
    let offsetX = $(".loo").offset().left //滚动条原来的位置 x
let max_width = $(".jd_click_content").width() //获取滑动条的总宽度
    $(".jd_click_content").bind("touchmove",function(e){
        //移动音量条的位置
        // 计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标
        clickX = e.originalEvent.changedTouches[0].pageX-offsetX;
        addVloLength(clickX)
    })
    $(".jd_click_content").bind("touchend",function(e){
        //按下结束发送音量
        // console.log("touchmove:"+e.originalEvent.changedTouches[0].pageX)
        console.log(e,"touchendtouchendtouchendtouchend");
        clickX = e.originalEvent.changedTouches[0].pageX-offsetX;
        if(clickX <= 0){
            clickX = 0
        }
        if(clickX > max_width ){
            clickX  = max_width 
        }
        addVloLength(clickX)
        sendSocket_str('num',volume); 
    })


function addVloLength(coord){
    //进度条宽度显示 音量拖拽 赋值音量
    let clickX = coord;
    loo_width = parseInt( $(".loo").css("width"));
    newWidth = ((clickX/loo_width).toFixed(2))*loo_width;
    volume = (clickX/loo_width).toFixed(2);
    // console.log(volume,"volumevolumevolumevolume");
    $(".jd_content").css("width", newWidth + 'px')
} 

<!-- 进度条 -->
					<div class="jindu_div pos-ab ">
						<div class="jiazai pos-ab">
							<div class="jd_click_content pos-ab">
								<div class="jd_content pos-ab">
									<img src="img/page2/jdnr.png" alt="" class="loo pos-ab">
								</div>
							</div>
						</div>
					</div>


//css

/* 进度条 */
.jiazai {
    width: 3.44rem;
    height: 0.19rem;
    background: url(../img/page2/jdk.png) no-repeat;
    background-size: cover;
    top: 0;
    left: 0rem;
}
.jd_click_content {
    width: 3.44rem; 
    height: 0.2rem;
    top: 0rem;
    left: 0rem;
}
.jd_content {
    width: 1.72rem; 
    height: 0.2rem;
    overflow: hidden;
    top: 0rem;
}
.loo {
    width: 3.44rem;
}

//学习了es6之后的搜索框（搜索指定名字可以筛选到指定的表格内容，以及表格内部的增删改查。vue3）

<template>
		<h1>computed在实战中的用法--表格</h1>
		<div>
				<div>
						<input v-model="keyword" type="text" placeholder="搜索"/>
				</div>
				<div style="margin-top: 20px;">
					<table border width="600" cellpadding="0" cellspacing="0">
							<thead>
								<tr>
										<th>物品名称</th>
										<th>物品单价</th>
										<th>物品数量</th>
										<th>物品总价</th>
										<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in searchData" >
									<td>{{item.name}}</td>
									<td>{{item.price}}</td>
									<td>
										<button @click="item.num > 1 ? item.num-- : null">-</button>
										{{item.num}}
										<button @click="item.num < 99 ? item.num++ : null">+</button>
										</td>
									<td>{{item.num * item.price}}</td>
									<td><button @click="del(index)">delete</button></td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
										<td colspan="5" align="right">
											总价：{{total}}
										</td>
								</tr>
							</tfoot>
					</table>
				</div>
				
		</div>
</template>
<script setup lang="ts">
	import { ref , reactive , computed} from 'vue'
	interface data {
		name:string,
		price:number,
		num:number
	}
	// let $total = ref<number>(0)
	let keyword = ref<string>("")
	let data = reactive<Data[]>([
		{
			name:'李四的衣服',
			price:500,
			num:2
		},
		{
			name:'李四的衣服2',
			price:5004,
			num:21
		},
		{
			name:'李四的衣服3',
			price:5005,
			num:22
		},
	])
	
	// const total = () =>{
	// 	$total.value = data.reduce((pre:number, next: Data) => {
	// 			return pre + next.num*next.price
	// 	},0)
	// }
	const total = computed(() => {
    //这里是计算价格的方法
		return data.reduce((pre:number, next: Data) => {
					return pre + next.num*next.price
			},0)
	})
	
	const searchData = computed(()=>{
		//搜索过滤出现指定的人
		return data.filter((item:Data)=>{
				return item.name.includes(keyword.value)
		})
	})
	
	// total()
	
	const del = (index:number) => {
    //删除指定的表格
		data.splice(index,1)
		// total()
	}
</script>
<style>
	
</style>