商情云 JS | CSS | Vue

最新推荐文章于 2024-06-15 06:21:07 发布

Vincent不是文森特

最新推荐文章于 2024-06-15 06:21:07 发布

阅读量130

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/m0_50685012/article/details/119753496

版权

JS学习

var echart1 = document.getElementById('echart1'); // 获取元素
var div_new = document.getElementById('echart1').getElementsByClassName('test')[2];
var text = $(this).attr("data-text"); // 取属性值
var to_search_brand = document.getElementById('search').getElementsByTagName('input')[0].value; // 即使只有一个匹配成功，也要有个[0],因为取出来的是数组

var div_new = document.createElement('div'); // 创建节点
div_new.innerText = '888'; // 设置元素的文本内容
div_new.style.cssText = "position: absolute; display: block"; // 设置节点的css样式
var append_result = echart1.appendChild(div_new); // 将新建的节点插入某节点
// 获取鼠标在图表中的实时位置
$(document).ready(function () {
    $(document.getElementById(tag_id)).mousemove(function (e) {
        console.log(e.pageX + ", " + e.pageY);
        // 获取元素长度
        var echart1_div_length = document.getElementById('echart1').getElementsByTagName('div').length;
    })
})

// 给有某属性的元素绑定方法
$(document).on("click", ".btn-switch", function () {
    $(".btn-switch").removeClass("active"); // 解除属性
    $(".btn-switch").removeClass("btn-info");
    $(this).addClass("active"); // 添加属性
    $(this).addClass("btn-info");
    var type = $(this).attr('data-type');

    Controller.api.change_date(type);

    return false;
})

// str转js
var week_activity_str_dict = eval('(' + data2[key][0] + ')');
var top_brand_dict = eval('(' + data3[key][0] + ')');

// iframe (不确定都可用)
1.js在iframe子页面操作父页面元素代码：
window.parent.document.getElementByIdx_x("父页面元素id");
2.js在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].document.getElementByIdx_x("子页面元素id");
3. jquery在iframe子页面获取父页面元素代码如下:
$("#objid",parent.document)
4. jquery在父页面获取iframe子页面的元素
$("#objid",document.frames('iframename').document)
5.在iframe中调用父页面中定义的方法和变量：
window.parent.window.parentMethod();
window.parent.window.parentValue;
6.在父页面操作iframe子页面的方法和变量
window.frames["iframe_ID"].window.childMethod();
window.frames["iframe_ID"].window.childValue;




// 绑定点击事件
var btn2 = document.getElementById('tpl_render_four');
btn2.addEventListener('click', add_shadow, false); //鼠标单击的时候调用add_shadow这个函数
btn2.addEventListener('click',function(){Controller.judge_cancel(chart_tonum)}, false) // 传参的方式
function add_shadow() {
    alert("事件监听");
}

// 解除事件监听
var btn2 = document.getElementById('header');
btn2.removeEventListener('click', add_shadow, false);


// 定时执行
setInterval(funcName,5000);   // 每隔5秒执行一次funcName()
setTimeout(judge,2000); // 2秒后执行方法juage
setTimeout(function(){Controller.judge_cancel(chart_tonum)},5000); // 传参的方式

// 判断dict中是否存在某元素
obj.hasOwnProperty(key); // ture false
// 判断数组中是否存在某元素
site.includes('runoob');  // ture false


// JS日期相关运算
function add0(m){return m<10?'0'+m:m }

var time_test = new Date()
var y = time_test.getFullYear();
var m = time_test.getMonth()+1;
var d = time_test.getDate();
var h = time_test.getHours();
var mm = time_test.getMinutes();
var s = time_test.getSeconds();
console.log(y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s))

// 通过日期获取该日期是当年的第几周,第一个参数用来判断传入的是时间戳还是日期
function getYearWeek (istimestamp=null,year=null,month=null,day=null, timestamp=null){

    if (istimestamp){
        var time_test = new Date(timestamp)
        var year = time_test.getFullYear();
        var month = time_test.getMonth()+1;
        var day = time_test.getDate();
    }
    /*
        dateNow是当前日期
        dateFirst是当年第一天
        dataNumber是当前日期是今年第多少天
    */
    let dateNow = new Date(year, parseInt(month) - 1, day);
    let dateFirst = new Date(year, 0, 1);
    let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000);

    var week_inthis_year = Math.ceil(((dataNumber - (7 - dateFirst.getDay())) / 7))
    console.log(week_inthis_year);
    return [year,month,day,week_inthis_year] // (用当前日期是今年第多少天 - (7 - 当年第一天是周几)) / 7 就能知道是当年的第几周了
}

// 两种传参方式
getYearWeek(istimestamp=0,2021,10,12,'')
getYearWeek(istimestamp=1,'','','',1633968000000)



// 通过2021 38周获取到该周开始和结束的日期<<<<<<<<<<<<<
var data_to_deal = '2021 38周'
var reg = /\d{4}/g; // 正则匹配，/g应该是结束标识符的意思
var year_to_deal = data_to_deal.match(reg)[0];
year_to_deal = parseInt(data_to_deal.match(reg)[0]);
var reg = /\d{2}周/g;
var week_to_deal = data_to_deal.match(reg)[0];
week_to_deal = week_to_deal.replace('第','');
week_to_deal = week_to_deal.replace('周','');
week_to_deal = parseInt(week_to_deal);

var week_to_date_pingjie = getDateOfISOWeek(week_to_deal,year_to_deal);

function getDateOfISOWeek (w, y) {
    var simple = new Date(y, 0, 1 + (w - 1) * 7);
    var dow = simple.getDay(); // 获取该日期是周几
    var ISOweekStart = simple;
    if (dow <= 4)
        ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
    else
        ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
    var str_year = ISOweekStart.getFullYear().toString();
    var str_month = (ISOweekStart.getMonth() + 1).toString();
    if (str_month.length == 1) str_month = '0' + str_month;
    var str_day = ISOweekStart.getDate().toString();
    var week_to_date_qian = str_year + '-' + str_month + '-' + str_day

    var week_to_date_hou = new Date(week_to_date_qian);
    var week_to_date_hou=new Date((week_to_date_hou/1000+(86400*6))*1000);
    var str_year = week_to_date_hou.getFullYear().toString();
    var str_month = (week_to_date_hou.getMonth() + 1).toString();
    if (str_month.length == 1) str_month = '0' + str_month;
    var str_day = week_to_date_hou.getDate().toString();
    var week_to_date_hou = str_year + '-' + str_month + '-' + str_day


    var week_to_date_pingjie = week_to_date_qian + ' ~ ' + week_to_date_hou
    return week_to_date_pingjie;
}
// >>>>>>>>>>>>>>>>>>

// 通过2021 38周获取到该周开始和结束的日期（我的实现）<<<<<<<<<<<<<
var need_deal_date = '2021 38周'; // 代码目的：通过2021 38周获取这周开始的日期和结束的日期
var reg = /\d{4}/g; // 正则匹配，/g应该是结束标识符的意思
var date_year = parseInt(need_deal_date.match(reg)[0]); // 提取出年份

var reg = /\d{2}周/g;
var date_week = need_deal_date.match(reg)[0];
date_week = date_week.replace('第','');
date_week = date_week.replace('周','');
date_week = parseInt(date_week); // 提取出周

function get_weekstartday_weekendday (date_week, date_year) {
    var date_year_to_dateformatter = new Date(date_year, 0, 1);
    var day_num_not_in_this_year = date_year_to_dateformatter.getDay(); // 获取该年的第一天是周几
    var date_year_firstday_timestamp = date_year_to_dateformatter.getTime(); // 获取该年的第一天的(毫秒级)时间戳
    var days_interval = (day_num_not_in_this_year + (date_week - 1) * 7) * 86400 * 1000; // 该年第一天和第38周第一天的秒数间隔
    var target_week_firstday_timestamp = date_year_firstday_timestamp + days_interval - 86400 * 1000; // 第38周第一天的时间戳（秒级），实际算出来需要减去一天
    var target_week_firstday = new Date(target_week_firstday_timestamp); // 第38周第一天
    var target_week_endday = new Date(target_week_firstday_timestamp + 86400 * 6 * 1000); // 第38周第一天

    var str_year = target_week_firstday.getFullYear().toString(); // 将date格式的对象格式化输出
    var str_month = (target_week_firstday.getMonth() + 1).toString();
    if (str_month.length == 1) str_month = '0' + str_month;
    var str_day = (target_week_firstday.getDate() - 1).toString();
    if (str_day.length == 1) str_day = '0' + str_day;
    var target_week_firstday = str_year + '-' + str_month + '-' + str_day

    var str_year = target_week_endday.getFullYear().toString(); // 将date格式的对象格式化输出
    var str_month = (target_week_endday.getMonth() + 1).toString();
    if (str_month.length == 1) str_month = '0' + str_month;
    var str_day = (target_week_endday.getDate() - 1).toString();
    if (str_day.length == 1) str_day = '0' + str_day;
    var target_week_endday = str_year + '-' + str_month + '-' + str_day

    var week_to_date_pingjie = target_week_firstday + ' ~ ' + target_week_endday
    return week_to_date_pingjie;
}

//>>>>>>>>>>>>>>>>>>>>>>>

// 自定义加载动画（展示）
var _index = layer.load(2, {
    content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>",
    shade: [0.5, '#000'],
    zIndex: 999999999999999999
});

// 加载动画关闭
layer.close(_index);

// 数组是否包含某个键
result.hasOwnProperty('code')
// 数组中是否有某个元素
arr.indexOf(某元素) > -1

// 合并数组
let arr1 = [1, 2, 3];
let arr2 = ['a', 'b'];
let arr3 = arr1.concat(arr2);
console.log(arr1);//[1, 2, 3]
console.log(arr3);//[1, 2, 3, "a", "b"]


// 将数组中的字符串全转数字类型or反向操作
var a = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
a.map(Number);  //结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String);  //结果： ['1', '2', '3', '4', '5', '6', '7', '8', '9']

// 往数组左边插入数据
data.unshift(i['value'])
// 往数组右边插入数据
data.push(i['value'])

数组对象排序

在这里插入图片描述

前端

// div 横向排列
display: inline-block;

// 搜索框
<div id="search">
    <input type="text" name="s" class="text" placeholder="输入品牌搜索" />
    <button type="button" onclick="javascript:doSearch();" class="submit">搜索</button>
</div>

CSS "white-space"属性

在这里插入图片描述

CSS "text-overflow"属性

在这里插入图片描述

CSS "overflow"属性

在这里插入图片描述

关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）

https://blog.csdn.net/qq_41638795/article/details/83304388?ops_request_misc=&request_id=&biz_id=102&utm_term=overflow&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-83304388.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187

前端定位文档流

https://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

CSS单个冒号和双冒号

伪类有----:first-child，:link, :vistited，:hover, :active, :focus，:lang用于监控动作
伪元素有--::first-line，::first-letter，::before，::after用于定位元素

:link伪类将应用于未被访问过的链接，与:visited互斥。
:hover伪类将应用于有鼠标指针悬停于其上的元素。
:active伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited伪类将应用于已经被访问过的链接，与:link互斥。
:focus伪类将应用于拥有键盘输入焦点的元素。
:first-child伪类将应用于元素在页面中第一次出现的时候。
:lang伪类将应用于元素带有指定lang的情况。
CSS3 :checked 选择器   为所有选中的输入元素设置背景颜色

::first-letter伪元素的样式将应用于元素文本的第一个字（母）。
::first-line伪元素的样式将应用于元素文本的第一行。
::before在元素内容的最前面添加新内容。
::after在元素内容的最后面添加新内容。
::before和::after通常与CSS内容生成配合使用

页内跳转

在这里插入图片描述

前端图片固定大小，不变形

<img style="float: left;height: 65px;width:65px;object-fit: contain" class="img-responsive" src="676606897.jpg">

Vue基础上的element网址

https://element.eleme.cn/#/zh-CN/component/date-picker

Vue的数据传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			{{a}}>>>{{b}}
		</div>
		<script type="text/javascript">
			var data_my_define = {'a':'this_is_a','b':'this_is_b'}
			var vm = new Vue({ // 实例化vue对象（vm就是vue model）
				el:'#app',
				data:data_my_define // 可以传一个对象
			})
			
			vm.$watch('a',function(newvalue,oldvalue){ // 监控a的值
				console.log('<<<newvalue')
				console.log(newvalue)
				console.log('<<<oldvalue')
				console.log(oldvalue)
			})
			
			vm.$data.a = 'change_the_a' // a的新值
		</script>
	</body>
</html>

在这里插入图片描述

Vue生命周期钩子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

在这里插入图片描述

Vue模板语法&插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body> 
		<div id="app">
			<p v-bind:class='bind_class'>这是上一级
				<p v-html="rawhtml">
				</p>
			</p>
			<p>
				{{number_test + 1}} // 支持运算
			</p>
			<p>
				{{ok?'YES':'NO'}} // 三目运算符
			</p>
			<p>
				{{message.split('').reverse().join('')}} // 支持函数的使用
			</p>
			
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({ // 实例化vue对象（vm就是vue model）
				'el':'#app',
				'data':
				{'message':'vue',
				'rawhtml':'<span style="color:red">test the htmloutput</span>',
				'bind_class':'change_color',
				'number_test':10,
				'ok':1
				}
			})

		</script>
		<style>
		.change_color{
			color: aqua;
			font-size: 30px;
		}
		</style>
	</body>
</html>

Vue指令

<div id="app">
	<p v-if="seen">
		如果可以看见
	</p>
	<a v-bind:href=data_url>
		这是一个链接
	</a>
	<div @click="click1">
		this is click1
		// @click.stop可以只执行自己的click事件而不连带执行父级的click事件
		<div @click.stop="click2"> 
			this is click2
		</div>
	</div>

</div>
<script type="text/javascript">
	var vm = new Vue({ // 实例化vue对象（vm就是vue model）
		'el':'#app',
		'data':{
			'message':'vue',
			'seen':1,
			'data_url':'https://www.baidu.com'
		},
		methods:{
			click1:function(){
				console.log('user click the click1')
			},
			click2:function(){
				console.log('user click the click2')
			}
		}
	})

</script>

Vue-class与style绑定

<div id="app">
	<div v-bind:class="{backgroundcoloractive:isActive,fontGreen:isGreen}">
	<!-- 这个和上面这句的效果相同 -->
	<!-- <div v-bind:class="[isActive ? 'backgroundcoloractive' : '',isGreen ? 'fontGreen' : '']"> -->
		Hi Vue
	</div>
	<div :style="{color:my_setcolor,fontSize:my_setsize}">
		test the style
	</div>

</div>
<script type="text/javascript">
	var vm = new Vue({ // 实例化vue对象（vm就是vue model）
		'el':'#app',
		'data':{
			'isActive':true,
			'isGreen':true,
			'my_setcolor':'#999AAA',
			'my_setsize':'50px'
		}
	})
</script>
<style>
	.backgroundcoloractive{
		background-color: blue;
	}
	.fontGreen{
		color: aqua;
	}
</style>

Vue-条件渲染

<div id="app">
	<div v-if="type === 'A'">
		show the A
	</div>
	<div v-else-if="type === 'B'">
		show the B
	</div>
	<div v-else-if="type === 'C'">
		show the C
	</div>
	<div v-else>
		show the D
	</div>
	<h1 v-show="judge_show">
		i am h1
	</h1>
</div>
<script type="text/javascript">
	var vm = new Vue({ // 实例化vu e对象（vm就是vue model）
		'el':'#app',
		'data':{
			'type':'C',
			'judge_show':1
		}
	})
</script>

Vue-列表渲染

<div id="app">
	<ul>
		<li v-for="item in items">
			{{item.message}}
		</li>
	</ul>
	<ul>
		// :key(v-bind:key)为每一项提供一个唯一值
		<li v-for="value,index in object" :key="index"> 
			{{index}}: {{value}}
		</li>
	</ul>

</div>
<script type="text/javascript">
	var vm = new Vue({ // 实例化vu e对象（vm就是vue model）
		'el':'#app',
		'data':{
			'items':[
				{'message':'first_message'},
				{'message':'sec_message'}
			],
			'object':{
				'title':'this is title',
				'author':'bor',
				'create_time':'today'
			}
		}
	})
</script>

Vue-事件绑定

<div id="app">
	<button v-on:click="count += 1">
		数值：{{count}}
	</button>
	<!-- 传入$event可以获得事件的其它属性 -->
	<button v-on:click="click_func('abc',$event)"> 
		调用方法
	</button>
</div>
<script type="text/javascript">
	var vm = new Vue({ 
		'el':'#app',
		'data':{
			'count':0,
			'name':'origin_name'
		},
		methods:{
			click_func:function(param,this_func){
				console.log(this.name)
				console.log(param)
				console.log(this_func)
			}
		}
	})
</script>

Vue-表单输入与绑定

<div id="app">
	<div>
		<input v-model="message" placeholder="edit me">
		<p>
			Message is: {{message}}
		</p>
		<textarea v-model="message2" placeholder="add some text"></textarea>
		<p style="white-space: pre-line;">
			{{message2}}
		</p>
	</div>
	<div>
		<!-- 点击label会触发对应的input标签 -->
		<label for="jack1">Jack_label</label>
		<input type="checkbox" id="jack1" value="Jack2" v-model="checkedNames">
		
		<label for="john1">John3_label</label>
		<input type="checkbox" id="john1" value="John2" v-model="checkedNames">
		
		<label for="coco1">Coco3_label</label>
		<input type="checkbox" id="coco1" value="Coco2" v-model="checkedNames">
		<br>
		<span>
			checking_name: {{checkedNames}}
		</span>
	</div>
	
	<div>
		<label for="p1">P1</label>
		<input type="radio" id="p1" value="p_one" v-model="picked">
		<label for="p2">P2</label>
		<input type="radio" id="p2" value="p_two" v-model="picked">
		<br>
		<span>
			checking_P: {{picked}}
		</span>
	</div>
	<button @click="submit_func">这是一个提交按钮</button>
	
</div>
<script type="text/javascript">
	var vm = new Vue({ 
		'el':'#app',
		'data':{
			'message':'define_message',
			'message2':'define_message2',
			'checkedNames':[],
			'picked':'define_picked'
		},
		'methods':{
			submit_func:function(){
				console.log(this.checkedNames)
			}
		}
	})
</script>

Vue-组件基础

<div id="app">
	<button-counter title="title1: " @other_click_func='click_func'>
	</button-counter>
</div>
<script type="text/javascript">
	Vue.component('button-counter',{ // 组件命名：驼峰法or中间横杆（下划线也可）
		props:['title'],
		data:function(){
			return {'count':0}},
		// 最终需要一个大的div标签进行包裹
		template:'<div><button v-on:click="clickfunc">{{title}} count {{count}} time</button></div>',
		methods:{
			clickfunc:function(){
				this.count ++;
				this.$emit('other_click_func',this.count) // emit触发事件
			}}})
	var vm = new Vue({ 
		'el':'#app',
		'data':{
			'message':'define_message',
			'message2':'define_message2',
			'checkedNames':[],
			'picked':'define_picked'
		},
		'methods':{
			click_func:function(count){
				console.log(count)
			}}})
</script>

在这里插入图片描述

Vue-组件的局部注册及引用

在这里插入图片描述

Vue的:picker-options

在这里插入图片描述

前端Template模板使用

在这里插入图片描述

前端Vue里动态改变标签的属性 v-bind:

在这里插入图片描述

echart的基本说明

在这里插入图片描述

Vincent不是文森特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商情云 JS | CSS | Vue

JS学习var echart1 = document.getElementById('echart1'); // 获取元素var div_new = document.getElementById('echart1').getElementsByClassName('test')[2];var div_new = document.createElement('div'); // 创建节点div_new.innerText = '888'; // 设置元素的文本内容div_new.style.c
复制链接

扫一扫