目录
浏览器下两个页面的通讯都有什么方式？
使用css与js做一个九宫格动画
请输出如下的代码打印结果
js如何实现页面地址发生变化，但页面不发生跳转，请用js实现
请用多种方式实现垂直居中，实现的方式越多越好
请实现一个getValue函数，该函数可以从一个深层对象中获取到该对象上的值
小程序中 如果希望多个Page共享一个对象（多页页面可以读写一个对象），如何实现
浏览器下两个页面的通讯都有什么方式？
1.一个窗口更新localStorage，另一个窗口监听window对象的”storage”事件，来实现通信。(但是两个界面需要同源)
2.page1将要传递的信息存储在cookie中，page2使用setInterval每隔一定时间读取cookie信息，即可随时获取要传递的信息。
3.html5引入了一个跨文档通信的API，这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。-
使用css与js做一个九宫格动画
要求，未抽奖时，所有奖品背景均为白色，当点击“抽奖”时，从左上角开始，逆时针依次（每1s切换一次）
选中（选中：即背景变为红色）每个奖品，逆时针转完2圈后，停在右下角。
<style>
body {
margin: 0;
padding: 0;
background: #f4f4f4;
}
#box {
width: 310px;
height: 310px;
display: flex;
flex-wrap: wrap;
}
.option {
width: 100px;
height: 100px;
background: #fff;
text-align: center;
line-height: 100px;
border: 1px solid red;
transform: all .5s;
}
#start {
width: 100px;
height: 100px;
background: #fff;
text-align: center;
line-height: 100px;
border: 1px solid red;
cursor: pointer;
}
</style>
<body>
<div id="box">
<div class="option">1</div>
<div class="option">2</div>
<div class="option">3</div>
<div class="option">4</div>
<div id="start">抽奖</div>
<div class="option">6</div>
<div class="option">7</div>
<div class="option">8</div>
<div class="option">9</div>
</div>
</body>
<script>
let btn = document.getElementById('start')
let options = document.getElementsByClassName('option')
btn.onclick = function () {
let timer
let num = 0
let res = 0
if (timer == null) {
timer = setInterval(() => {
num++
let arr = [0, 3, 5, 6, 7, 4, 2, 1]
for (let i = 0; i < options.length; i++) {
options[i].style.backgroundColor = '#fff'
}
options[arr[res]].style.backgroundColor = 'pink'
console.log(arr[num], arr[res]);
res++
if (res >= arr.length) res = 0
if (num >= 21) {
clearInterval(timer)
timer = null
}
}, 1000);
}
}
</script>
请输出如下的代码打印结果
//bdca
Promise里为同步b，同步d .then异步，状态为成功后立即调用，异步定时器a
setTimeout(() => {
console.log('a');
}, 0);
new Promise((resolve, reject) => {
console.log('b');
resolve(1);
}).then(() => {
console.log('c');
});
console.log('d');
js如何实现页面地址发生变化，但页面不发生跳转，请用js实现
<script>
function changeUrl(name, value) {
let url = location.href
let reg = eval('/([\?|&]/' + name + '=}[^&]*/gi]')
valeu = value.toString().replace(/(^\s*)|(\s*$)/g, '')
if (!value) {
let url2 = url.replace(reg, '')
} else {
if (url.match(reg)) {
let url2 = url.replace(reg, '$1' + value)
} else {
let url2 = url + (url.indexOf('?') > -1 ? '&' : '?') + name + '=' + value
}
}
}
history.replaceState(null, null, url2)
<script>
请用多种方式实现垂直居中，实现的方式越多越好
<div class="wrapper">
<div class="center-box" title="我要被垂直居中"></div>
</div>
1.
.wrapper {
position: relative;
background: pink;
width: 500px;
height: 500px;
}
.center-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
margin: auto;
background-color: blue;
width: 100px;
height: 100px;
}
2.
.wrapper {
position: relative;
background: pink;
width: 500px;
height: 500px;
}
.center-box {
width: 100px;
height: 100px;
background-color: blue;
line-height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
3.
.wrapper {
position: relative;
background: pink;
width: 500px;
height: 500px;
}
.center-box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
4.
.wrapper {
background: pink;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.center-box {
width: 100px;
height: 100px;
background-color: blue;
}
请实现一个getValue函数，该函数可以从一个深层对象中获取到该对象上的值
数接受两个参数，一个是需要获取值的原始对象(originObj)，第二个参数是需要从深层对象中获取value使用的key的路径(keyPath)。
var obj = {
a: {
b: {
c: {
d: 1
}
}
}
};
var res = getValue(obj, 'a.b.c.d');
console.log(res); // 打印出1
var res2 = getValue(obj, 'a.b');
console.log(res2); // 打印出{c: {d: 1}}
function getValue(originObj, keyPath) {
let keys = keyPath.split('.'),
result,
index = 0
console.log(keys);
const fn = obj => {
if (index >= keys.length) return
result = obj[keys[index++]]
if (result == null || typeof result !== 'object') return
fn(result)
}
fn(originObj)
return result
}
小程序中 如果希望多个Page共享一个对象（多页页面可以读写一个对象），如何实现
在A页面获取globalData 里的地址存在变量 a，在B页面 获取globalData 里的地址存在变量 b；
2.当在A页面修改了地址后，重新赋值a=新地址，globalData.地址 = 新地址；
3.在打开B页面时，再重新获取最新的地址
App({
globalData: {
data: {
namme: 'jyc',
age: 22
}
}
})
Page({
const app = getApp(),
data: {
data: app.globalData.data
},
onClick() {
app.globalData.data = {
namme: 'zs',
age: 18
}
this.setData({
data: app.globalData.data
})
}
});
// 页面2
Page({
const app = getApp(),
data: {
data: app.globalData.data
},
onClick() {
app.globalData.data = {
namme: 'zs',
age: 18
}
this.setData({
data: app.globalData.data
})
}
});
